Form validation has been used in recent projects and Validform_v5.3.2 was chosen.

Let’s first understand some basic parameters:

General form validation method:

Demo:

$(".demoform").Validform({//$(".demoform")指明是哪一表單需要驗(yàn)證,名稱需加在form表單上;
btnSubmit:"#btn_sub", //#btn_sub是該表單下要綁定點(diǎn)擊提交表單事件的按鈕;如果form內(nèi)含有submit按鈕該參數(shù)可省略;
btnReset:".btn_reset",//可選項(xiàng) .btn_reset是該表單下要綁定點(diǎn)擊重置表單事件的按鈕;
tiptype:1, //可選項(xiàng) 1=>pop box,2=>side tip(parent.next.find; with default pop),3=>side tip(siblings; with default pop),4=>side tip(siblings; none pop)，默認(rèn)為1，也可以傳入一個(gè)function函數(shù)，自定義提示信息的顯示方式（可以實(shí)現(xiàn)你想要的任何效果，具體參見demo頁）;
ignoreHidden:false,//可選項(xiàng) true | false 默認(rèn)為false，當(dāng)為true時(shí)對:hidden的表單元素將不做驗(yàn)證;
dragonfly:false,//可選項(xiàng) true | false 默認(rèn)false，當(dāng)為true時(shí)，值為空時(shí)不做驗(yàn)證；
tipSweep:true,//可選項(xiàng) true | false 默認(rèn)為false，只在表單提交時(shí)觸發(fā)檢測，blur事件將不會(huì)觸發(fā)檢測（實(shí)時(shí)驗(yàn)證會(huì)在后臺進(jìn)行，不會(huì)顯示檢測結(jié)果）;
label:".label",//可選項(xiàng) 選擇符，在沒有綁定nullmsg時(shí)查找要顯示的提示文字，默認(rèn)查找".Validform_label"下的文字;
showAllError:false,//可選項(xiàng) true | false，true：提交表單時(shí)所有錯(cuò)誤提示信息都會(huì)顯示，false：一碰到驗(yàn)證不通過的就停止檢測后面的元素，只顯示該元素的錯(cuò)誤信息;
postonce:true, //可選項(xiàng) 表單是否只能提交一次，true開啟，不填則默認(rèn)關(guān)閉;
ajaxPost:true, //使用ajax方式提交表單數(shù)據(jù)，默認(rèn)false，提交地址就是action指定地址;
datatype:{//傳入自定義datatype類型，可以是正則，也可以是函數(shù)（函數(shù)內(nèi)會(huì)傳入一個(gè)參數(shù)）;
"*6-20": /^[^\s]{6,20}$/,
"z2-4" : /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,
"username":function(gets,obj,curform,regxp){
//參數(shù)gets是獲取到的表單元素值，obj為當(dāng)前表單元素，curform為當(dāng)前驗(yàn)證的表單，regxp為內(nèi)置的一些正則表達(dá)式的引用;
var reg1=/^[\w\.]{4,16}$/,
reg2=/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,8}$/;
if(reg1.test(gets)){return true;}
if(reg2.test(gets)){return true;}
return false;
//注意return可以返回true 或 false 或 字符串文字，true表示驗(yàn)證通過，返回字符串表示驗(yàn)證失敗，字符串作為錯(cuò)誤提示顯示，返回false則用errmsg或默認(rèn)的錯(cuò)誤提示;
},
"phone":function(){
// 5.0 版本之后，要實(shí)現(xiàn)二選一的驗(yàn)證效果，datatype 的名稱 不 需要以 "option_" 開頭;
}
},
usePlugin:{
swfupload:{},
datepicker:{},
passwordstrength:{},
jqtransform:{
selector:"select,input"
}
},
beforeCheck:function(curform){
//在表單提交執(zhí)行驗(yàn)證之前執(zhí)行的函數(shù)，curform參數(shù)是當(dāng)前表單對象。
//這里明確return false的話將不會(huì)繼續(xù)執(zhí)行驗(yàn)證操作;
},
beforeSubmit:function(curform){
//在驗(yàn)證成功后，表單提交前執(zhí)行的函數(shù)，curform參數(shù)是當(dāng)前表單對象。
//這里明確return false的話表單將不會(huì)提交;
},
callback:function(data){
//返回?cái)?shù)據(jù)data是json格式，{"info":"demo info","status":"y"}
//info: 輸出提示信息;
//status: 返回提交數(shù)據(jù)的狀態(tài),是否提交成功。如可以用"y"表示提交成功，"n"表示提交失敗，在ajax_post.php文件返回?cái)?shù)據(jù)里自定字符，主要用在callback函數(shù)里根據(jù)該值執(zhí)行相應(yīng)的回調(diào)操作;
//你也可以在ajax_post.php文件返回更多信息在這里獲取，進(jìn)行相應(yīng)操作；
//ajax遇到服務(wù)端錯(cuò)誤時(shí)也會(huì)執(zhí)行回調(diào)，這時(shí)的data是{ status:**, statusText:**, readyState:**, responseText:** }；
//這里執(zhí)行回調(diào)操作;
//注意：如果不是ajax方式提交表單，傳入callback，這時(shí)data參數(shù)是當(dāng)前表單對象，回調(diào)函數(shù)會(huì)在表單驗(yàn)證全部通過后執(zhí)行，然后判斷是否提交表單，如果callback里明確return false，則表單不會(huì)提交，如果return true或沒有return，則會(huì)提交表單。
}
});
Validform對象的方法和屬性：
tipmsg：自定義提示信息，通過修改Validform對象的這個(gè)屬性值來讓同一個(gè)頁面的不同表單使用不同的提示文字；
dataType：獲取內(nèi)置的一些正則；
eq(n)：獲取Validform對象的第n個(gè)元素;
ajaxPost(flag,sync,url)：以ajax方式提交表單。flag為true時(shí)，跳過驗(yàn)證直接提交，sync為true時(shí)將以同步的方式進(jìn)行ajax提交，傳入了url地址時(shí)，表單會(huì)提交到這個(gè)地址；
abort()：終止ajax的提交；
submitForm(flag,url)：以參數(shù)里設(shè)置的方式提交表單，flag為true時(shí)，跳過驗(yàn)證直接提交，傳入了url地址時(shí)，表單會(huì)提交到這個(gè)地址；
resetForm()：重置表單；
resetStatus()：重置表單的提交狀態(tài)。傳入了postonce參數(shù)的話，表單成功提交后狀態(tài)會(huì)設(shè)置為"posted"，重置提交狀態(tài)可以讓表單繼續(xù)可以提交；
getStatus()：獲取表單的提交狀態(tài)，normal：未提交，posting：正在提交，posted：已成功提交過；
setStatus(status)：設(shè)置表單的提交狀態(tài)，可以設(shè)置normal，posting，posted三種狀態(tài)，不傳參則設(shè)置狀態(tài)為posting，這個(gè)狀態(tài)表單可以驗(yàn)證，但不能提交；
ignore(selector)：忽略對所選擇對象的驗(yàn)證；
unignore(selector)：將ignore方法所忽略驗(yàn)證的對象重新獲取驗(yàn)證效果；
addRule(rule)：可以通過Validform對象的這個(gè)方法來給表單元素綁定驗(yàn)證規(guī)則；
check(bool,selector):對指定對象進(jìn)行驗(yàn)證(默認(rèn)驗(yàn)證當(dāng)前整個(gè)表單)，通過返回true，否則返回false（綁定實(shí)時(shí)驗(yàn)證的對象，格式符合要求時(shí)返回true，而不會(huì)等ajax的返回結(jié)果），bool為true時(shí)則只驗(yàn)證不顯示提示信息；
config(setup):可以通過這個(gè)方法來修改初始化參數(shù)，指定表單的提交地址，給表單ajax和實(shí)時(shí)驗(yàn)證的ajax里設(shè)置參數(shù)；