validate - jquery validation rules




jquery.validate插件-如何在表單驗證之前修剪值 (10)

下載validator.js時,有一個名為additional-methods.js的文件,其中包含方法“nowhitespace”和“lettersonly”,它將刪除字段中的任何空白區域。

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

我正在使用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>

問題是一些用戶感到困惑,因為他們意外地在他們的電子郵件地址中輸入了一些空格,例如“[email protected]”。 表單將不會提交並顯示錯誤消息:“請輸入有效的電子郵件地址。”。 非技術用戶不知道如何發現空白,可能只是退出網站而不是試圖弄清楚他們做錯了什麼。

無論如何,我希望我可以在驗證之前鏈接“ jQuery.trim(value) ”,這樣就刪除了空白並且驗證錯誤永遠不會發生?

我可以使用addMethod來構建我自己的電子郵件驗證功能。 但我確信有一個更優雅的解決方案?


作為參考,在我找到更優雅的解決方案之前,我正在使用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


在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


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

您可以在檢查表單之前運行代碼,如下所示:

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。 如果需要,您可以使用它來修剪值。


我喜歡xuser( https://.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)
 });

我發現其中大部分並不是我們所需要的。

使用以下內容僅觸發表單更改而不是按鍵,允許您仍然檢查其餘驗證的鍵擊。

它不像在插件中包含它那麼整潔,但它是一個可接受的妥協。

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

添加一個新的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.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可以作為屬性添加到選項中。


這對我有用:

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




jquery-validate