40.使用JQ對錶單進行全面校驗

時間 2019-12-24

原文原文鏈接

1.效果html

2.代碼html5

<!DOCTYPE html>
<html>jquery

   <head>
       <meta charset="UTF-8">
       <title>JQ校驗表單</title>
       <script src="../js/jquery-3.2.1.js"></script>
       <script>
           $(function() {
               //1.對帳號進行校驗
               $("#loginID").focus(function() {
                   //1.1 提醒用戶謹慎填寫當輸入框裏面輸入了內容後提醒消失拿到輸入框的內容看看是不是空的空的提示不空提示消失
                   var val = $("#loginID").val();
                   if(val == '') {
                       $("#loginInfo").html("<font style='color: red;'>請謹慎填寫！</font>");
                   }ajax

                   //1.2 當用戶沒有輸入任何內容就告訴他須要填寫，校驗帳號長度若是小於6位或者大於12位就提示它最後要去後臺校驗是否該帳號已經被註冊了發出ajax請求將獲得的值進行判斷
                   $("#loginID").blur(function() {
                       var len = $("#loginID").val().length; //拿到用戶輸入的內容長度
                       if(len < 6 || len > 12) {
                           if(len == 0) {
                               $("#loginInfo").html("<font style='color: red;'>帳號未輸入！</font>");
                           } else {
                               $("#loginInfo").html("<font style='color: red;'>帳號長度6--12位</font>");
                           }正則表達式

                       } else {
                           //這裏應該是ajax請求若是後臺傳回的標記是未註冊
                           //$("#loginInfo").html("");
                           //不然提醒他已經註冊
                           $("#loginInfo").html(""); //這裏就不去校驗後臺了
                       }
                   });數組

});app

               //2.對密碼進行校驗長度至少6位
               $("#pwd").blur(function() {
                   var plen = $("#pwd").val().length;
                   if(plen < 6) {
                       if(plen == 0) {
                           $("#pwdInfo").html("<font style='color: red;'>密碼不能爲空！</font>")
                       } else {
                           $("#pwdInfo").html("<font style='color: red;'>密碼至少6位！</font>");
                       }post

                   } else {
                       $("#pwdInfo").html("");
                   }
               });
               //3.確認密碼要求與密碼的內容相同
               $("#rpwd").blur(function() {
                   var oldpwd = $("#pwd").val();
                   var newpwd = $("#rpwd").val();
                   if(oldpwd != newpwd) {
                       $("#rpwdInfo").html("<font style='color: red;'>密碼不一致！</font>");
                   } else {
                       $("#rpwdInfo").html("");
                   }
               });
               //4.姓名非空校驗 required="required" 在html裏校驗
               //5.年齡校驗只能是數字不能小於 0 且不能大於120
               $("#age").keypress(function(e) {
                   var keynum
                   var keychar
                   var numcheckui

                   if(window.event) // IE
                   {
                       keynum = e.keyCode
                   } else if(e.which) // Netscape/Firefox/Opera
                   {
                       keynum = e.which
                   }
                   keychar = String.fromCharCode(keynum)
                   numcheck = /\d/ //數字的正則表達式
                   return numcheck.test(keychar) // !numcheck.test(keychar) 表示不能輸入數字了
               });
               //大於0 小於120
               $("#age").blur(function() {
                   var valAge = $("#age").val();
                   if(valAge < 0 || valAge > 120) {
                       $("#ageInfo").html("<font style='color: red;'>年齡必須在0---120之間</font>");
                   } else {
                       $("#ageInfo").html("");
                   }
               });
               //6. 省市二級聯動
               //6.1定義一個二維數組存放城市
               var cities = new Array();
               cities[0] = new Array("朝陽區", "海淀區", "昌平區");
               cities[1] = new Array("浦東區", "虹口區", "金山區");
               cities[2] = new Array("福田區", "羅湖區", "坪山區");
               $("#provice").change(function() {
                   //6.2拿到用戶選擇的省份
                   var pro = $(this).val();
                   var citys = cities[pro];
                   //清空市下拉框內容原來的內容將城市數組進行遍歷追加到市選擇框
                   var cityElement = $("#city")[0] //轉化爲JS對象
                   cityElement.length = 0; //清空城市下拉框
                   $(citys).each(function(index, name) {
                       //alert(index+"---"+name)//遍歷拿到選擇省份下面的城市的索引及值
                       $("#city").append("<option value='" + index + "'>" + name + "</option>")
                   })
               });
               //7.校驗電話號碼
                   $("#telephone").blur(function(){
                   var telephoneVal =   $("#telephone").val();

                   if(!(/^1[34578]\d{9}$/.test(telephoneVal))){
                       $("#telephoneInfo").html("<font style='color: red;'>手機號格式不正確！</font>");
                   }else{
                       $("#telephoneInfo").html("");
                   }
                   });
                   //8.郵箱校驗使用html5自帶的就行
                   //9.身份證號碼正確性校驗
                   $("#PersonID").blur(function(){
                   var personid =   $("#PersonID").val();
                   if(!/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(personid)){
                       $("#PersonIDInfo").html("<font style='color: red;'>身份證格式錯誤！</font>");
                   }else{
                       $("#PersonIDInfo").html("");
                   }
                   });
                   this

           });
       </script>
   </head>

</tr>
               
               <tr>
                   <td align="right">籍貫：</td>
                   <td>
                       <select id="provice">
                           <option value="0">北京</option>
                           <option value="1">上海</option>
                           <option value="2">深圳</option>
                       </select>
                       <select id="city">

</select>
                   </td>
               </tr>
               
               <tr>
                   <td align="right">電話：</td>
                   <td>
                       <input type="text" name="telephone" id="telephone" required="required"/><span id="telephoneInfo"></span>
                   </td>
               </tr>
               
               <tr>
                   <td align="right">出生年月：</td>
                   <td>
                       <input type="date" name="date" id="date" />
                   </td>
               </tr>
               
               <tr>
                   <td align="right">我的近照：</td>
                   <td>
                       <input type="file" name="photo" id="photo" />
                   </td>
               </tr>
               
               <tr>
                   <td align="right">郵箱：</td>
                   <td>
                       <input type="email" name="email" id="email" required="required"/>
                   </td>
               </tr>
               
               <tr>
                   <td align="right">工做年限：</td>
                   <td>
                       <select name="worktime">
                           <option value="0" selected="selected">無</option>
                           <option value="1">1--3</option>
                           <option value="2">3--5</option>
                           <option value="3">5年以上</option>
                       </select>
                   </td>
               </tr>
               
               <tr>
                   <td align="right">身份證：</td>
                   <td>
                       <input type="text" name="PersonID" id="PersonID" /><span id="PersonIDInfo"></span>
                   </td>
               </tr>
               
               <tr>
                   <td align="right">重置：</td>
                   <td>
                       <input type="reset" />
                   </td>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。