本文實例為大家分享了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">專科</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>
以上就是本文的全部內容，希望對大家的學習有所幫助。
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
