本文實(shí)例為大家分享了formValidator實(shí)現(xiàn)表單驗(yàn)證的具體代碼，供大家參考，具體內(nèi)容如下
測(cè)試效果：
所需的庫文件：
代碼如下:
<%@ 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>表單校驗(yàn)測(cè)試</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>
<!--
【注】表單驗(yàn)證的參數(shù)中的方法區(qū)分大小寫，采用駱駝命名法。如文檔中的onerror: 應(yīng)寫成 onError:
-->
<!-- 驗(yàn)證表單之文本輸入框 -->
<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;">驗(yàn)證表單之文本輸入框</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">身份證號(hào)</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">學(xué)歷</label></td>
<td width="100px"><select name="degree" id="degree">
<option value="">－－請(qǐng)選擇－－</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">國(guó)家區(qū)號(hào)</label></td>
<td width="200px">
<input id="Tel_country" name="Tel_country" style="width: 20px;" value="" />
-地區(qū)區(qū)號(hào)
<input id="Tel_area" name="Tel_area" style="width: 35px;" />
-電話號(hào)碼
<input id="Tel_number" name="Tel_number" style="width: 60px;" />
-分機(jī)號(hào)碼
<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" />
上網(wǎng)
<input type="checkbox" name="xqah_one" id="qq4" value="3" />
旅游
<input type="checkbox" name="xqah_one" id="qq5" value="4" />
購(gòu)物
</td>
<td width="150px"><div id="test3Tip"></div></td>
</tr>
<tr>
<td width="100px"><label for="shouji">手機(jī)號(hào)碼</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個(gè)字以上</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">重復(fù)密碼</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(){
//初始化表單驗(yàn)證
$.formValidator.initConfig({formID:"inputTest",debug:true,onSuccess:function(){
alert("驗(yàn)證通過");
},onError:function(){
alert("驗(yàn)證有誤")
}});
//驗(yàn)證表單中的姓名 【注】測(cè)試表明 如果設(shè)置了onErrorMin 則結(jié)果會(huì)調(diào)用onErrorMin的方法 而屏蔽onError的方法 onErrorMax同理
$("#username").formValidator({onShow:"請(qǐng)輸入姓名",onFocus:"請(qǐng)注意填入正確姓名",onCorrect:"姓名有效"})
.inputValidator({min:4,max:10,onErrorMin:"姓名長(zhǎng)度太短",onError:"輸入姓名有誤"});
//驗(yàn)證單選按鈕 【注】多選按鈕時(shí),id不可相同 否則表單驗(yàn)證的過程中會(huì)執(zhí)行兩次并且第二次會(huì)報(bào)錯(cuò) 因?yàn)橛卸鄠€(gè)標(biāo)簽 故需要制定tipID來顯示提示信息
//利用defaultValue確定默認(rèn)的選項(xiàng)
$(":radio[name='sex']").formValidator({tipID:"sexTip",onShow:"請(qǐng)選擇性別",onFocus:"別選擇錯(cuò)了哦",onCorrect:"bingo，性別對(duì)了",defaultValue:['女']})
.inputValidator({min:1,max:1,onError:"性別忘記選了,請(qǐng)確認(rèn)"});
//驗(yàn)證出生日期 使用inputValidator進(jìn)行輸入框內(nèi)容驗(yàn)證 使用functionValidator進(jìn)行正則驗(yàn)證
$("#birthday").formValidator({onShow:"請(qǐng)輸入你的出生日期",onFocus:"出生日期不能全為0",onCorrect:"日期選擇有效"})
.inputValidator({type:"string",min:"2000-01-01",onErrorMin:"日期不能早期2000-01-01"})
.functionValidator({fun:isDate});
//驗(yàn)證身份證號(hào) 使用正則驗(yàn)證是否是身份證號(hào)碼
$("#idcard").formValidator({onShow:"請(qǐng)輸入身份證號(hào)",onFocus:"輸入15或18位的身份證",onCorrect:"身份證有效"})
.functionValidator({fun:isCardID});
//驗(yàn)證郵箱
$("#email").formValidator({onShow:"請(qǐng)輸入郵箱",onFocus:"郵箱6-100個(gè)字符,輸入正確了才能離開焦點(diǎn)",onCorrect:"恭喜你,你輸對(duì)了",defaultValue:"@"})
//.inputValidator({min:6,max:100,onError:"你輸入的郵箱長(zhǎng)度非法,請(qǐng)確認(rèn)"})
.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:"你輸入的郵箱格式不正確"});
//驗(yàn)證學(xué)歷信息 【注】即是驗(yàn)證下拉列表框
$("#degree").formValidator({onShow:"請(qǐng)選擇你的學(xué)歷",onFocus:"學(xué)歷必須選擇",onCorrect:"謝謝你的配合",defaultValue:"b"})
.inputValidator({min:1,onError: "你是不是忘記選擇學(xué)歷了!"})
.defaultPassed();
//驗(yàn)證國(guó)家區(qū)號(hào)
$("#Tel_country").formValidator({tipID:"telTip",onShow:"請(qǐng)輸入國(guó)家區(qū)號(hào)",onFocus:"國(guó)家區(qū)號(hào)2位數(shù)字",onCorrect:"恭喜你,你輸對(duì)了",defaultValue:"86"})
.regexValidator({regExp:"^\\d{2}$",onError:"國(guó)家區(qū)號(hào)不正確"});
$("#Tel_area").formValidator({tipID:"telTip",onShow:"請(qǐng)輸入地區(qū)區(qū)號(hào)",onFocus:"地區(qū)區(qū)號(hào)3位或4位數(shù)字",onCorrect:"恭喜你,你輸對(duì)了"})
.regexValidator({regExp:"^\\d{3,4}$",onError:"地區(qū)區(qū)號(hào)不正確"});
$("#Tel_number").formValidator({tipID:"telTip",onShow:"請(qǐng)輸入電話號(hào)碼",onFocus:"電話號(hào)碼7到8位數(shù)字",onCorrect:"恭喜你,你輸對(duì)了"})
.regexValidator({regExp:"^\\d{7,8}$",onError:"電話號(hào)碼不正確"});
$("#Tel_ext").formValidator({tipID:"telTip",onShow:"請(qǐng)輸入分機(jī)號(hào)碼",onFocus:"分機(jī)號(hào)碼1到5位數(shù)字",onCorrect:"恭喜你,你輸對(duì)了"})
.regexValidator({regExp:"^\\d{1,5}$",onError:"分機(jī)號(hào)碼不正確"});
//驗(yàn)證多選框 【注】多選框的使用情況
$(":checkbox[name='xqah_one']").formValidator({tipID:"test3Tip",onShow:"請(qǐng)選擇你的興趣愛好（至少選一個(gè)）",onFocus:"你至少選擇1個(gè)",onCorrect:"恭喜你,你選對(duì)了"})
.inputValidator({min:1,onError:"你選的個(gè)數(shù)不對(duì)"});
//驗(yàn)證手機(jī)號(hào)碼 【注】注意 functionValidator 和 regexValidator的區(qū)別 empty:true表示允許為空
$("#shouji").formValidator({empty:true,onShow:"請(qǐng)輸入你的手機(jī)號(hào)碼，可以為空哦",onFocus:"你要是輸入了，必須輸入正確",onCorrect:"謝謝你的合作",onEmpty:"你真的不想留手機(jī)號(hào)碼啊？"})
.inputValidator({min:11,max:11,onError:"手機(jī)號(hào)碼必須是11位的,請(qǐng)確認(rèn)"})
.regexValidator({regExp:"mobile",dataType:"enum",onError:"你輸入的手機(jī)號(hào)碼格式不正確"});;
//驗(yàn)證多選框
$("#selectmore").formValidator({onShow:"按住CTRL可以多選",onFocus:"按住CTRL可以多選,至少選擇2個(gè)",onCorrect:"謝謝你的合作",defaultValue:["0","2"]})
.inputValidator({min:2,onError:"至少選擇2個(gè)"});
//輸入中文 僅支持中文并且要求在10個(gè)字以上
$("#ms").formValidator({onShowText:"這家伙很懶，什么都沒有留下。",onShow:"請(qǐng)輸入你的描述",onFocus:"描述至少要輸入10個(gè)漢字",onCorrect:"恭喜你,你輸對(duì)了",defaultValue:"這家伙很懶，什么都沒有留下。"})
.inputValidator({min:20,onError:"你輸入的描述長(zhǎng)度不正確,請(qǐng)確認(rèn)"})
.regexValidator({regExp:"chinese",dataType:"enum",onError:"僅支持中文"});
//驗(yàn)證密碼 compareValidator 【注】 desID operateor
$("#password1").formValidator({onShow:"請(qǐng)輸入密碼",onFocus:"至少1個(gè)長(zhǎng)度",onCorrect:"密碼合法"})
.inputValidator({min:1,empty:{leftEmpty:false,rightEmpty:false,emptyError:"密碼兩邊不能有空符號(hào)"},onError:"密碼不能為空,請(qǐng)確認(rèn)"});
$("#password2").formValidator({onShow:"輸再次輸入密碼",onFocus:"至少1個(gè)長(zhǎng)度",onCorrect:"密碼一致"})
.inputValidator({min:1,empty:{leftEmpty:false,rightEmpty:false,emptyError:"重復(fù)密碼兩邊不能有空符號(hào)"},onError:"重復(fù)密碼不能為空,請(qǐng)確認(rèn)"})
.compareValidator({desID:"password1",operateor:"=",onError:"2次密碼不一致,請(qǐng)確認(rèn)"});
});
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試