jQuery插件formValidator實現(xiàn)表單驗證
更新時間：2016年05月23日 15:28:55 作者：HiveDark
這篇文章主要為大家詳細(xì)介紹了jQuery插件formValidator實現(xiàn)表單驗證的相關(guān)資料,需要的朋友可以參考下
本文實例為大家分享了formValidator實現(xiàn)表單驗證的具體代碼，供大家參考，具體內(nèi)容如下
測試效果：
所需的庫文件：
實現(xiàn)代碼：
<%@ 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>
<!--
【注】表單驗證的參數(shù)中的方法區(qū)分大小寫，采用駱駝命名法。如文檔中的onerror: 應(yīng)寫成 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">學(xué)歷</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">國家區(qū)號</label></td>
<td width="200px">
<input id="Tel_country" name="Tel_country" style="width: 20px;" value="" />
-地區(qū)區(qū)號
<input id="Tel_area" name="Tel_area" style="width: 35px;" />
-電話號碼
<input id="Tel_number" name="Tel_number" style="width: 60px;" />
-分機(jī)號碼
<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" />
購物
</td>
<td width="150px"><div id="test3Tip"></div></td>
</tr>
<tr>
<td width="100px"><label for="shouji">手機(jī)號碼</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">重復(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(){
//初始化表單驗證
$.formValidator.initConfig({formID:"inputTest",debug:true,onSuccess:function(){
alert("驗證通過");
},onError:function(){
alert("驗證有誤")
}});
//驗證表單中的姓名 【注】測試表明 如果設(shè)置了onErrorMin 則結(jié)果會調(diào)用onErrorMin的方法 而屏蔽onError的方法 onErrorMax同理
$("#username").formValidator({onShow:"請輸入姓名",onFocus:"請注意填入正確姓名",onCorrect:"姓名有效"})
.inputValidator({min:4,max:10,onErrorMin:"姓名長度太短",onError:"輸入姓名有誤"});
//驗證單選按鈕 【注】多選按鈕時,id不可相同 否則表單驗證的過程中會執(zhí)行兩次并且第二次會報錯 因為有多個標(biāo)簽 故需要制定tipID來顯示提示信息
//利用defaultValue確定默認(rèn)的選項
$(":radio[name='sex']").formValidator({tipID:"sexTip",onShow:"請選擇性別",onFocus:"別選擇錯了哦",onCorrect:"bingo，性別對了",defaultValue:['女']})
.inputValidator({min:1,max:1,onError:"性別忘記選了,請確認(rèn)"});
//驗證出生日期 使用inputValidator進(jìn)行輸入框內(nèi)容驗證 使用functionValidator進(jìn)行正則驗證
$("#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:"你輸入的郵箱長度非法,請確認(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:"你輸入的郵箱格式不正確"});
//驗證學(xué)歷信息 【注】即是驗證下拉列表框
$("#degree").formValidator({onShow:"請選擇你的學(xué)歷",onFocus:"學(xué)歷必須選擇",onCorrect:"謝謝你的配合",defaultValue:"b"})
.inputValidator({min:1,onError: "你是不是忘記選擇學(xué)歷了!"})
.defaultPassed();
//驗證國家區(qū)號
$("#Tel_country").formValidator({tipID:"telTip",onShow:"請輸入國家區(qū)號",onFocus:"國家區(qū)號2位數(shù)字",onCorrect:"恭喜你,你輸對了",defaultValue:"86"})
.regexValidator({regExp:"^\\d{2}$",onError:"國家區(qū)號不正確"});
$("#Tel_area").formValidator({tipID:"telTip",onShow:"請輸入地區(qū)區(qū)號",onFocus:"地區(qū)區(qū)號3位或4位數(shù)字",onCorrect:"恭喜你,你輸對了"})
.regexValidator({regExp:"^\\d{3,4}$",onError:"地區(qū)區(qū)號不正確"});
$("#Tel_number").formValidator({tipID:"telTip",onShow:"請輸入電話號碼",onFocus:"電話號碼7到8位數(shù)字",onCorrect:"恭喜你,你輸對了"})
.regexValidator({regExp:"^\\d{7,8}$",onError:"電話號碼不正確"});
$("#Tel_ext").formValidator({tipID:"telTip",onShow:"請輸入分機(jī)號碼",onFocus:"分機(jī)號碼1到5位數(shù)字",onCorrect:"恭喜你,你輸對了"})
.regexValidator({regExp:"^\\d{1,5}$",onError:"分機(jī)號碼不正確"});
//驗證多選框 【注】多選框的使用情況
$(":checkbox[name='xqah_one']").formValidator({tipID:"test3Tip",onShow:"請選擇你的興趣愛好（至少選一個）",onFocus:"你至少選擇1個",onCorrect:"恭喜你,你選對了"})
.inputValidator({min:1,onError:"你選的個數(shù)不對"});
//驗證手機(jī)號碼 【注】注意 functionValidator 和 regexValidator的區(qū)別 empty:true表示允許為空
$("#shouji").formValidator({empty:true,onShow:"請輸入你的手機(jī)號碼，可以為空哦",onFocus:"你要是輸入了，必須輸入正確",onCorrect:"謝謝你的合作",onEmpty:"你真的不想留手機(jī)號碼??？"})
.inputValidator({min:11,max:11,onError:"手機(jī)號碼必須是11位的,請確認(rèn)"})
.regexValidator({regExp:"mobile",dataType:"enum",onError:"你輸入的手機(jī)號碼格式不正確"});;
//驗證多選框
$("#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:"你輸入的描述長度不正確,請確認(rèn)"})
.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:"密碼不能為空,請確認(rèn)"});
$("#password2").formValidator({onShow:"輸再次輸入密碼",onFocus:"至少1個長度",onCorrect:"密碼一致"})
.inputValidator({min:1,empty:{leftEmpty:false,rightEmpty:false,emptyError:"重復(fù)密碼兩邊不能有空符號"},onError:"重復(fù)密碼不能為空,請確認(rèn)"})
.compareValidator({desID:"password1",operateor:"=",onError:"2次密碼不一致,請確認(rèn)"});
});
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:
- jQuery formValidator表單驗證插件開源了 含API幫助、源碼、示例
- formValidator3.3的ajaxValidator一些異常分析
- jQuery表單驗證插件formValidator(改進(jìn)版)
- jquery表單驗證使用插件formValidator
- formvalidator驗證插件中有關(guān)ajax驗證問題
- jquery formValidator插件ajax驗證 內(nèi)容不做任何修改再離開提示錯誤的bug解決方法
- jQuery插件formValidator自定義函數(shù)擴(kuò)展功能實例詳解
- jQuery formValidator表單驗證
- jquery表單驗證插件formValidator使用方法
相關(guān)文章
基于jQuery的message插件實現(xiàn)右下角彈出消息框
有時在頁面加載的時候，需要在頁面的右下角彈出一個小的提示框，顯示一些提示信息給用戶，通過使用jQuery的message插件，可以很方便的實現(xiàn)這個效果，在使用之前先介紹一下message插件中的方法的使用。2011-01-01
自己寫的 ToolTip提示插件,書寫過程很認(rèn)真的,希望大家支持我，給我點評論,感興趣的朋友可以了解下哦，希望本文對你有所幫助2013-01-01
jquery實現(xiàn)的藍(lán)色二級導(dǎo)航條效果代碼
這篇文章主要介紹了jquery實現(xiàn)的藍(lán)色二級導(dǎo)航條效果代碼,涉及jquery鼠標(biāo)事件及頁面樣式的動態(tài)切換效果實現(xiàn)技巧,非常簡單實用,需要的朋友可以參考下2015-08-08
jQuery+AJAX實現(xiàn)遮罩層登錄驗證界面（附源碼）
這篇文章主要介紹了jQuery+AJAX實現(xiàn)遮罩層登錄驗證界面，并分享了源碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-10-10
15款優(yōu)秀的jQuery導(dǎo)航菜單插件分享
這篇文章收集了15款優(yōu)秀的jQuery導(dǎo)航菜單插件分享給大家。jQuery 是一個非常優(yōu)秀的 JavaScript 框架，使用簡單靈活，同時還有許多成熟的插件可供選擇，jQuery 讓網(wǎng)站有更好的可用性和用戶體驗，給訪問者對網(wǎng)站留下非常好的印象。2011-07-07
jQuery常用知識點總結(jié)以及平時封裝常用函數(shù)
這篇文章主要介紹了jQuery常用知識點總結(jié)以及平時封裝常用函數(shù) 的相關(guān)資料,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了jQuery實現(xiàn)每隔幾條元素增加1條線的方法,可實現(xiàn)每隔10條li元素增加一條虛線的功能,涉及jQuery元素的匹配與屬性動態(tài)設(shè)置技巧,需要的朋友可以參考下2016-06-06
jquery中jquery.offset().top/left用于獲取div距離窗口的距離而jquery.position().top/left用于獲取距離父級div的距離，下面有個不錯的示例，感興趣的朋友可以參考下2013-10-10
本篇文章為大家分析了在ajax進(jìn)行數(shù)據(jù)請求的時候遇到的問題以及解決辦法，一起參考學(xué)習(xí)下。2018-01-01
Jquery中.bind()、.live()、.delegate()和.on()之間的區(qū)別詳解
在我們?nèi)粘ｉ_發(fā)中經(jīng)常會使用到.bind()、.live()、.delegate()和.on()，有些同學(xué)會對這四者存在一些疑慮，所以下面這篇文章主要給大家介紹了關(guān)于Jquery中.bind()、.live()、.delegate()和.on()之間區(qū)別的相關(guān)資料，需要的朋友可以參考借鑒。2017-08-08