你自己設置驗證規(guī)則,然后把驗證規(guī)則放在一個函數里面,添加一個自定義驗證方法名就行了。例如:
創(chuàng)新互聯專注于企業(yè)全網營銷推廣、網站重做改版、大祥網站定制設計、自適應品牌網站建設、HTML5、商城網站建設、集團公司官網建設、外貿網站制作、高端網站制作、響應式網頁設計等建站業(yè)務,價格優(yōu)惠性價比高,為大祥等各大城市提供網站開發(fā)制作服務。
jQuery.validator.addMethod("idCardValidate", function(value, element) {
return this.optional(element) || idCardValidate(value);
}, "請正確輸入您的身份證號碼");
“idCardValidate”這就是jquery validate自定義驗證的方法名;
idCardValidate(value)這個就是你驗證規(guī)定的函數,函數返回true或者false
jquery validate自定義驗證需要實現以下方法:
jQuery.validator.addMethod("驗證名", function(value, element) {驗證規(guī)則}
回調方法自帶的兩個參數分別為對應控件的value值和該控件的dom元素。
具體實現參考下面的例子:
//檢測手機號是否正確??
jQuery.validator.addMethod("isMobile",?function(value,?element)?{?
var?length?=?value.length;??
var?regPhone?=?/^1([3578]\d|4[57])\d{8}$/;??
return?this.optional(element)?||?(?length?==?11??regPhone.test(?value?)?);????
},?"請正確填寫您的手機號碼");
自定義驗證規(guī)則的使用和默認規(guī)則是一樣的:
rules:{
name:{
required:true,
minlength:2,
maxlength:10
},
tel:{
required:true,
minlength:7,
maxlength:11,
isMobile:true
}
}
一、使用Jquery.Validate進行驗證方法
$(document).ready(function () {
$("#pageForm").validate({
rules: {
DictKey: { required: true, maxlength: 10 },
DictContent: { required: true, maxlength: 10 }
},
messages: {
DictKey: { required: "不能為空", maxlength: jQuery.format("不能超過{0}個字符") },
DictContent: { required: "不能為空", maxlength: jQuery.format("不能超過{0}個字符") }
},
submitHandler: function (form) {
form.submit();
}
})
})
DictKey ,DictContent:指需要驗證的控件ID
submitHandler :指通過驗證后運行的函數,里面寫入表單要提交的函數,否則表單不會提交
二、列出常用默認驗證規(guī)則
(1)required:true 必輸字段
(2)email:true 必須輸入正確格式的電子郵件
(3)url:true 必須輸入正確格式的網址
(4)date:true 必須輸入正確格式的日期
(5)dateISO:true 必須輸入正確格式的日期(ISO),例如:2009-06-23,1998/01/22 只驗證格式,不驗證有效性
(6)number:true 必須輸入合法的數字(負數,小數)
(7)digits:true 必須輸入整數
(8)creditcard: 必須輸入合法的信用卡號
(9)equalTo:"#field" 輸入值必須和#field相同
(10)accept: 輸入擁有合法后綴名的字符串(上傳文件的后綴)
(11)maxlength:5 輸入長度最多是5的字符串(漢字算一個字符)
(12)minlength:10 輸入長度最小是10的字符串(漢字算一個字符)
(13)rangelength:[5,10] 輸入長度必須介于 5 和 10 之間的字符串")(漢字算一個字符)
(14) equalLength:10 輸入長度必須是10
(14)range:[5,10] 輸入值必須介于 5 和 10 之間
(15)max:5 輸入值不能大于5
(16)min:10 輸入值不能小于10
三、使用ajax方法驗證輸入值是否存在
當文本框輸入值時,或改變輸入值時會自動到Server去驗證輸入值是否在數據庫中存在
JS代碼如下:
DictKey: { required: true, maxlength: 10,
remote: { //驗證用戶名是否存在
type: "POST",
url: '@Url.Content("~/Account/Test/")' //servlet
}
},
DictKey: { required: "不能為空", maxlength: jQuery.format("不能超過{0}個字符"),remote:"用戶名已被注冊"},
Server端:
[HttpPost]
public JsonResult Test(string DictKey) //DictKey即要驗證控件的ID值
{
bool result;
if (DictKey == "a")
{
result = true;
}
else
{
result = false;
}
return Json(result);
}
根據Server端返回的True,False來決定驗證是否通過
四、非submit按鈕結合Jquery.Form進行提交
如果不是submit提交按鈕,比如單擊某個按鈕觸發(fā)表單驗證,這時表單驗證可用如下方式
function validateForm() {
//validate方法參數可選
return $("#form1").validate({
rules: {
},
messages:{
}
}).form();
}
function doSubmit(){
//do other things
//驗證通過后提交
if(validateForm()){
form.submit()
//這邊可以結合Jquery.Form進行AjaxSubmit方式異步提交
$("#UpdateForm").AjaxSubmit (function(){
Alert(“AjaxForm提交完成”)
});
}
}
用 button.click提交。
舉例如下:
$("#form").validate();
$("#btn).click(function(){
if($("#form").valid()){
$("#form").submit();
}
});
jQuery Validate 插件為表單提供了強大的驗證功能,讓客戶端表單驗證變得更簡單,同時提供了大量的定制選項,滿足應用程序各種需求。
該插件捆綁了一套有用的驗證方法,包括 URL 和電子郵件驗證,同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認使用英語作為錯誤信息,且已翻譯成其他 37 種語言。
擴展資料
query-validate 插件
基本用法:
1、頁面中引入js依賴,因為validate是依賴jquery的需要先引入jquery。
2、表單校驗,首先得有一個表單,即form標簽,然后由于瀏覽器是通過name屬性來提交表單數據的,所以需要給校驗的控件都加上name屬性。
rules里每個控件可以給多個驗證方式,常用的有:
1、required 必填驗證元素。
2、minlength(length) maxlength(length)。
3、rangelength(range)設置最小長度、最大長度和長度范圍 [min,max]。
4、min(value) max(value) range(range) 設置最大值、最小值和值的范圍。
5、email() 驗證電子郵箱格式。