jquery.validate插件 - 如何在表單驗證前修改值

我使用JörnZaefferer的優秀jquery.validation plugin，我想知道是否有一種簡單的方法在驗證之前自動修剪表單元素？jquery.validate插件 - 如何在表單驗證前修改值

以下是減少，但工作這驗證電子郵件地址的形式的例子：

<!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來構建我自己的電子郵件驗證功能。但我相信有更優雅的解決方案？

來源

2009-12-01 Tom

大問題。 Jörn說他會修正這個插件本身的一部分。但那是大約一年前。我可以確認一個字段末尾的空格對我來說無效。我正在使用版本1.5.5。（Jorn的文章：http：//www.mail-archive.com/[email protected]/msg55651.html） – 2009-12-01 17:15:35

閱讀這個問題和所有的答案讓我感覺好像HTML是如此的糟糕。 – g33kz0r 2013-06-13 15:23:17

我成功地做到了這一點。

相反的：

Email: { required: true, email: true }

我這樣做：

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

來源

2011-06-24 18:11:18 MDP

這種方法的優點在於服務器端也收到了清除（修剪）的值。但如果您有許多具有相似要求的經過驗證的表單，那麼添加該表就會非常費勁。這就是爲什麼我將這與@hwiechers的答案結合在一起的原因:) – 2012-03-27 16:20:10

...在使用這種方法時，警告可能很有用：「前導和尾隨空格無效並被修剪。」尤其對於想要使用帶有前導/尾隨空格的密碼的用戶。他們將無法登錄，因爲記錄的密碼與他們預期的密碼不同。 – 2012-03-27 16:26:13

+11

對於我在使用此相當長時間後發現的問題的警告：如果表單在字段無效時提交，那麼事後輸入合法空間（例如名稱和姓氏之間的空間）會變得尤爲困難。對於較慢的打字機：http://jsfiddle.net/halilim/ftwqg設置'onkeyup：false'來防止這種情況。 – 2013-03-28 21:03:00

您不能將修剪綁定到模糊事件嗎？喜歡的東西...

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

來源

2009-12-01 21:55:55 Psytronic

感謝您的建議 - 我嘗試了，但不幸的是，事件觸發的順序是隨機的，並且經常在修整之前進行驗證 - 所以用戶得到錯誤並且糾正了其輸入，因此可能變得更加困惑。 – Tom 2009-12-01 22:11:55

將它更改爲.change（）如何？驗證何時被觸發？它不是通常在表單提交？ – Psytronic 2009-12-02 09:01:41

我認爲會的。我嘗試添加$（'＃cemail'）。bind（'change'，function（e）{$（this）.val（$。trim（$（this）.val（）））;}）;在jQuery庫之後，但在驗證插件似乎工作之前 – robnardo 2014-01-30 20:22:13

僅供參考，直到我找到一個更好的解決方案，我用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。

來源

2009-12-02 08:52:26 Tom

此代碼適用於我。我沒有使用太多，所以可能有錯誤。

它包裝每個方法並修剪第一個是值的元素。

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

如果你使用選擇2和驗證的同時，我建議把el.val($.trim(el.val()));的IF像這裏面：if(el.prop('type') != 'select-multiple'){el.val($.trim(el.val()));}。這樣，你的jQuery驗證將按預期行事，並且它可以讓你選擇多個項目。

來源

2011-02-01 19:06:13 hwiechers

非常有用，因爲所有表單中的所有方法都可以修改一次。結合上面的（接受的）答案，用'var el = $（arguments [1]）替換'arguments [0] = $ .trim（arguments [0]）;'; el.val（$。trim（el.val（）））;'（兩行）。 – 2012-03-27 16:21:57

使用此相當一段時間後的說明：請參閱[我的警告評論]（http://stackoverflow.com/questions/1827483/jquery-validate-plugin-how-to-trim-values-before-form-validation/ 6472021＃comment22281032_6472021）在[接受的答案]（http://stackoverflow.com/a/6472021/372654）下，當您對所有字段應用修剪時尤其如此。 – 2013-03-28 21:04:49

這對我今天的驗證非常有幫助。無法告訴你這對我有多大幫助，但我很高興它在webz中爲我所見。謝謝！ – PKD 2015-02-10 22:37:17

因爲我想在我的所有形式的默認這種行爲，我決定修改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可以作爲屬性添加到選項中。

來源

2012-05-02 01:28:47 tmorell

下載validator.js時，會有一個名爲additional-methods.js的文件，其中包含方法「nowhitespace」和「lettersonly」，它們將刪除字段中的任何空白。

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

來源

2012-06-09 03:06:32 jeremyzilar

我正在尋找實施，它似乎並沒有剝奪任何東西。它只是不允許任何空格（包括字母之間）。 – mpen 2014-12-05 18:04:34

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

來源

2012-09-03 21:27:24 mark

這裏最好的解決方案;如果您將其設置爲默認值，它會更好：https://gist.github.com/mnbayazit/b4595fafcbee4f3a7c25 – mpen 2014-12-05 18:12:07

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

來源

2013-04-11 18:12:53 RyanCodes

我發現其中大部分都不是很需要。

使用以下僅在表單更改上觸發而不是按下鍵時，您仍然可以檢查其餘驗證的關鍵行程。

它不像插入插件那樣整潔，但它是一個可接受的妥協。

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

來源

2013-12-13 10:59:09 lededje

這對我來說是什麼在起作用：

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

來源

2014-07-11 20:40:41 user3830900

請解釋而不是隻發佈一段代碼。 – 2014-07-11 21:05:46

這不允許單詞之間的空格。 – philippinedev 2016-09-10 06:12:32

您可以運行代碼的形式進行檢查之前是這樣的：

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。如果你願意，你可以用它來修改值。

來源

2016-03-16 20:45:41 mpen

爲什麼不這樣做？

驗證發生在keyup事件之後。在KEYUP其修整值替換文本框的值（或使用正則表達式，以消除任何空間）：

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

來源

2016-09-07 16:16:38

添加一個新的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');

來源

2017-06-02 15:31:44 sevencardz

在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（值）。長度

來源

2017-06-28 06:07:24 Amul

jquery.validate插件 - 如何在表單驗證前修改值

回答

相關問題