Validform表單驗(yàn)證總結(jié)篇
近期項(xiàng)目里用到了表單的驗(yàn)證,選擇了Validform_v5.3.2。
先來了解一下一些基本的參數(shù):
通用表單驗(yàn)證方法:
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í)對(duì):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ā)檢測(cè),blur事件將不會(huì)觸發(fā)檢測(cè)(實(shí)時(shí)驗(yàn)證會(huì)在后臺(tái)進(jìn)行,不會(huì)顯示檢測(cè)結(jié)果); label:".label",//可選項(xiàng) 選擇符,在沒有綁定nullmsg時(shí)查找要顯示的提示文字,默認(rèn)查找".Validform_label"下的文字; showAllError:false,//可選項(xiàng) true | false,true:提交表單時(shí)所有錯(cuò)誤提示信息都會(huì)顯示,false:一碰到驗(yàn)證不通過的就停止檢測(cè)后面的元素,只顯示該元素的錯(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)前表單對(duì)象。 //這里明確return false的話將不會(huì)繼續(xù)執(zhí)行驗(yàn)證操作; }, beforeSubmit:function(curform){ //在驗(yàn)證成功后,表單提交前執(zhí)行的函數(shù),curform參數(shù)是當(dāng)前表單對(duì)象。 //這里明確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)前表單對(duì)象,回調(diào)函數(shù)會(huì)在表單驗(yàn)證全部通過后執(zhí)行,然后判斷是否提交表單,如果callback里明確return false,則表單不會(huì)提交,如果return true或沒有return,則會(huì)提交表單。 } }); Validform對(duì)象的方法和屬性: tipmsg:自定義提示信息,通過修改Validform對(duì)象的這個(gè)屬性值來讓同一個(gè)頁面的不同表單使用不同的提示文字; dataType:獲取內(nèi)置的一些正則; eq(n):獲取Validform對(duì)象的第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):忽略對(duì)所選擇對(duì)象的驗(yàn)證; unignore(selector):將ignore方法所忽略驗(yàn)證的對(duì)象重新獲取驗(yàn)證效果; addRule(rule):可以通過Validform對(duì)象的這個(gè)方法來給表單元素綁定驗(yàn)證規(guī)則; check(bool,selector):對(duì)指定對(duì)象進(jìn)行驗(yàn)證(默認(rèn)驗(yàn)證當(dāng)前整個(gè)表單),通過返回true,否則返回false(綁定實(shí)時(shí)驗(yàn)證的對(duì)象,格式符合要求時(shí)返回true,而不會(huì)等ajax的返回結(jié)果),bool為true時(shí)則只驗(yàn)證不顯示提示信息; config(setup):可以通過這個(gè)方法來修改初始化參數(shù),指定表單的提交地址,給表單ajax和實(shí)時(shí)驗(yàn)證的ajax里設(shè)置參數(shù);
下面是demo的下載地址的鏈接,有需要的可以下載。
以上所述是小編給大家介紹的Validform表單驗(yàn)證總結(jié)篇,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
(推薦一個(gè)超好的JS函數(shù)庫)S.Sams Lifexperience ScriptClassLib
(推薦一個(gè)超好的JS函數(shù)庫)S.Sams Lifexperience ScriptClassLib...2007-04-04JS前端攻堅(jiān)Eventbus實(shí)現(xiàn)更新示例詳解
這篇文章主要為大家介紹了JS前端攻堅(jiān)Eventbus實(shí)現(xiàn)更新示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12ionic 3.0+ 項(xiàng)目搭建運(yùn)行環(huán)境的教程
本篇文章主要介紹了ionic 3.0+ 項(xiàng)目搭建運(yùn)行的教程,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08JavaScript判斷瀏覽器和hack滾動(dòng)條的寫法
這篇文章主要介紹了JavaScript判斷瀏覽器和hack滾動(dòng)條的寫法,需要的朋友可以參考下2017-07-07