本文實例為大家分享了formValidator實現表單驗證的具體代碼，供大家參考，具體內容如下
測試效果：
所需的庫文件：
實現代碼：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>表單校驗測試</title><link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap.min.css"><script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>/js/formValidator-4.1.3.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>/js/formValidatorRegex.js"></script><script language="javascript" src="<%=request.getContextPath()%>/js/DateTimeMask.js" type="text/javascript"></script></head><body><!-- 【注】表單驗證的參數中的方法區分大小寫，采用駱駝命名法。如文檔中的onerror: 應寫成 onError: --><!-- 驗證表單之文本輸入框 --><div class="col-xs-offset-2 col-xs-8"> <form id="inputTest" action="/test.do" method="post"> <table class="table table-bordered table-striped"> <caption style="font-size: 30px;font-weight: bold;color:#894502;">驗證表單之文本輸入框</caption> <tr> <td width="100px"><label for="username">用戶名:</label></td> <td width="100px"><input type="text" id="username"></td> <td width="100px"><span id="usernameTip"></span></td> </tr> <tr> <td width="100px"><label for="sex">性別:</label></td> <td width="100px"><input type="radio" id="sex" name="sex" value="男">男<input type="radio" id="sex1" name="sex" value="女">女</td> <td width="100px"><span id="sexTip"></span></td> </tr> <tr> <td width="100px"><label for="sex">出生年月:</label></td> <td width="100px"><input type="text" id="birthday" name="birthday" value="2015-08-09"></td> <td width="100px"><span id="birthdayTip"></span></td> </tr> <tr> <td width="100px"><label for="idcard">身份證號</label></td> <td width="100px"><input type="text" id="idcard" name="idcard"></td> <td width="100px"><span id="idcardTip"></span></td> </tr> <tr> <td width="100px"><label for="email">郵箱</label></td> <td width="100px"><input type="email" id="email" name="email"></td> <td width="150px"><span id="emailTip"></span></td> </tr> <tr> <td width="100px"><label for="degree">學歷</label></td> <td width="100px"><select name="degree" id="degree"> <option value="">－－請選擇－－</option> <option value="a">?？?lt;/option> <option value="b">本科</option> <option value="c">研究生</option> <option value="e">碩士</option> <option value="d">博士</option> </select> </td> <td width="150px"><div id="degreeTip"></div></td> </tr> <tr> <td width="100px"><label for="degree">國家區號</label></td> <td width="200px"> <input id="Tel_country" name="Tel_country" style="width: 20px;" value="" /> -地區區號 <input id="Tel_area" name="Tel_area" style="width: 35px;" /> -電話號碼 <input id="Tel_number" name="Tel_number" style="width: 60px;" /> -分機號碼 <input id="Tel_ext" name="Tel_ext" style="width: 30px;" /> </td> <td width="150px"><div id="telTip"></div></td> </tr> <tr> <td width="100px"><label for="qq1">興趣愛好</label></td> <td width="200px"> <input type="checkbox" name="xqah_one" id="qq1"/> 乒乓球 <input type="checkbox" name="xqah_one" id="qq2" value="1" /> 羽毛球 <input type="checkbox" name="xqah_one" id="qq3" value="2" /> 上網 <input type="checkbox" name="xqah_one" id="qq4" value="3" /> 旅游 <input type="checkbox" name="xqah_one" id="qq5" value="4" /> 購物 </td> <td width="150px"><div id="test3Tip"></div></td> </tr> <tr> <td width="100px"><label for="shouji">手機號碼</label></td> <td width="200px"><input type="text" id="shouji" name="shouji"/></td> <td width="150px"><div id="shoujiTip"></div></td> </tr> <tr> <td width="100px"><label for="selectmore">多選select控件</label></td> <td width="200px"> <select name="selectmore" size="3" id="selectmore" multiple="true" style="width: 100px;"> <option value="0">多選1</option> <option value="1">多選2</option> <option value="2">多選3</option> </select>(按住ctrl鍵多選) </td> <td width="150px"><div id="selectmoreTip"></div></td> </tr> <tr> <td width="100px"><label for="ms">你的描述</label></td> <td width="100px"><textarea id="ms" name="ms" cols="50" rows="3">僅支持中文并且要求在10個字以上</textarea></td> <td width="150px"><div id="msTip"></div></td> </tr> <tr> <td width="100px"><label for="password1">密碼</label></td> <td><input type="password" id="password1" name="password1"/></td> <td width="150px"><div id="password1Tip"></div></td> </tr> <tr> <td width="100px"><label for="password2">重復密碼</label></td> <td><input type="password" id="password2" name="password2"/></td> <td width="150px"><div id="password2Tip"></div></td> </tr> <tr> <td colspan="3" align="center"><input class="btn btn-primary" type="submit" value="提交"></td> </tr> </table> </form></div><script type="text/javascript">$(function(){ //初始化表單驗證 $.formValidator.initConfig({formID:"inputTest",debug:true,onSuccess:function(){ alert("驗證通過"); },onError:function(){ alert("驗證有誤") }}); //驗證表單中的姓名 【注】測試表明 如果設置了onErrorMin 則結果會調用onErrorMin的方法 而屏蔽onError的方法 onErrorMax同理 $("#username").formValidator({onShow:"請輸入姓名",onFocus:"請注意填入正確姓名",onCorrect:"姓名有效"}) .inputValidator({min:4,max:10,onErrorMin:"姓名長度太短",onError:"輸入姓名有誤"}); //驗證單選按鈕 【注】多選按鈕時,id不可相同 否則表單驗證的過程中會執行兩次并且第二次會報錯 因為有多個標簽 故需要制定tipID來顯示提示信息 //利用defaultValue確定默認的選項 $(":radio[name='sex']").formValidator({tipID:"sexTip",onShow:"請選擇性別",onFocus:"別選擇錯了哦",onCorrect:"bingo，性別對了",defaultValue:['女']}) .inputValidator({min:1,max:1,onError:"性別忘記選了,請確認"}); //驗證出生日期 使用inputValidator進行輸入框內容驗證 使用functionValidator進行正則驗證 $("#birthday").formValidator({onShow:"請輸入你的出生日期",onFocus:"出生日期不能全為0",onCorrect:"日期選擇有效"}) .inputValidator({type:"string",min:"2000-01-01",onErrorMin:"日期不能早期2000-01-01"}) .functionValidator({fun:isDate}); //驗證身份證號 使用正則驗證是否是身份證號碼 $("#idcard").formValidator({onShow:"請輸入身份證號",onFocus:"輸入15或18位的身份證",onCorrect:"身份證有效"}) .functionValidator({fun:isCardID}); //驗證郵箱 $("#email").formValidator({onShow:"請輸入郵箱",onFocus:"郵箱6-100個字符,輸入正確了才能離開焦點",onCorrect:"恭喜你,你輸對了",defaultValue:"@"}) //.inputValidator({min:6,max:100,onError:"你輸入的郵箱長度非法,請確認"}) .regexValidator({regExp:"^([//w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([//w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onError:"你輸入的郵箱格式不正確"}); //驗證學歷信息 【注】即是驗證下拉列表框 $("#degree").formValidator({onShow:"請選擇你的學歷",onFocus:"學歷必須選擇",onCorrect:"謝謝你的配合",defaultValue:"b"}) .inputValidator({min:1,onError: "你是不是忘記選擇學歷了!"}) .defaultPassed(); //驗證國家區號 $("#Tel_country").formValidator({tipID:"telTip",onShow:"請輸入國家區號",onFocus:"國家區號2位數字",onCorrect:"恭喜你,你輸對了",defaultValue:"86"}) .regexValidator({regExp:"^//d{2}$",onError:"國家區號不正確"}); $("#Tel_area").formValidator({tipID:"telTip",onShow:"請輸入地區區號",onFocus:"地區區號3位或4位數字",onCorrect:"恭喜你,你輸對了"}) .regexValidator({regExp:"^//d{3,4}$",onError:"地區區號不正確"}); $("#Tel_number").formValidator({tipID:"telTip",onShow:"請輸入電話號碼",onFocus:"電話號碼7到8位數字",onCorrect:"恭喜你,你輸對了"}) .regexValidator({regExp:"^//d{7,8}$",onError:"電話號碼不正確"}); $("#Tel_ext").formValidator({tipID:"telTip",onShow:"請輸入分機號碼",onFocus:"分機號碼1到5位數字",onCorrect:"恭喜你,你輸對了"}) .regexValidator({regExp:"^//d{1,5}$",onError:"分機號碼不正確"}); //驗證多選框 【注】多選框的使用情況 $(":checkbox[name='xqah_one']").formValidator({tipID:"test3Tip",onShow:"請選擇你的興趣愛好（至少選一個）",onFocus:"你至少選擇1個",onCorrect:"恭喜你,你選對了"}) .inputValidator({min:1,onError:"你選的個數不對"}); //驗證手機號碼 【注】注意 functionValidator 和 regexValidator的區別 empty:true表示允許為空 $("#shouji").formValidator({empty:true,onShow:"請輸入你的手機號碼，可以為空哦",onFocus:"你要是輸入了，必須輸入正確",onCorrect:"謝謝你的合作",onEmpty:"你真的不想留手機號碼?。?}) .inputValidator({min:11,max:11,onError:"手機號碼必須是11位的,請確認"}) .regexValidator({regExp:"mobile",dataType:"enum",onError:"你輸入的手機號碼格式不正確"});; //驗證多選框 $("#selectmore").formValidator({onShow:"按住CTRL可以多選",onFocus:"按住CTRL可以多選,至少選擇2個",onCorrect:"謝謝你的合作",defaultValue:["0","2"]}) .inputValidator({min:2,onError:"至少選擇2個"}); //輸入中文 僅支持中文并且要求在10個字以上 $("#ms").formValidator({onShowText:"這家伙很懶，什么都沒有留下。",onShow:"請輸入你的描述",onFocus:"描述至少要輸入10個漢字",onCorrect:"恭喜你,你輸對了",defaultValue:"這家伙很懶，什么都沒有留下。"}) .inputValidator({min:20,onError:"你輸入的描述長度不正確,請確認"}) .regexValidator({regExp:"chinese",dataType:"enum",onError:"僅支持中文"}); //驗證密碼 compareValidator 【注】 desID operateor $("#password1").formValidator({onShow:"請輸入密碼",onFocus:"至少1個長度",onCorrect:"密碼合法"}) .inputValidator({min:1,empty:{leftEmpty:false,rightEmpty:false,emptyError:"密碼兩邊不能有空符號"},onError:"密碼不能為空,請確認"}); $("#password2").formValidator({onShow:"輸再次輸入密碼",onFocus:"至少1個長度",onCorrect:"密碼一致"}) .inputValidator({min:1,empty:{leftEmpty:false,rightEmpty:false,emptyError:"重復密碼兩邊不能有空符號"},onError:"重復密碼不能為空,請確認"}) .compareValidator({desID:"password1",operateor:"=",onError:"2次密碼不一致,請確認"});});</script></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助。
新聞熱點
疑難解答
