Jquery表單驗證插件–Validform：一行代碼搞定整站的

 

你沒看錯，就一行代碼搞定整站的表單驗證！

1	$(".demoform").Validform();

爲何能如此方便？插件的核心思想就是把全部的驗證條件及驗證提示信息綁定到每一個表單元素，讓驗證代碼在執行時只是覈對表單下各元素的值是否跟綁定的驗證條件相符，這樣你能夠隨便添加或者去掉任一表單元素而沒必要修改驗證代碼，從而使僅用一行代碼去搞定整站的表單驗證的夢想成爲現實！

在線Demo | 立刻下載體驗

效果圖：

功能介紹：
一、支持一個頁面多表單的檢測。例如你給頁面上的各form綁定一樣的class名稱「demoform」，只需在頁面上寫上一句 $(「.demoform」).Validform()，各表單便會獨立檢測；
二、兩種信息提示效果，一個是元素右側出現提示信息，一個是彈出信息框。另外還附加了$.Showmsg()、$.Hidemsg()全局彈出/關閉信息框方法以便整站有一個統一的信息提示效果；
三、指定表單下任一元素在單擊時觸發表單提交事件；
四、支持ajax提交表單數據，也支持ajax實時反饋驗證結果（如常見的用戶註冊表單下的用戶名檢測）；
五、支持開啓網速慢時的二次提交防護（有時連續的點擊提交表單按鈕會產生屢次的表單提交結果）；
六、可檢測多個文本框內容是否一致（例如常見的兩次密碼輸入確認）；
七、囊括11種常見的格式驗證形式。

使用方法：

1 2 3 4 5 6 7 8 9

$(".demoform").Validform({//指定具體參數，實現更多功能; btnSubmit:".btn_sub", tiptype:2, postonce:true, ajaxurl:"ajax_post.php", callback:function(data){ //這裏執行回調操做; } });

參數說明： 【全部參數均爲可選項】
○ 必須是表單對象執行Validform方法，示例中「.demoform」就是綁定在form元素上的class名稱；
○ btnSubmit：指定表單下的哪個按鈕觸發表單提交事件，若是表單下有submit按鈕能夠省略。示例中「.btn_sub」是該表單下要綁定點擊提交表單事件的按鈕，程序會在btnSubmit所在表單下查找該對象;
○ tiptype：指定提示效果，可選值 1 | 2, 默認爲1。 1=>彈出提示框,2=>表單元素右側提示；
○ postonce：指定是否開啓網速慢時的二次提交防護，true開啓，不指定則默認關閉；
○ ajaxurl：指定處理ajax表單數據的後臺文件，注意處理完數據輸出相應反饋信息，這個頁面輸出的內容就是表單提交後前臺頁面所看到的反饋信息。
○ callback：在使用ajax提交表單數據時，數據提交後的回調函數。返回數據data是json格式，{「info」:」demo info」,」status」:」y」}，info: 輸出提示信息，status: 返回提交數據的狀態,是否提交成功，如能夠用」y」表示提交成功，」n」表示提交失敗，在ajax_post.php文件返回數據裏自定字符，主要用在callback函數里根據該值執行相應的回調操做。你也能夠在ajax_post.php文件返回更多信息在這裏獲取，進行相應操做；

怎樣給表單元素綁定驗證類型？
示例代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<!--ajax實時驗證用戶名--> <input type="text" value="" name="name" datatype="s5-16" ajaxurl="valid.php" nullmsg="請輸入用戶名！" errormsg="暱稱至少5個字符,最多16個字符！" />   <!--密碼--> <input type="password" value="" name="userpassword" datatype="*6-15" errormsg="密碼範圍在6~15位之間,不能使用空格！" /> <!--確認密碼--> <input type="password" value="" name="userpassword2" datatype="*" recheck="userpassword" errormsg="您兩次輸入的帳號密碼不一致！" />   <!--默認提示文字--> <textarea tip="請在這裏輸入您的意見。" errormsg="很感謝您花費寶貴時間給咱們提供反饋，請填寫有效內容！" datatype="s" altercss="gray" class="gray" name="msg" value="">請在這裏輸入您的意見。</textarea>   <!--單選按鈕--> <input type="radio" value="1" name="gender" id="male" datatype="radio" errormsg="請選擇性別！" /><label for="male">男</label> <input type="radio" value="2" name="gender" id="female" /><label for="female">女</label>   <!--複選框--> <input name="shoppingsite2" id="shoppingsite21" type="checkbox" value="1" datatype="checkbox" errormsg="請選擇您常去的購物網站！" /><label for="shoppingsite21">http://www.89900.com</label> <input name="shoppingsite2" id="shoppingsite22" type="checkbox" value="2" /><label for="shoppingsite22">噹噹網</label>   <!--下拉框--> <select name="province" id="province" datatype="select" errormsg="請選擇省份！" ><option value="">--請選擇省份--</option><option value="1">江西省</option></select>

說明：
凡要驗證格式的元素均需添加datatype屬性，datatype可選值目前有11類，用來指定不一樣的驗證格式【若是還不能知足您的驗證需求，能夠自行在regcheck方法中添加】。

datatype：* | *6-16 | n | s | s6-18 | p | m | e | radio | checkbox | select
*：檢測是否有輸入，能夠輸入任何字符，不留空便可經過驗證；
*6-16：檢測是否爲6到16位任意字符；
n：數字類型；
s：字符串類型；
s6-18：6到18位字符串；
p：驗證是否爲郵政編碼；
m：手機號碼格式；
e：email格式；
radio：若是要驗證的元素爲單選框，datatype設置爲radio；
checkbox：若是要驗證的元素爲複選框，datatype設置爲checkbox；
select：若是要驗證的元素爲下拉框，datatype設置爲select。
注意radio，checkbox，select的value值爲空時不能經過檢測，要非空值才能經過。radio和checkbox元素只需給該組的第一個元素綁定datatype屬性便可，請參看上面的示例代碼。

其餘的附加屬性：
nullmsg：是指定沒有填入內容時出現的提示信息，不指定默認是「請填入信息！」，另外當datatype爲radio、checkbox或select時，由於這三種類型只要爲空值就表示出錯，提示errormsg所指定信息，因此這三類不須要綁定該屬性；
errormsg：是指定驗證格式不符時出現的提示信息，不指定默認是「請輸入正確信息！」；
recheck：是用來指定兩個表單元素值一致性檢測的另一個對象，賦給它另一個對象的name屬性值便可；
tip：是指定表單元素的提示信息;指定後該元素會有focus時提示信息消去，沒有輸入內容blur時出現提示信息的效果，請參看demo頁的「備註」效果；
altercss：是指定有tip屬性的元素默認提示文字顯示時的樣式，當該元素focus時程序會把這個樣式去掉，blur時若是值爲空或者跟提示文字同樣則再加上該樣式；
ajaxurl：指定ajax實時驗證的後臺文件路徑，給須要後臺數據庫驗證信息的對象綁定該屬性。注意該文件輸出的內容就是前臺顯示的驗證出錯的反饋信息，若是驗證經過請輸出小寫字母」y」。

介紹完了，歡迎下載使用，反饋您的意見或建議。