我正在使用JörnZaefferer的优秀jquery.validation plugin，我想知道在验证表单元素之前是否有一种简单的方法可以自动修剪表单元素？
以下是用于验证电子邮件地址的表单的缩减但有效的示例：
<!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来构建自己的电子邮件验证功能。但我确定有一个更优雅的解决方案？
答案 0 :(得分：82)
我成功地做到了这一点。
而不是：
Email: { required: true, email: true }
我这样做了：
Email: {
required: {
depends:function(){
$(this).val($.trim($(this).val()));
return true;
}
},
email: true
}
答案 1 :(得分：21)
此代码适用于我。我没有用太多，所以可能有错误。
它包装每个方法并修剪第一个值为的元素。
(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验证将按预期运行，并允许您选择多个项目。
答案 2 :(得分：12)
由于默认情况下我想在所有表单上使用此行为，因此我决定修改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可以作为属性添加到选项中。
答案 3 :(得分：7)
我喜欢xuser（https://stackoverflow.com/a/10406573/80002）的方法，但是，我不喜欢搞乱插件源代码。
所以，我建议改为：
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)
});
答案 4 :(得分：6)
下载validator.js时，有一个名为additional-methods.js的文件，其中包含“nowhitespace”和“lettersonly”方法，它将删除字段中的任何空格。
rules: {
user_name: {
required: true,
minlength: 3,
nowhitespace: true
}
}
答案 5 :(得分：4)
作为参考，在找到更优雅的解决方案之前，我正在使用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。
答案 6 :(得分：3)
从jquery验证器中拉出正则表达式。只需覆盖他们的电子邮件验证。
$.validator.addMethod("email", function(value, element) {
value = value.trim();
return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
}, "Please enter a valid email.");
答案 7 :(得分：3)
这对我有用：
$(':input').change(function() {
$(this).val($(this).val().trim());
});
答案 8 :(得分：3)
添加新的jQuery验证器方法<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="parent">
<span id="child">Click Me</span>
</label>
<input type="text" id="parent">。然后将该函数应用于元素而不是默认的requiredNotBlank函数。此解决方案不会更改原始验证器源代码，也不会修改默认的required函数，也不会直接修改元素的值。
required答案 9 :(得分：2)
你能否将修剪绑定到模糊事件？有点像...
$("#cemail").blur(function(){
$(this).val(jQuery.trim($(this).val());
});
答案 10 :(得分：2)
我发现其中大部分都不是所需要的。
使用以下内容仅触发表单更改而不是按键，允许您仍然检查其他验证的键击。
它不像在插件中包含它那样整洁，但它是可接受的妥协。
$('body').on 'change', 'form input[type=text], form input[type=email]', ->
$(@).val $.trim($(@).val())
答案 11 :(得分：1)
在jquery验证中，您将找到以下代码：
required: function( value, element, param ) {
// Check if dependency is met
if ( !this.depend( param, element ) ) {
return "dependency-mismatch";
}
if ( element.nodeName.toLowerCase() === "select" ) {
// Could be an array for select-multiple or a string, both are fine this way
var val = $( element ).val();
return val && val.length > 0;
}
if ( this.checkable( element ) ) {
return this.getLength( value, element ) > 0;
}
return value.length > 0;
}
将value.length更改为$ .trim（value）。length
答案 12 :(得分：1)
从jQuery Validation插件版本1.15开始，支持normalizer function。规范化器可以在验证之前转换元素的值。
请注意，规范化器的结果仅用于验证。如果您想更新元素的值，您必须明确地这样做。
$("#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;
}
}
}
});
答案 13 :(得分：0)
您可以在检查表单之前运行代码，如下所示：
var origCheckForm = $.validator.prototype.checkForm;
$.validator.prototype.checkForm = function() {
$(this.currentForm).find('.CodeMirror').each(function() {
if(this.CodeMirror && this.CodeMirror.save) {
this.CodeMirror.save();
}
});
return origCheckForm.apply(this, arguments);
};
我用它将我的所有CodeMirror实例保存回相应的texareas。如果需要，您可以使用它来修剪值。
答案 14 :(得分：0)
为什么不这样做？
在keyup事件之后进行验证。在keyup上将textbox值替换为其修剪值（或使用正则表达式删除任何空格）：
$("#user_name").on("keyup", function(){
$("#user_name").val($.trim($("#user_name").val()));
});
答案 15 :(得分：0)
使用规范化器，请检查以下示例
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
$("#myform").validate({
rules: {
field: {
required: true,
normalizer: function(value) {
// Trim the value of the `field` element before
// validating. this trims only the value passed
// to the attached validators, not the value of
// the element itself.
return $.trim(value);
}
}
}
});
</script>