當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jquery 表单验证插件

發(fā)布時(shí)間：2023/12/18 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 jquery 表单验证插件小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

其他：

First name: <input type="text" name="FirstName" value="Bill" /><br />

Last name: <input type="text" name="LastName" value="Gates" /><br />
secret: <input type="text" name="secret" value="Yousecret" /><br />

</form>

$("form").serialize(); //FirstName=Bill&LastName=Gates

一般用法：

$.ajax({

type: 'post',

url: 'your url',

data: $("form").serialize(),

success: function(data) {

// your code

}

});

serializeArray()讀取form表單中的所有數(shù)據(jù)列表

var siginList = $('form').serializeArray();

<div contenteditable="true">我是一個(gè)可被編輯的DIV</div>

一.jqeuryvalidate

二.nice-validate

更多>>>

官方文檔

參數(shù)選項(xiàng)

$("form").validator({

debug :0, //調(diào)試

//0：關(guān)閉實(shí)時(shí)驗(yàn)證，只在提交表單的時(shí)候執(zhí)行驗(yàn)證

//1：輸入框失去焦點(diǎn)（focusout）時(shí)執(zhí)行驗(yàn)證

//2：輸入框改變值（input）時(shí)執(zhí)行驗(yàn)證

//3：輸入框失去焦點(diǎn)和改變值（綜合 1 + 2） (v0.8.0+)

//8：同 2，并且詳細(xì)提示每個(gè)規(guī)則的結(jié)果 (v0.9.0+)

//9：同 3，并且詳細(xì)提示每個(gè)規(guī)則的結(jié)果 (v0.9.0+)

//大于 100 的數(shù)值：驗(yàn)證延遲時(shí)間

timely :1; //實(shí)時(shí)驗(yàn)證

theme :"default", //主題

stopOnError :false, //在第一次錯(cuò)誤時(shí)停止驗(yàn)證關(guān)閉此開關(guān)，以便一次性顯示所有消息

focusInvalid :true, //第一個(gè)錯(cuò)誤字段自動(dòng)獲得焦點(diǎn)

focusCleanup :false, //輸入框獲得焦點(diǎn)時(shí)清除驗(yàn)證消息

ignoreBlank :false, //不驗(yàn)證空值的字段（只針對實(shí)時(shí)驗(yàn)證）

ignore :"", // 默認(rèn)忽略驗(yàn)證 jQuery 選擇器選中的字段

ignore :':hidden', //任何不可見的元素，都不作驗(yàn)證

ignore :'#tab2', //id為tab2下的所有子元素都不作驗(yàn)證

display:'null', // 自定義消息中{0}的替換字符

display:Function(elem){ // 自定義消息中{0}的替換字符

return $(elem).closest('.form-item').children('label:eq(0)').text();

target :null, //默認(rèn) 自定義消息的顯示位置

target :'#myContainer', // 將所有消息全部提示在 id 為 myContainer 里面

target:Function(elem){// 自己指定消息容器位置

var $formitem = $(elem).closest('.form-item'),

$msgbox = $formitem.find('span.msg-box');

if (!$msgbox.length) {

$msgbox = $('<span class="msg-box"></span>').appendTo($formitem);

}

return $msgbox;

valid:null,// 默認(rèn) 表單驗(yàn)證通過時(shí)調(diào)用此函數(shù)

invalid: function(form){//表單驗(yàn)證通過時(shí)調(diào)用此函數(shù)

// 表單驗(yàn)證通過，提交表單

$.post(url, $(form).serialize() ).done(function(d){

// some code

});

invalid:null,//表單驗(yàn)證失敗后的回調(diào)。也可以使用 invalid.form 事件

invalid:function(){

//$('#form').on('invalid.form', function(e, form, errors){});

validation:null,//驗(yàn)證每個(gè)字段后調(diào)用此函數(shù)

validation: function(element, result){

$("#submitBtn").prop('disabled', !element.form.isValid)

rules:null,//自定義規(guī)則

rules: {//自定義用于當(dāng)前實(shí)例的規(guī)則，支持兩種定義方式

// 自定義驗(yàn)證函數(shù)，具有最大的靈活性

myRule: function(el, param, field){

//驗(yàn)證并返回布爾值

// 簡單配置正則及錯(cuò)誤消息

another: [/^\w*$/, 'Please enter the letters or underscore.']

messages:null,//自定義消息

messages: {

required: "不能為空",

email: "請?zhí)顚懻_的郵件地址",

myRule:"自定義規(guī)則的提示消息"

fields:null,//配置字段規(guī)則及參數(shù)

fields: {

//為input[name=foo]調(diào)用前面定義的兩個(gè)規(guī)則

foo: 'required; myRule[param]; another',

username: {

//字段規(guī)則

rule: "姓名: required; myRule; rule2; rule3",

//(自定義字段中?)每個(gè)規(guī)則的錯(cuò)誤消息

msg: {

myRule:"自定義規(guī)則的提示消息", #注意這里值為false和""則會(huì)顯示默認(rèn)的錯(cuò)誤提示

required: "請?zhí)顚懶彰?#34;,

rule2: "xxxx",

rule3: "xxxx"

//自定義獲得焦點(diǎn)時(shí)的友好提示信息

tip: "填寫真實(shí)姓名有助于朋友找到你",

//自定義字段驗(yàn)證成功后顯示的消息

ok: "{0}填寫正確", //返回姓名填寫正確

//是否啟用實(shí)時(shí)驗(yàn)證，默認(rèn)繼承

timely: false,

//驗(yàn)證當(dāng)前字段，但是實(shí)際上在 target 的元素上提示錯(cuò)誤消息

//如果目標(biāo)元素是輸入框（input，textarea、select），將會(huì)以目標(biāo)元素為基準(zhǔn)點(diǎn)，插入一條消息；

//如果目標(biāo)元素是消息占位（className 為 msg-box），這和直接使用消息占位沒有區(qū)別

//其他情況下，直接顯示在target指向的容器中

target: "#msg_holder",

//字段驗(yàn)證通過的回調(diào)

valid:function(form){},

//字段驗(yàn)證失敗的回調(diào)

valid:function(form){},

//使用 dataFilter 回調(diào)可以轉(zhuǎn)換 ajax 返回的結(jié)果為 nice-validator 支持的格式

dataFilter:function(form){},

must:true,//是否強(qiáng)制驗(yàn)證該字段

msgWrapper:"span",//自定義該字段的消息容器的標(biāo)簽名

msgMaker:"",//自定義該字段的消息生成器參數(shù)？

msgClass:"",//自定義該字段的消息Class 在.msg-box消息容器標(biāo)簽上

msgStyle:"font-size:14px;",//自定義該字段的消息 CSS 樣式綁定在.msg-box消息容器標(biāo)簽上

getValue:function(){},//自定義 value 的 getter 參數(shù)？

setValue:function(){},//自定義 value 的 setter 參數(shù)？

beforeSubmit :null,//在提交表單之前調(diào)用此函數(shù)

beforeSubmit:function(form){

//一般在提交之前修改某些form元素

dataFilter:null,//轉(zhuǎn)換服務(wù)端通過ajax返回的數(shù)據(jù)為插件支持的格式一般和remote默認(rèn)規(guī)則搭配使用

dataFilter:function(data){

//假設(shè)服務(wù)端返回結(jié)果為： {"status":600, "msg":"名字已被占用"}

if (data.status === 200) return "";

else return data.msg;

//主題相關(guān)的參數(shù)

showOk:true,//默認(rèn) 是否顯示成功提示(前提是有傳ok的消息) 返回布爾或者字符串

showOk:false,//如果設(shè)置成false在字段驗(yàn)證通過后將只是簡單的隱藏消息。

showOk:'正確',//如果傳遞一個(gè)字符串，在驗(yàn)證通過后將提示這個(gè)消息

showOk:'',//如果設(shè)置成空字符串，將只顯示一個(gè)成功的圖標(biāo)

validClass:'has-succes', //為驗(yàn)證通過的form表單添加的class名

invalidClass:"has-error",//驗(yàn)證不通過的輸入框添加的class名

bindClassTo:"#verifiable",//設(shè)置 validClass 和 invalidClass 添加到的位置

formClass:"n-default", //主題的 class 名稱，添加在 form 上

msgClass: "n-top", //消息將自動(dòng)顯示在輸入框上邊

msgClass: "n-right", //默認(rèn) 消息將自動(dòng)顯示在輸入框右邊

msgClass: "n-bottom", //消息將自動(dòng)顯示在輸入框下邊

msgClass: "n-left", //消息將自動(dòng)顯示在輸入框左邊

msgClass: "n-right myclass", //消息將自動(dòng)顯示在輸入框右邊，你還可以通過myclass來定義更多樣式

msgStyle:"margin-left:-10px; margin-top:10px;",//為消息容器自定義css

msgWrapper:"span",//消息容器的元素標(biāo)簽

msgMaker:null,//自定義消息 HTML 結(jié)構(gòu) 為false則不生成提示消息

msgMaker: function(opt){

return '<span class="'+ opt.type +'">' + opt.msg + '</span>';

/* opt包含的子屬性

? ? ? ? ? type：消息類型（可能的值為：error / ok / tip / loading）

? ? ? ? ? cls：即msgClass參數(shù)的值

? ? ? ? ? style：即msgStyle參數(shù)的值

? ? ? ? ? icon：即msgIcon參數(shù)的值

? ? ? ? ? arrow：即msgArrow參數(shù)的值

? ? ? ? ? show：即msgShow參數(shù)的值

? ? ? ? ? hide：即msgHide參數(shù)的值

以上 msgMaker 配置，將生成如下消息結(jié)構(gòu)

<span class="n-error">Please fill this field.</span>

</div>

msgIcon:"<span class="n-icon"></span>",//自定義消息圖標(biāo)的 HTML 模板

msgArrow:"", //自定義消息箭頭的 HTML 模板

msgShow:null, //消息提示之前調(diào)用此函數(shù)

msgShow:function($msgbox, type){

msgHide:null,//消息隱藏之前調(diào)用此函數(shù)

msgHide:function($msgbox, type){

}

});

消息體html結(jié)構(gòu)：

</span>

事件：

.on("validation")：描述：每次驗(yàn)證完一個(gè)字段，都會(huì)觸發(fā)?validation?事件，通過該事件可以獲取到當(dāng)前驗(yàn)證字段的驗(yàn)證結(jié)果。

$('#form').on('validation', function(e, current){

var form = this;

// form 中是否所有字段都驗(yàn)證通過

console.log(form.isValid);

// 當(dāng)前驗(yàn)證字段是否通過

console.log(current.isValid);

// 打印其他屬性

console.log(current.element);

console.log(current.value);

console.log(current.msg);

});

.on("valid.form")：在表單驗(yàn)證通過后觸發(fā)

$('#form').on('valid.form', function(e, form){

//do something...

});

.on("invalid.form")：在表單驗(yàn)證不通過后觸發(fā)

$('#form').on('invalid.form', function(e, form, errors){

//do something...

});

.on("valid.field")：在字段驗(yàn)證通過后觸發(fā)

$('#username').on('valid.field', function(e, result){

//do something...

});

.on("invalid.field")：在字段驗(yàn)證不通過后觸發(fā)

$('#username').on('invalid.field', function(e, result){

//do something...

});

.on("valid.rule")：在規(guī)則驗(yàn)證通過后觸發(fā)

$('#username').on('valid.rule', function(e, ruleName){

if (ruleName === 'remote') {

//do something...

}

});

.on("invalid.rule")：在規(guī)則驗(yàn)證不通過后觸發(fā)

$('#username').on('invalid.rule', function(e, ruleName){

if (ruleName === 'remote') {

//do something...

}

});

發(fā)布：

.trigger("validate")：手動(dòng)觸發(fā)字段執(zhí)行驗(yàn)證

觸發(fā)類型

//①$input.trigger("validate"); 手動(dòng)觸發(fā)元素進(jìn)行驗(yàn)證

//如：手動(dòng)調(diào)用username字段驗(yàn)證

$('input[name="username"]').trigger("validate");

//②$form.trigger("validate"); v0.7.0+ 手動(dòng)觸發(fā)表單進(jìn)行驗(yàn)證，驗(yàn)證通過后不會(huì)自動(dòng)提交

//如：手動(dòng)調(diào)用表單驗(yàn)證

$('#form').trigger("validate");

//③$form.trigger("submit"); 手動(dòng)觸發(fā)表單提交，在提交前會(huì)自動(dòng)驗(yàn)證

//如：手動(dòng)調(diào)用表單提交

$('#form').trigger("submit");

//④$input.trigger("showtip"); v0.5.0+ 觸發(fā)元素顯示tip消息

//手動(dòng)調(diào)用驗(yàn)證初始化完成后，立即顯示所有字段的提示

$('#form').validator().trigger("showtip");

.trigger("showmsg", [type, message])：觸發(fā)字段提示消息

// 手動(dòng)調(diào)用字段驗(yàn)證成功消息

$("#username").trigger("showmsg", ["ok", "Great name"]);

// 手動(dòng)調(diào)用input字段驗(yàn)證錯(cuò)誤消息

$("#username").trigger("showmsg", ["error", "Name is already taken"]);

// 手動(dòng)調(diào)用（input聚焦選中）友好的提示消息

$("#username").trigger("showmsg", ["tip", "Others make a good name for you impressed"]);

// 手動(dòng)調(diào)用已經(jīng)綁定的提示消息 (data-tip)

$("#username").trigger("showmsg", ["tip"]);

// 手動(dòng)調(diào)用所有提示消息

$("#form").trigger("showmsg", ["tip"]);

.trigger("hidemsg")：觸發(fā)字段隱藏消息

// 手動(dòng)調(diào)用隱藏指定字段的消息

$("#username").trigger("hidemsg");

// 手動(dòng)調(diào)用隱藏整個(gè)表單的提示消息

$("#form").trigger("hidemsg");

插件方法：

$('#form1').validator({選項(xiàng)參數(shù)})? ? ? : 根據(jù)參數(shù)初始化驗(yàn)證，驗(yàn)證 jQuery 選中的表單

$('#form1').validator(function(){})? ? : 初始化驗(yàn)證，驗(yàn)證 jQuery 選中的表單，驗(yàn)證通過后執(zhí)行回調(diào)

// 等同于 $('#form1').validator({ valid: function(){}, });

$('#form1').validator(instanceMethod, arg1, arg2...?)? ? :通過.validator()?方法調(diào)用實(shí)例方法？

// 清空表單驗(yàn)證消息

$('#form1').validator("cleanUp");

// 銷毀表單驗(yàn)證

$('#form1').validator("destroy");

$('#form1').isValid( callback )?判斷某個(gè)區(qū)域或者某個(gè)字段是否驗(yàn)證通過，如果字段中有異步 ajax 驗(yàn)證，需要通過 callback 獲取驗(yàn)證結(jié)果

// 使用回調(diào)函數(shù)獲取驗(yàn)證結(jié)果

$('#mobile').isValid(function(v){

if (v) {

// do something

}

});

// v0.10.5+ 還支持下面這種寫法，即回調(diào)不帶參數(shù)，就是驗(yàn)證通過的回調(diào)

$('#mobile').isValid(function(){

// do something

});

// 如果驗(yàn)證的字段中沒有 ajax 異步驗(yàn)證，直接獲取結(jié)果也是可以的

if ( $('#mobile').isValid() ) {

// do something

}

靜態(tài)方法

$.validator(selector, options)

// 即使 "#form1" 這個(gè)表單被動(dòng)態(tài)加載，也可以驗(yàn)證

$.validator("#form1", {

timely: 2,

stopOnError: true,

fields: {

email: "required;email",

password: "required;length(6~16)",

mobile: "required;mobile"

}

});

$.validator.config(options)：配置全局選項(xiàng)? ?建議配置在 local 配置文件（如：zh-CN.js）中

$.validator.config({

timely: 2

});

$.validator.config(

rules: {

mobile: [/^1[3-9]\d{9}$/, "請?zhí)顚懹行У氖謾C(jī)號"],

chinese: [/^[\u0391-\uFFE5]+$/, "請?zhí)顚懼形淖址?#34;]

}

);

$.validator.setTheme(name, options)：配置全局主題? ? 參考配置選項(xiàng)

$.validator.setTheme("myTheme", {

formClass: "nice-flat",

msgClass: "n-right",

timely: 2,

stopOnError: true

});

instance （實(shí)例方法）

.test(elem, rule)：驗(yàn)證字段是否符合指定的規(guī)則返回布爾

$("#myForm").validator({

rules: {

loginName: function(element) {

return /^[a-zA-Z]\w{3,}/.test(element.value)

|| this.test(element, "mobile")

|| this.test(element, "email")

|| 'Please fill user name, phone number or E-mail';

}

fields: {

username: "required; loginName",

password: "required; length(6~16)"

}

});

.setField(key, field)：動(dòng)態(tài)配置字段參數(shù)

$('form').validator("setField", "username", "required;");

// Remove the field's verification.

$('form').validator("setField", "username", null);

.setField(obj)：動(dòng)態(tài)配置字段參數(shù)

$('form').validator("setField", {

username: "required;username",

pwd: "required;password"

});

.showMsg(elem, obj)：使字段提示消息（不推薦），推薦使用.trigger("showmsg")

.hideMsg(elem)：使字段隱藏消息（不推薦），推薦使用.trigger("hidemsg")

.holdSubmit(hold)：防止表單重復(fù)提交的措施

$("#myForm").validator({

valid: function(form){

var me = this;

// Before submitting the form, hold form, to prevent duplicate submission.

me.holdSubmit();

$.ajax({

url: "xxx.php",

data: $(form).serialize(),

type: "POST",

success: function(){

// After the form is submitted successfully, release hold.

me.holdSubmit(false);

}

});

}

});

.cleanUp()：清除表單中的全部驗(yàn)證消息

$('#form1').validator('cleanUp');

.destroy()：銷毀表單驗(yàn)證實(shí)例

$('#form1').validator('destroy');

內(nèi)置規(guī)則：

required - 使字段必填?適用于 input、textarea、select(注意："：filled" 是一個(gè)jquey的選擇器擴(kuò)展，匹配填充值了的表單元素，用法和:checked、:radio、:checkbox一致)

①required

②required("input:filled" )、required(#id:checked)、required(#id:enabled)、...

③required(ruleName) 滿足規(guī)則（某個(gè)默認(rèn)規(guī)則自定義規(guī)則） ruleName 則字段必填

④required(from, class, count) ：className 為 contact 的字段至少填寫一個(gè)

eg：

<input class="contact" name="mobile" placeholder="手機(jī)號"

data-rule="required(from, .contact); mobile"

data-msg-required="請至少填寫一種聯(lián)系方式">

<input class="contact" name="tel" placeholder="電話"

data-rule="required(from, .contact); tel">

<input class="contact" name="email" placeholder="郵箱"

data-rule="required(from, .contact); email">

⑤required(not, value) 必填但排除value

checked - 必選，還可以控制選擇項(xiàng)目的數(shù)量

規(guī)則描述

checked 必選

checked(n) 必選 n 項(xiàng)

checked(n~) 至少選擇 n 項(xiàng)

checked(~n) 最多選擇 n 項(xiàng)

checked(n1~n2) 選擇 n1 到 n2 項(xiàng)

match - 當(dāng)前字段與另一個(gè)字段比較

規(guī)則描述

match(name) 當(dāng)前字段值必須和 name 字段的值匹配

match(eq, name) 同上

match(neq, name) 當(dāng)前字段值必須和 name 字段值不同

match(lt, name) 當(dāng)前字段值必須小于 name 字段值

match(gt, name) 當(dāng)前字段值必須大于 name 字段值

match(lte, name) 當(dāng)前字段值必須小于等于 name 字段值

match(gte, name) 當(dāng)前字段值必須大于等于 name 字段值

match(gte, name, date) 當(dāng)前日期值必須大于等于 name 字段日期值

match(gte, name, datetime) 當(dāng)前時(shí)間值必須大于等于 name 字段時(shí)間值

remote - 獲取服務(wù)器端驗(yàn)證的結(jié)果

remote(url)

remote(get:URL) 默認(rèn)post

remote(cors:post:/user/checkName) 強(qiáng)制跨域

<input type="text" name="username"

data-rule="required;remote({:U('User/test')})"

然后經(jīng)過user控制器test方法處理后返回

返回是字符串：返回" ":通過；不為空則將作為錯(cuò)誤信息輸出

返回json時(shí)：

// 驗(yàn)證通過

{"ok": "名字很棒"} //$msg['ok']="名字很棒";echo json_encode($msg);

// 驗(yàn)證不通過

{"error": "名字已被占用"} //$msg['error']="名字已被占用";echo json_encode($msg);

// 結(jié)果在第二級 data

{"status": 200, "data": {"error": "名字已被占用"}}

integer - 只能填寫整數(shù)

規(guī)則描述

integer 整數(shù)

integer(+) 正整數(shù)

integer(+0) 正整數(shù)和零

integer(-) 負(fù)整數(shù)

integer(-0) 負(fù)整數(shù)和零

range - 只能填寫指定范圍的數(shù)

規(guī)則描述

range(n~) 請?zhí)顚懖恍∮?n 的數(shù)

range(~n) 請?zhí)顚懖淮笥?n 的數(shù)

range(n1~n2) 請?zhí)顚?n1 到 n2 的數(shù)

range(n1~n2, false) 請?zhí)顚?n1 到 n2 的數(shù)（不包含邊界值）(v0.9.0+)

length - 字段值必須符合指定長度

規(guī)則描述

length(n) 請?zhí)顚?n 個(gè)字符

length(n~) 請至少填寫 n 個(gè)字符

length(~n) 請最多填寫 n 個(gè)字符

length(n1~n2) 請?zhí)顚?n1 到 n2 個(gè)字符

length(n~, true) 請至少填寫 n 個(gè)字符（全角字符計(jì)算雙字符）

filter - 過濾當(dāng)前字段的值，不做驗(yàn)證

規(guī)則描述

filter 過濾 <>`"' 和字符實(shí)體編碼的字符

filter(RegExp) 自定義過濾正則

驗(yàn)證方式：

例1. DOM傳參? ??DOM 綁定規(guī)則，無需 JS 代碼

1. 要驗(yàn)證一個(gè)表單，只需要給字段綁定規(guī)則“data-rule”就可以了

2. 字段可以有多條規(guī)則，規(guī)則之間用分號（;）分隔

3. js初始化不是必要的，只要是字段并且?guī)в小癲ata-rule”屬性，即使是新插入的一段DOM也可以立馬驗(yàn)證

4. 其中：required是內(nèi)置規(guī)則（核心自帶），username、password是配置文件中設(shè)置的全局規(guī)則（配置文件）

</fieldset>

</form>

<input type="text" name="username" data-rule="required;"> :提示此處不能為空

<input type="text" name="username" data-rule="用戶名:required;"> :提示用戶名不能為空

<input type="text" name="username"

data-rule="required;"

data-tip="輸入你的名字與姓氏。" 可選：聚焦提示

data-ok="名字很棒。" 可選：默認(rèn)為一個(gè)綠色的勾

data-msg-required="全名必填!" 可選：data-msg-指定的規(guī)則默認(rèn)錯(cuò)誤只顯示紅色的X

例2. js傳參（這和上面的DOM傳參等價(jià)）??JS 配置規(guī)則，無侵入 DOM

HTML

</fieldset>

</form>

Javascript

$('#demo_12').validator({

fields: {

'user[name]': 'required; username;'

,'user[pwd]': 'required; password;'

}

})

// 使用鏈接代替submit按鈕（注意：這種情況下輸入框里面的回車鍵不能觸發(fā)submit事件）

$("#xxoo").on("click", "a.submit-btn", function(e){

$(e.delegateTarget).trigger("submit");

});

例3. radio的必選

1. 對于checkbox和radio，要“必填”的話，不能使用“required”，而是使用“checked”

2. 你只需要在第一個(gè)checkbox或者radio上面綁定規(guī)則就可以了

3. 消息會(huì)自動(dòng)生成，并且顯示在最后面，你無需關(guān)注消息怎么顯示

</fieldset>

</div>

</form>

</fieldset>

</div>

</form>

控制選中項(xiàng)目數(shù)

1.?checked[2~]表示選擇的項(xiàng)目要在2項(xiàng)以上
2. 不要對:radio使用參數(shù)，因?yàn)楸旧砭褪菃芜x，直接checked就可以了

<form?id="demo_53"?action="results.php"?method="post"?autocomplete="off">

<label?class="form-label">興趣：</label>

</fieldset>

<div?class="form-submit">

<button?type="submit">提交</button>

</div>

</form>

例4. Ajax提交表單

1. 可以通過valid參數(shù)傳入回調(diào)，參見配置
2. 也可以直接接收valid.form事件（下面例子采用接收事件的方式），參見事件

HTML

<form id="demo_14" autocomplete="off"

data-validator-option="{theme:'simple_right'}"

</fieldset>

</form>

Javascript

//接收表單驗(yàn)證通過的事件

$('#demo_14').bind('valid.form', function(){

$.ajax({

url: 'results.php',

type: 'POST',

data: $(this).serialize(),

success: function(d){

$('#result_14').fadeIn(300).delay(2000).fadeOut(500);

}

});

自定義規(guī)則：

注意：自定義規(guī)則如果與內(nèi)置規(guī)則同名，則自定義規(guī)則優(yōu)先

通過 DOM 方式自定義規(guī)則（只對當(dāng)前字段有效）

通過?rules?配置規(guī)則（當(dāng)前表單實(shí)例有效）

$('#form1').validator({

rules: {

// 使用正則表達(dá)式定義規(guī)則

mobile: [/^1[3-9]\d{9}$/, "請?zhí)顚懹行У氖謾C(jī)號"],

// 使用函數(shù)定義規(guī)則

xxx: function(elem, param) {

return /^1[3458]\d{9}$/.test($(elem).val()) || '請檢查手機(jī)號格式';

}

fields: {

// 對字段 username 應(yīng)用規(guī)則 mobile

'username': 'required;mobile'

}

});

全局規(guī)則：

提交方式：

提交方式1：表單驗(yàn)證通過后自動(dòng)原生方式提交

<label>Email</label>

<label>Password</label>

</form>

提交方式2：js使用驗(yàn)證通過回調(diào)

$('#form1').validator({

valid: function(form) {

// do something

// use native submit.

form.submit();

}

});

提交方式3：綁定表單驗(yàn)證通過的事件（參考：valid.form事件）

$('#form1').on('valid.form', function(e){

// You can do something, then submit form by native

// this.submit();

// or use ajax submit

$.post("path/to/server", $(this).serialize())

.done(function(d){

// some code

});

總結(jié)

以上是生活随笔為你收集整理的jquery 表单验证插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：【XXPHP源代码】把多个JS广告代码放
下一篇： KeyError: 0 与 KeyErr

编程问答

jquery 表单验证插件

serializeArray()讀取form表單中的所有數(shù)據(jù)列表

.on("validation")：描述：每次驗(yàn)證完一個(gè)字段，都會(huì)觸發(fā)?validation?事件，通過該事件可以獲取到當(dāng)前驗(yàn)證字段的驗(yàn)證結(jié)果。

.on("valid.form")：在表單驗(yàn)證通過后觸發(fā)

.on("invalid.form")：在表單驗(yàn)證不通過后觸發(fā)

.on("valid.field")：在字段驗(yàn)證通過后觸發(fā)

.on("invalid.field")：在字段驗(yàn)證不通過后觸發(fā)

.on("valid.rule")：在規(guī)則驗(yàn)證通過后觸發(fā)

.on("invalid.rule")：在規(guī)則驗(yàn)證不通過后觸發(fā)

.trigger("validate")：手動(dòng)觸發(fā)字段執(zhí)行驗(yàn)證

.trigger("showmsg", [type, message])：觸發(fā)字段提示消息

.trigger("hidemsg")：觸發(fā)字段隱藏消息

$('#form1').validator({選項(xiàng)參數(shù)})? ? ? : 根據(jù)參數(shù)初始化驗(yàn)證，驗(yàn)證 jQuery 選中的表單

$('#form1').validator(function(){})? ? : 初始化驗(yàn)證，驗(yàn)證 jQuery 選中的表單，驗(yàn)證通過后執(zhí)行回調(diào)

$('#form1').validator(instanceMethod, arg1, arg2...?)? ? :通過.validator()?方法調(diào)用實(shí)例方法？

$('#form1').isValid( callback )?判斷某個(gè)區(qū)域或者某個(gè)字段是否驗(yàn)證通過，如果字段中有異步 ajax 驗(yàn)證，需要通過 callback 獲取驗(yàn)證結(jié)果

$.validator(selector, options)

$.validator.config(options)：配置全局選項(xiàng)? ?建議配置在 local 配置文件（如：zh-CN.js）中

$.validator.setTheme(name, options)：配置全局主題? ? 參考配置選項(xiàng)

instance （實(shí)例方法）

.test(elem, rule)：驗(yàn)證字段是否符合指定的規(guī)則 返回布爾

.showMsg(elem, obj)：使字段提示消息（不推薦），推薦使用.trigger("showmsg")

.hideMsg(elem)：使字段隱藏消息（不推薦），推薦使用.trigger("hidemsg")

.holdSubmit(hold)：防止表單重復(fù)提交的措施

.cleanUp()：清除表單中的全部驗(yàn)證消息

.destroy()：銷毀表單驗(yàn)證實(shí)例

總結(jié)

.test(elem, rule)：驗(yàn)證字段是否符合指定的規(guī)則返回布爾