規則 | 描述 |
---|---|
required:true | 必須輸入的字段。 |
remote:"check.php" | 使用 ajax 方法調用 check.php 驗證輸入值。 |
email:true | 必須輸入正確格式的電子郵件。 |
url:true | 必須輸入正確格式的網址。 |
date:true | 必須輸入正確格式的日期。日期校驗 ie6 出錯,慎用。 |
dateISO:true | 必須輸入正確格式的日期(ISO),例如:2009-06-23,1998/01/22。只驗證格式,不驗證有效性。 |
number:true | 必須輸入合法的數字(負數,小數)。 |
digits:true | 必須輸入整數。 |
creditcard:true | 必須輸入合法的信用卡號。 |
equalTo:"#field" | 輸入值必須和 #field 相同。 |
accept: | 輸入擁有合法后綴名的字符串(上傳文件的后綴)。 |
maxlength:5 | 輸入長度最多是 5 的字符串(漢字算一個字符)。 |
minlength:10 | 輸入長度最小是 10 的字符串(漢字算一個字符)。 |
rangelength:[5,10] | 輸入長度必須介于 5 和 10 之間的字符串(漢字算一個字符)。 |
range:[5,10] | 輸入值必須介于 5 和 10 之間。 |
max:5 | 輸入值不能大于 5。 |
min:10 | 輸入值不能小于 10。 |
$().ready(function() { // 在鍵盤按下并釋放及提交后驗證提交表單 $("#signupForm").validate({ rules: { firstname: "required", lastname: "required", username: { required: true, minlength: 2 }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true }, topic: { required: "#newsletter:checked", minlength: 2 }, agree: "required" }, messages: { firstname: "請輸入您的名字", lastname: "請輸入您的姓氏", username: { required: "請輸入用戶名", minlength: "用戶名必需由兩個字母組成" }, password: { required: "請輸入密碼", minlength: "密碼長度不能小于 5 個字母" }, confirm_password: { required: "請輸入密碼", minlength: "密碼長度不能小于 5 個字母", equalTo: "兩次密碼輸入不一致" }, email: "請輸入一個正確的郵箱", agree: "請接受我們的聲明", topic: "請選擇兩個主題" } });用其他方式替代默認的 SUBMIT
$().ready(function() { $("#signupForm").validate({ submitHandler:function(form){ alert("提交事件!"); form.submit(); } }); });
$("#btnSubmit").click(function(){ if ($("#frmAddVisit").valid() == true) { submitInfo(); } });
$(".selector").validate({ submitHandler: function(form) { $(form).ajaxSubmit(); } })debug,只驗證不提交表單
$().ready(function() { $("#signupForm").validate({ debug:true }); });更改錯誤信息顯示的位置
默認情況是:把錯誤信息放在驗證的元素后面
參數 | 類型 | 描述 | 默認值 |
---|---|---|---|
errorClass | String | 指定錯誤提示的 css 類名,可以自定義錯誤提示的樣式。 | "error" |
errorElement | String | 用什么標簽標記錯誤,默認是 label,可以改成 em。 | "label" |
errorContainer | Selector | 顯示或者隱藏驗證信息,可以自動實現有錯誤信息出現時把容器屬性變為顯示,無錯誤時隱藏,用處不大。 | |
errorLabelContainer | Selector | 把錯誤信息統一放在一個容器里面。 | |
wrapper | String | 用什么標簽再把上邊的 errorELement 包起來。 |
$.validator.setDefaults({ submitHandler: function() { alert("提交事件!"); } }); $().ready(function() { // 提交時驗證表單 var validator = $("#form1").validate({ errorPlacement: function(error, element) { // Append error within linked label $( element ) .closest( "form" ) .find( "label[for="" + element.attr( "id" ) + ""]" ) .append( error ); }, errorElement: "span", messages: { user: { required: " (必需字段)", minlength: " (不能少于 3 個字母)" }, password: { required: " (必需字段)", minlength: " (字母不能少于 5 個且不能大于 12 個)", maxlength: " (字母不能少于 5 個且不能大于 12 個)" } } }); $(".cancel").click(function() { validator.resetForm(); }); });異步驗證
remote:{ url: site_path + "/open/check?d=" + Math.random(), //后臺處理程序 type: "post", //數據發送方式 dataType: "json", //接受數據格式 data: { //要傳遞的數據 companyname: function() { return $("#companyname").val(); } } }
@ResponseBody @RequestMapping(value = "/open/check", method = RequestMethod.POST) public boolean check(HttpServletRequest httpRequest) { return false; }
添加自定義校驗服務端就直接返回boolean值,如果不通過則返回false,反之返回true
addMethod:name, method, message
參數 name 是添加的方法的名字。
參數 method 是一個函數,接收三個參數 (value,element,param) 。
value 是元素的值,element 是元素本身,param 是參數。
// 中文字兩個字節 jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { var length = value.length; for(var i = 0; i < value.length; i++){ if(value.charCodeAt(i) > 127){ length++; } } return this.optional(element) || ( length >= param[0] && length <= param[1] ); }, $.validator.format("請確保輸入的值在{0}-{1}個字節之間(一個中文字算2個字節)")); // 郵政編碼驗證 jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "請正確填寫您的郵政編碼");
要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建議一般寫在 additional-methods.js 文件中。
$.validator.addMethod("af",function(value,element,params){ if(value.length>1){ return false; } if(value>=params[0] && value<=params[1]){ return true; }else{ return false; } },"必須是一個字母,且a-f");
username:{ af:["a","f"] }
jQuery.validate 中文 APIaddMethod 的第一個參數,是添加的驗證方法的名字,這時是 af。
addMethod 的第三個參數,是自定義的錯誤提示,這里的提示為:"必須是一個字母,且a-f"。
addMethod 的第二個參數,是一個函數,這個比較重要,決定了用這個驗證方法時的寫法。
如果只有一個參數,直接寫,比如 af:"a",那么 a 就是這個唯一的參數,如果多個參數,則寫在 [] 里,用逗號分開。
名稱 | 返回類型 | 描述 |
---|---|---|
validate(options) | Validator | 驗證所選的 FORM。 |
valid() | Boolean | 檢查是否驗證通過。 |
rules() | Options | 返回元素的驗證規則。 |
rules("add",rules) | Options | 增加驗證規則。 |
rules("remove",rules) | Options | 刪除驗證規則。 |
removeAttrs(attributes) | Options | 刪除特殊屬性并且返回它們。 |
##### Validator
名稱 | 返回類型 | 描述 |
---|---|---|
form() | Boolean | 驗證 form 返回成功還是失敗。 |
element(element) | Boolean | 驗證單個元素是成功還是失敗。 |
resetForm() | undefined | 把前面驗證的 FORM 恢復到驗證前原來的狀態。 |
showErrors(errors) | undefined | 顯示特定的錯誤信息。 |
Validator 函數 | ||
setDefaults(defaults) | undefined | 改變默認的設置。 |
addMethod(name,method,message) | undefined | 添加一個新的驗證方法。必須包括一個獨一無二的名字,一個 JAVASCRIPT 的方法和一個默認的信息。 |
addClassRules(name,rules) | undefined | 增加組合驗證類型,在一個類里面用多種驗證方法時比較有用。 |
addClassRules(rules) | undefined | 增加組合驗證類型,在一個類里面用多種驗證方法時比較有用。這個是同時加多個驗證方法。 |
onsubmit、onfocusout、onkeyup、onclick、focusInvalid默認的時候都是true,focusCleanup默認為false
$(".selector").validate({ onsubmit:false })
更多內容可以關注微信公眾號,或者訪問AppZone網站
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/49887.html
規則 描述 required:true 必須輸入的字段。 remote:check.php 使用 ajax 方法調用 check.php 驗證輸入值。 email:true 必須輸入正確格式的電子郵件。 url:true 必須輸入正確格式的網址。 date:true 必須輸入正確格式的日期。日期校驗 ie6 出錯,慎用。 dateISO:true 必須輸入正確格式的日期(...
摘要:好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優雅地使用把標簽放在結束標簽之后結束標簽之前的差別什么是響應式設計怎樣進行 書籍 《JavaScriptDOM編程藝術》《JavaScript高級程序設計》《JavaScript框架設計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹(修訂版)》《JavaScript設計模式》《J...
摘要:好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優雅地使用把標簽放在結束標簽之后結束標簽之前的差別什么是響應式設計怎樣進行 書籍 《JavaScriptDOM編程藝術》《JavaScript高級程序設計》《JavaScript框架設計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹(修訂版)》《JavaScript設計模式》《J...
摘要:好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優雅地使用把標簽放在結束標簽之后結束標簽之前的差別什么是響應式設計怎樣進行 書籍 《JavaScriptDOM編程藝術》《JavaScript高級程序設計》《JavaScript框架設計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹(修訂版)》《JavaScript設計模式》《J...
1.前言 上篇文章,主要介紹了重構的一些概念和一些簡單的實例。這一次,詳細的說下項目中的一個重構場景--給API設計擴展機制。目的就是為了方便以后能靈活應對需求的改變。當然了,是否需要設計擴展性這個要看API的需求。如果大家有什么建議,歡迎評論留言。 2.擴展性表現形式 2-1.prototype 這個可以說是JS里面最原的一個擴展。比如原生JS沒有提供打亂數組順序的API,但是開發者又想方便使用...
閱讀 2056·2021-11-22 13:52
閱讀 980·2021-11-17 09:33
閱讀 2710·2021-09-01 10:49
閱讀 2846·2019-08-30 15:53
閱讀 2662·2019-08-29 16:10
閱讀 2436·2019-08-29 11:31
閱讀 1354·2019-08-26 11:40
閱讀 1867·2019-08-26 10:59