Tom*_*Tom 56 jquery jquery-validate
我正在使用JörnZaefferer的优秀jquery.validation插件,我想知道是否有一种简单的方法可以在验证之前自动修剪表单元素？
以下是验证电子邮件地址的表格的简化但有效的示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.js"
type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$("#commentForm").validate({
rules: {
email: {
required: true,
email: true
}
}
});
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<label for="cemail">E-Mail:</label><input id="cemail" name="email"
class="required email" />
<input class="submit" type="submit" value="Submit"/>
</form>
</body>
</html>
问题是一些用户感到困惑,因为他们意外地在他们的电子邮件地址中输入了一些空格,例如"test@test.com".表单将不会提交并显示错误消息:"请输入有效的电子邮件地址.".非技术用户不知道如何发现空白,可能只是退出网站而不是试图弄清楚他们做错了什么.
无论如何,我希望我可以jQuery.trim(value)在验证之前链接" ",这样就删除了空白并且验证错误永远不会发生？
我可以使用addMethod来构建我自己的电子邮件验证功能.但我确信有一个更优雅的解决方案？
小智 85
我成功地做到了这一点.
代替:
Email: { required: true, email: true }
我这样做了:
Email: {
required: {
depends:function(){
$(this).val($.trim($(this).val()));
return true;
}
},
email: true
}
hwi*_*ers 22
这段代码适合我.我没有用太多,所以可能有bug.
它包装每个方法并修剪第一个值为value的元素.
(function ($) {
$.each($.validator.methods, function (key, value) {
$.validator.methods[key] = function () {
if(arguments.length > 0) {
arguments[0] = $.trim(arguments[0]);
}
return value.apply(this, arguments);
};
});
} (jQuery));
如果你同时使用select2和验证,我建议把这样el.val($.trim(el.val()));的IF 放进去:if(el.prop('type') != 'select-multiple'){el.val($.trim(el.val()));}.这样,您的jquery验证将按预期运行,并且它将允许您选择多个项目.
tmo*_*ell 13
由于我希望默认情况下在所有表单上都有此行为,因此我决定修改jquery.validate.js文件.我将以下更改应用于onfocusout方法:
原版的:
onfocusout: function (element, event) {
if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
this.element(element);
}
}
至:
onfocusout: function (element, event) {
if (element.tagName === "TEXTAREA" || (element.tagName === "INPUT" && element.type !== "password")) {
element.value = $.trim(element.value);
}
if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
this.element(element);
}
}
我想在密码的乞讨和结束时允许空格.
autoTrim可以作为属性添加到选项中.
我喜欢xuser(/sf/answers/728460141/)的方法,但是,我不喜欢搞乱插件源代码.
所以,我建议改为:
function injectTrim(handler) {
return function (element, event) {
if (element.tagName === "TEXTAREA" || (element.tagName === "INPUT"
&& element.type !== "password")) {
element.value = $.trim(element.value);
}
return handler.call(this, element, event);
};
}
$("form").validate({
onfocusout: injectTrim($.validator.defaults.onfocusout)
});
下载validator.js时,有一个名为additional-methods.js的文件,其中包含方法"nowhitespace"和"lettersonly",它将删除字段中的任何空白区域.
rules: {
user_name: {
required: true,
minlength: 3,
nowhitespace: true
}
}
作为参考，在找到更优雅的解决方案之前，我使用addMethod如下：
// Extend email validation method so that it ignores whitespace
jQuery.validator.addMethod("emailButAllowTrailingWhitespace", function(value, element) {
return (this.optional(element) || jQuery.validator.methods.email.call(this, jQuery.trim(value), element));
}, "Please enter a valid email");
$().ready(function() {
$("#commentForm").validate({
rules: {
cemail: {
required: true,
emailButAllowTrailingWhitespace: true
}
}
});
});
注意：这实际上并没有从字段中去除空格，它只是忽略它。因此，您需要确保trim在插入数据库之前在服务器端执行。
小智 5
添加新的 jQuery 验证器方法requiredNotBlank。然后将该函数而不是默认required函数应用于您的元素。该方案没有改变原来的验证器源代码，也没有修改默认required函数，也没有直接修改元素的值。
// jQuery Validator method for required not blank.
$.validator.addMethod('requiredNotBlank', function(value, element) {
return $.validator.methods.required.call(this, $.trim(value), element);
}, $.validator.messages.required);
// ...
$('#requiredNotBlankField').rules('add', 'requiredNotBlank');
从 jQuery Validation 插件版本 1.15 开始，支持规范化器函数。规范化器可以在验证之前转换元素的值。
请注意，标准化器的结果仅用于验证。如果您想更新元素的值，则必须明确执行此操作。
$("#form").validate({
rules: {
email: {
required: true,
email: true,
// Optionally disable validation on every key press
onkeyup: false,
normalizer: function(value) {
// Update the value of the element
this.value = $.trim(value);
// Use the trimmed value for validation
return this.value;
}
}
}
});
| 归档时间： |
|
| 查看次数： |
47762 次 |
| 最近记录： |