当前位置：文江博客话题详情

同时使用 jQuery 验证和字段提示

发布于 2024-10-17 07:08:49 字数 266 浏览 9 评论 0原文

我正在尝试将 jQuery 验证插件 (http://docs.jquery.com/Plugins/Validation/) 与字段提示结合使用。

问题在于字段提示将文本放入 value 属性中，并且由于 value 属性中有文本，因此验证插件看不到任何错误。

我的想法是，如果该字段为空，或者该字段包含与字段提示相同的文本（即：如果有人在名字字段中输入“名字”，则会导致错误）是否

有一种优雅的方法将验证与代码提示结合使用？

谢谢

！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

泅渡 2024-10-24 07:08:49

有两种“提示”代码（更常见的名称是水印或占位符文本）：替换字段值的代码和将某种元素定位在输入上以使文本看起来好像文本位于输入内部的代码。

我认为您正在使用第一种方法，因此一个简单（也是最好的）解决方案是完全避免这些类型，并切换到采用第二种方法的插件。有很多插件都是以这种方式工作的，例如这个，请确保了解它们的运作方式。

如果无法更改提示代码，那么您还有其他两种选择。两者都不理想，但也许其中一种更适合您：

提交时清除值

在提示代码中，绑定到表单的 submit 事件，并循环遍历所有输入清除任何与提示具有相同值的内容。

此方法的问题在于它必须在验证插件初始化之前执行。它也不适用于在您键入时验证字段。您还必须在验证后再次检查输入以放回提示文本。

重写 .val()

由于验证插件使用 jQuery，因此您可以重写 jQuery 的 .val() 函数，以在值是时返回 ''等于提示：

var oldVal = $.fn.val;
$.fn.val = function () {
    var returnVal = oldVal.call(this);
    if (returnVal == hintVal) returnVal = '';
    return returnVal;
};

这样做的明显缺点是插件必须始终使用 .val() 来检索输入值。

There are two kinds of "hinting" code (better known as a watermark or placeholder text): those that replace the value of a field and those that position some sort of element over the input to look as if the text is inside the input.

I presume you're using the first kind, so one simple (and best) solution is to avoid these kinds entirely, and switch to a plugin that employs the second method. There are a lot of plugins that work this way, such as this one, just be sure to read how they operate.

If changing the hinting code is not an option, then you have two other alternatives. Both are not ideal, but perhaps one will suit you more:

Clear values on submit

Within the hinting code, bind to the submit event of the form, and loop through all inputs to clear any that has the same value as the hint.

The problem with this method is that it must be executed before the validation plugin is initialised. It also won't work for validating fields as you type. You'll also have to check the inputs again after validation to put the hint text back.

Overide .val()

Since the validation plugin uses jQuery, you can overide jQuery's .val() function to return '' if the value is equal to the hint:

var oldVal = $.fn.val;
$.fn.val = function () {
    var returnVal = oldVal.call(this);
    if (returnVal == hintVal) returnVal = '';
    return returnVal;
};

The obvious downside of this is that the plugin must always use .val() to retrieve input values.

回复收藏 0 原文

~没有更多了~