jQuery formValidator表單驗(yàn)證
作為一名程序員,在解決工作中遇到問(wèn)題之后,做一些總結(jié)是有必要的,既方便總結(jié)溫習(xí)相關(guān)知識(shí)點(diǎn),也為廣大的程序員提供了一些工作經(jīng)歷,給予同行一面明鑒.
html部分:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>formValidator</title> <script src="js/jquery-1.11.1.js"></script> <script src="js/formValidator-4.0.1.min.js"></script> <script src="js/DateTimeMask.js"></script> <script src="js/formValidatorRegex.js"></script> <link rel="stylesheet" href="css/validator.css"> <style> form{ width: 500px; margin: 100px auto; } table tr td:first-child{ text-align: right; } table tr td{ padding: 5px 0; } div{ margin-left: 10px; padding: 0 10px; } </style> </head> <body> <form name="myfm" id="myfm" action="1.html"> <table> <tbody> <tr> <td><label for="uname">用戶名:</label></td> <td><input type="text" id="uname" name="uname"/></td> <td><div id="unameTip"></div></td> </tr> <tr> <td><label for="pwd">密碼:</label></td> <td><input type="password" id="pwd" name="pwd"/></td> <td><div id="pwdTip"></div></td> </tr> <tr> <td><label for="repwd">重復(fù)密碼:</label></td> <td><input type="password" name="repwd" id="repwd"/></td> <td><div id="repwdTip"></div></td> </tr> <tr> <td><label>性別:</label></td> <td> <input type="radio" name="sex" value="male" id="male"/> <label for="male">男</label> <input type="radio" name="sex" value="female" id="female"/> <label for="female">女</label> </td> </tr> <tr> <td><label for="area">地區(qū):</label></td> <td> <select name="area" id="area"> <option value="0">- 請(qǐng)選擇 -</option> <option value="1">錦江區(qū)</option> <option value="2">金牛區(qū)</option> <option value="3">龍泉驛區(qū)</option> <option value="4">青羊區(qū)</option> </select> </td> </tr> <tr> <td><label for="num">身份證:</label></td> <td><input type="text" id="num" name="num"/></td> <td><div id="numTip"></div></td> </tr> <tr> <td><label for="phone">電話號(hào)碼:</label></td> <td><input type="text" name="phone" id="phone"/></td> <td><div id="phoneTip"></div></td> </tr> <tr> <td><label for="email">郵箱:</label></td> <td><input type="text" name="email" id="email"/></td> <td><div id="emailTip"></div></td> </tr> <tr> <td></td> <td><input type="submit" name="submit" id="submit" value="提交"/></td> <td></td> </tr> </tbody> </table> </form> <script> $.formValidator.initConfig({ //用于配置當(dāng)前formValidator插件 formID:"myfm", debug:false, submitOnce:true, validatorGroup : '1', //設(shè)置驗(yàn)證組,默認(rèn)值為1 onSuccess : function(){ //驗(yàn)證成功后的回調(diào)函數(shù) }, onError:function(){ //驗(yàn)證失敗后的回調(diào)函數(shù) } }); $('#uname').formValidator({ ValidatorGroup : '1', //驗(yàn)證組為1 onEmpty : '用戶名不能為空', //提示用戶名不能為空 onShow : "", onFocus : '用戶名必須為1到12位的數(shù)字或字母',//表單元素獲得焦點(diǎn)的時(shí)候提示應(yīng)輸入的格式 onCorrect : '用戶名輸入正確' //輸入正確的提示 }) .regexValidator({ regExp : '^[0-9a-zA-Z]{1,12}$', //驗(yàn)證表單輸入的正則表達(dá)式 onError : '用戶名格式有誤,請(qǐng)從新輸入' //輸入錯(cuò)誤的提示 }) .ajaxValidator({ //驗(yàn)證輸入的用戶名是否已經(jīng)存在 dataType : 'html', //請(qǐng)求數(shù)據(jù)的格式 async : true, //異步方式 url : 'test.php', success : function(data){ if (data=='false') { return false; }else{ return true; } }, onError : '該用戶名已存在,請(qǐng)從新輸入', onWait : '正在對(duì)用戶名進(jìn)行合法性校驗(yàn),請(qǐng)稍候...' }); $('#pwd').formValidator({ ValidatorGroup : '1', onEmpty : '密碼不能為空', onShow : "", onFocus : '密碼必須為6位以上的字母或數(shù)字', onCorrect : '密碼輸入正確' }) .regexValidator({ regExp : '[0-9a-zA-Z]{6,}', onError : '密碼格式有誤,請(qǐng)從新輸入' }); $('#repwd').formValidator({ ValidatorGroup : '1', onEmpty : '密碼不能為空', onShow : "", onFocus : '密碼必須為6位以上的字母或數(shù)字', onCorrect : '密碼輸入正確' }) .regexValidator({ regExp : '^[0-9a-zA-Z]{6,}$', onError : '密碼格式不正確' }) .compareValidator({ //比較兩次輸入內(nèi)容是否符合下面給出的比較符號(hào) desID : 'pwd', //相比較的表單元素的ID值 operateor : '=', //要比較的兩個(gè)元素之間的關(guān)系 onError : '兩次密碼輸入不一致,請(qǐng)從新輸入' //不滿足以上關(guān)系的時(shí)候的提示 }); $('#num').formValidator({ ValidatorGroup : '1', onEmpty : '身份證不能為空', onShow : '', onFocus : '請(qǐng)輸入您的身份證號(hào)', onCorrect : '身份證格式正確' }).regexValidator({ regExp : '^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{4}$', //15位身份證號(hào)碼的正則表達(dá)式/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/ onError : '身份證格式有誤,請(qǐng)從新輸入' }); $('#phone').formValidator({ ValidatorGroup : '1', onEmpty : '手機(jī)號(hào)碼不能為空', onShow : '', onFocus : '請(qǐng)輸入您的手機(jī)號(hào)碼', onCorrect : '手機(jī)號(hào)碼格式正確', }) .regexValidator({ regExp : '^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$', onError : '手機(jī)號(hào)碼格式有誤,請(qǐng)從新輸入' }); $('#email').formValidator({ ValidatorGroup : '1', onEmpty : '郵箱地址不能為空', onShow : '', onFocus : '請(qǐng)輸入您的郵箱地址', onCorrect : '郵箱格式正確' }) .regexValidator({ regExp : '^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$', onError : '郵箱格式有誤,請(qǐng)從新輸入' }); </script> </body> </html> php部分代碼: <?php header('Content-Type:html'); $name=array('Tom','ervin','Jhon'); $uname=$_REQUEST['uname']; $notexit='true'; for ($i=0; $i <3 ; $i++) { if ($uname==$name[$i]) { $notexit='false'; break; }else{ } } echo "$notexit"; ?>
以上內(nèi)容是小編給大家介紹的jQuery formValidator表單驗(yàn)證相關(guān)知識(shí),希望對(duì)大家有所幫助,同時(shí)感謝大家對(duì)腳本之家網(wǎng)站的支持。
- jquery validate和jquery form 插件組合實(shí)現(xiàn)驗(yàn)證表單后AJAX提交
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- jquery表單驗(yàn)證使用插件formValidator
- jQuery表單驗(yàn)證插件formValidator(改進(jìn)版)
- jQuery 表單驗(yàn)證插件formValidation實(shí)現(xiàn)個(gè)性化錯(cuò)誤提示
- jQuery formValidator表單驗(yàn)證插件開(kāi)源了 含API幫助、源碼、示例
- JQuery form表單提交前驗(yàn)證單選框是否選中、刪除記錄時(shí)驗(yàn)證經(jīng)驗(yàn)總結(jié)(整理)
相關(guān)文章
jQuery實(shí)現(xiàn)的進(jìn)度條效果
本文主要給大家介紹的是jQuery實(shí)現(xiàn)的進(jìn)度效果的實(shí)例代碼,其實(shí)現(xiàn)原理就是使用 Javascript 控制 SPAN CSS 的寬度(以及其他的樣式)有需要的小伙伴可以參考下。2015-07-07使用jQuery Ajax 請(qǐng)求webservice來(lái)實(shí)現(xiàn)更簡(jiǎn)練的Ajax
以往我們?cè)谧鯽jax時(shí),都要借助于一般處理程序(.ashx)或web服務(wù)(.asmx),并且每一個(gè)請(qǐng)求都要建一個(gè)這樣的文件,非常麻煩,下面我們甩掉ashx和asmx來(lái)使用jQuery Ajax 請(qǐng)求webservice來(lái)實(shí)現(xiàn)更簡(jiǎn)練的Ajax,需要的朋友參考下2016-08-08jQuery中的類(lèi)名選擇器(.class)用法簡(jiǎn)單示例
這篇文章主要介紹了jQuery中的類(lèi)名選擇器(.class)用法,簡(jiǎn)單介紹了jQuery類(lèi)名選擇器的概念、原理并結(jié)合實(shí)例形式分析了類(lèi)選擇器的簡(jiǎn)單使用方法,需要的朋友可以參考下2018-05-05jQuery插件slick實(shí)現(xiàn)響應(yīng)式移動(dòng)端幻燈片圖片切換特效
jQuery插件slick是一款響應(yīng)式、適用于移動(dòng)設(shè)備觸摸屏、可滑動(dòng)顯示的jQuery幻燈片插件。該幻燈片插件可以設(shè)置多種顯示效果,可以自動(dòng)播放,是一款移動(dòng)優(yōu)先的jQuery幻燈片插件。2015-04-04使用Javascript實(shí)現(xiàn)選擇下拉菜單互移并排序
本文給大家介紹使用js實(shí)現(xiàn)下拉菜單可選擇互相移動(dòng)并實(shí)現(xiàn)菜單排序,代碼簡(jiǎn)單易懂,具有參考價(jià)值,需要的朋友參考下吧2016-02-02jquery實(shí)現(xiàn)拖拽調(diào)整Div大小
這里給大家分享的是一段自己編寫(xiě)的使用jQuery實(shí)現(xiàn)拽調(diào)整Div層大小的代碼,非常實(shí)用,推薦給有需要的小伙伴們。2015-01-01Jquery和angularjs獲取check框選中的值的方法匯總
本文分別通過(guò)具體的實(shí)例向大家展示了jquery和angularjs獲取獲取check框選中的值的方法,非常的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下2016-01-01jquery自動(dòng)將form表單封裝成json的具體實(shí)現(xiàn)
這篇文章主要介紹了jquery自動(dòng)將form表單封裝成json的具體實(shí)現(xiàn),需要的朋友可以參考下2014-03-03