代码之家 › 专栏 › 技术社区 › Tom

jquery.validate插件-如何在表单验证之前修剪值

jquery-validate jquery

Tom · 技术社区 · 16 年前

以下是验证电子邮件地址的表单的简化但有效的示例:

<!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 建立我自己的电子邮件验证功能。但我肯定有更优雅的解决方案?

15 回复 | 直到 9 年前

Mario Menger 14 年前

我成功地做到了这一点。

而不是:

Email: { required: true, email: true }

我这样做:

Email: {
    required: {
        depends:function(){
            $(this).val($.trim($(this).val()));
            return true;
        }
    },
    email: true
}

james_bond 9 年前

这个代码对我有用。我没怎么用,所以可能会有bug。

(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和validation,我建议将 el.val($.trim(el.val())); if(el.prop('type') != 'select-multiple'){el.val($.trim(el.val()));} . 这样,jquery验证将按预期进行,并允许您选择多个项。

tmorell 14 年前

由于默认情况下我希望所有表单都有这种行为,所以我决定修改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);
    }
}

我确实希望在密码的结尾和行乞处留有空格。

Community Mohan Dere 9 年前

我喜欢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)
 });

jeremyzilar 14 年前

下载validator.js时,有一个名为additional-methods.js的文件,其中包含方法“nowhitespace”和“lettersonly”,该方法将删除字段中的所有空白。

rules: {
  user_name: {
    required: true,
    minlength: 3,
    nowhitespace: true
  }
}

Tom 16 年前

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 在服务器端,然后插入数据库。

Tim Hutchison 9 年前

添加新的jQuery验证程序方法 requiredNotBlank 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');

Craig Wohlfeil 7 年前

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;
            }
        }
    }
});

RyanCodes 13 年前

从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.");

user3830900 12 年前

这对我来说很有用:

$(':input').change(function() {
    $(this).val($(this).val().trim());
});

Psytronic 16 年前

不能将修剪绑定到模糊事件吗?类似于。。。

$("#cemail").blur(function(){
  $(this).val(jQuery.trim($(this).val());
});

adiga 6 年前

使用规范化器,请检查下面的示例

<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>

lededje 12 年前

我发现其中大部分都不是所需要的。

使用以下命令仅在表单更改时触发,而不是在按下键时触发,这允许您在剩余的验证过程中仍然检查键笔划。

它不像在插件中包含它那样整洁,但这是一个可以接受的折衷方案。

$('body').on 'change', 'form input[type=text], form input[type=email]',  ->
    $(@).val $.trim($(@).val())

Amul 9 年前

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)

mpen 10 年前

您可以在检查表单之前运行代码,如下所示:

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);
};

-1

Adrian P. 9 年前

为什么不这样做呢?

$("#user_name").on("keyup", function(){
    $("#user_name").val($.trim($("#user_name").val()));
});