規(guī)則 | 描述 |
---|---|
required:true | 必須輸入的字段。 |
remote:"check.php" | 使用 ajax 方法調(diào)用 check.php 驗證輸入值。 |
email:true | 必須輸入正確格式的電子郵件。 |
url:true | 必須輸入正確格式的網(wǎng)址。 |
date:true | 必須輸入正確格式的日期。日期校驗 ie6 出錯,慎用。 |
dateISO:true | 必須輸入正確格式的日期(ISO),例如:2009-06-23,1998/01/22。只驗證格式,不驗證有效性。 |
number:true | 必須輸入合法的數(shù)字(負(fù)數(shù),小數(shù))。 |
digits:true | 必須輸入整數(shù)。 |
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: "請選擇兩個主題" } });用其他方式替代默認(rèn)的 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 }); });更改錯誤信息顯示的位置
默認(rèn)情況是:把錯誤信息放在驗證的元素后面
參數(shù) | 類型 | 描述 | 默認(rèn)值 |
---|---|---|---|
errorClass | String | 指定錯誤提示的 css 類名,可以自定義錯誤提示的樣式。 | "error" |
errorElement | String | 用什么標(biāo)簽標(biāo)記錯誤,默認(rèn)是 label,可以改成 em。 | "label" |
errorContainer | Selector | 顯示或者隱藏驗證信息,可以自動實現(xiàn)有錯誤信息出現(xiàn)時把容器屬性變?yōu)轱@示,無錯誤時隱藏,用處不大。 | |
errorLabelContainer | Selector | 把錯誤信息統(tǒng)一放在一個容器里面。 | |
wrapper | String | 用什么標(biāo)簽再把上邊的 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", //數(shù)據(jù)發(fā)送方式 dataType: "json", //接受數(shù)據(jù)格式 data: { //要傳遞的數(shù)據(jù) companyname: function() { return $("#companyname").val(); } } }
@ResponseBody @RequestMapping(value = "/open/check", method = RequestMethod.POST) public boolean check(HttpServletRequest httpRequest) { return false; }
添加自定義校驗服務(wù)端就直接返回boolean值,如果不通過則返回false,反之返回true
addMethod:name, method, message
參數(shù) name 是添加的方法的名字。
參數(shù) method 是一個函數(shù),接收三個參數(shù) (value,element,param) 。
value 是元素的值,element 是元素本身,param 是參數(shù)。
// 中文字兩個字節(jié) 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}個字節(jié)之間(一個中文字算2個字節(jié))")); // 郵政編碼驗證 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 的第一個參數(shù),是添加的驗證方法的名字,這時是 af。
addMethod 的第三個參數(shù),是自定義的錯誤提示,這里的提示為:"必須是一個字母,且a-f"。
addMethod 的第二個參數(shù),是一個函數(shù),這個比較重要,決定了用這個驗證方法時的寫法。
如果只有一個參數(shù),直接寫,比如 af:"a",那么 a 就是這個唯一的參數(shù),如果多個參數(shù),則寫在 [] 里,用逗號分開。
名稱 | 返回類型 | 描述 |
---|---|---|
validate(options) | Validator | 驗證所選的 FORM。 |
valid() | Boolean | 檢查是否驗證通過。 |
rules() | Options | 返回元素的驗證規(guī)則。 |
rules("add",rules) | Options | 增加驗證規(guī)則。 |
rules("remove",rules) | Options | 刪除驗證規(guī)則。 |
removeAttrs(attributes) | Options | 刪除特殊屬性并且返回它們。 |
##### Validator
名稱 | 返回類型 | 描述 |
---|---|---|
form() | Boolean | 驗證 form 返回成功還是失敗。 |
element(element) | Boolean | 驗證單個元素是成功還是失敗。 |
resetForm() | undefined | 把前面驗證的 FORM 恢復(fù)到驗證前原來的狀態(tài)。 |
showErrors(errors) | undefined | 顯示特定的錯誤信息。 |
Validator 函數(shù) | ||
setDefaults(defaults) | undefined | 改變默認(rèn)的設(shè)置。 |
addMethod(name,method,message) | undefined | 添加一個新的驗證方法。必須包括一個獨一無二的名字,一個 JAVASCRIPT 的方法和一個默認(rèn)的信息。 |
addClassRules(name,rules) | undefined | 增加組合驗證類型,在一個類里面用多種驗證方法時比較有用。 |
addClassRules(rules) | undefined | 增加組合驗證類型,在一個類里面用多種驗證方法時比較有用。這個是同時加多個驗證方法。 |
onsubmit、onfocusout、onkeyup、onclick、focusInvalid默認(rèn)的時候都是true,focusCleanup默認(rèn)為false
$(".selector").validate({ onsubmit:false })
更多內(nèi)容可以關(guān)注微信公眾號,或者訪問AppZone網(wǎng)站
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/79829.html
規(guī)則 描述 required:true 必須輸入的字段。 remote:check.php 使用 ajax 方法調(diào)用 check.php 驗證輸入值。 email:true 必須輸入正確格式的電子郵件。 url:true 必須輸入正確格式的網(wǎng)址。 date:true 必須輸入正確格式的日期。日期校驗 ie6 出錯,慎用。 dateISO:true 必須輸入正確格式的日期(...
摘要:好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標(biāo)簽放在結(jié)束標(biāo)簽之后結(jié)束標(biāo)簽之前的差別什么是響應(yīng)式設(shè)計怎樣進(jìn)行 書籍 《JavaScriptDOM編程藝術(shù)》《JavaScript高級程序設(shè)計》《JavaScript框架設(shè)計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹(修訂版)》《JavaScript設(shè)計模式》《J...
摘要:好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標(biāo)簽放在結(jié)束標(biāo)簽之后結(jié)束標(biāo)簽之前的差別什么是響應(yīng)式設(shè)計怎樣進(jìn)行 書籍 《JavaScriptDOM編程藝術(shù)》《JavaScript高級程序設(shè)計》《JavaScript框架設(shè)計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹(修訂版)》《JavaScript設(shè)計模式》《J...
摘要:好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標(biāo)簽放在結(jié)束標(biāo)簽之后結(jié)束標(biāo)簽之前的差別什么是響應(yīng)式設(shè)計怎樣進(jìn)行 書籍 《JavaScriptDOM編程藝術(shù)》《JavaScript高級程序設(shè)計》《JavaScript框架設(shè)計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹(修訂版)》《JavaScript設(shè)計模式》《J...
1.前言 上篇文章,主要介紹了重構(gòu)的一些概念和一些簡單的實例。這一次,詳細(xì)的說下項目中的一個重構(gòu)場景--給API設(shè)計擴展機制。目的就是為了方便以后能靈活應(yīng)對需求的改變。當(dāng)然了,是否需要設(shè)計擴展性這個要看API的需求。如果大家有什么建議,歡迎評論留言。 2.擴展性表現(xiàn)形式 2-1.prototype 這個可以說是JS里面最原的一個擴展。比如原生JS沒有提供打亂數(shù)組順序的API,但是開發(fā)者又想方便使用...
閱讀 2839·2021-11-24 09:39
閱讀 4138·2021-10-27 14:19
閱讀 2056·2021-08-12 13:25
閱讀 2346·2019-08-29 17:07
閱讀 1122·2019-08-29 13:44
閱讀 1074·2019-08-26 12:17
閱讀 470·2019-08-23 17:16
閱讀 2057·2019-08-23 16:46