欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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">專科</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í)有所幫助。

相關(guān)文章

最新評論