手機號、身份證號驗證是否正確 - qishuang－IT工程師數位筆記本

文章出處

現在有許多項目，都需要填寫一些詳細的東西，比如手機號，身份證號等，一般小項目的話，不需要那么嚴謹，簡單的判斷一下就好，這時候就用到js了，先來看一下效果，然后再上源代碼

運行，是這樣一個頁面

我們先隨便輸入一串數字，看看是什么效果

然后我們再輸入一個正確的手機號

在把其中一個數字換成字母試試

通過實驗來看，還是蠻好用的，關鍵代碼簡潔易懂

來看一下代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>

<body style="text-align:center">
手機號：<input  type="text" class="loginuser" placeholder="請輸入您的手機號"  id="uid" onblur="checkPhone()" />
                <span id="uidt" style="margin-left: 100px; color:#F00"></span>
</body>
<script>
 function checkPhone(){
        var phone = document.getElementById('uid').value;
        if(!(/^1[34578]\d{9}$/.test(phone))){
            return document.getElementById('uidt').innerHTML = '請輸入正確的手機號';
            return false;
        }        else{return document.getElementById('uidt').innerHTML = 'ok';}
    }

</script>
</html>

看完了手機號驗證，接下來再來看身份證號

還是先看效果

打開頁面是這樣的

然后還是隨便輸上一串數字

會顯示身份證非法

再隨便輸一個和我身份證相似的身份證號

格式一樣，位數也一樣，但是身份證號還是非法

填一個正確的試試

點擊提交

那個正確的會以get方式提交

感興趣的也可以自己試一下，還是挺好用的，下面來看一下代碼

<!DOCTYPE html>
 <html>
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title>
             身份證號校驗
         </title>
         <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
         </script>
         <script src="http://www.w3cschool.cc/try/demo_source/static/js/jquery.validate.js">
         </script>
         <script type="text/javascript">
             $(function () {
                 $("#form1").validate({
                     rules: {
                         txtIdCard: "isIdCard"
                     }
                 });
             });
             // 身份證號驗證
             function isIdCard(cardid) {
                 //身份證正則表達式(18位)
                 var isIdCard2 = /^[1-9]\d{5}(19\d{2}|[2-9]\d{3})((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])(\d{4}|\d{3}X)$/i;
                 var stard = "10X98765432"; //最后一位身份證的號碼
                 var first = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; //1-17系數
                 var sum = 0;
                 if (!isIdCard2.test(cardid)) {
                     return false;
                 }
                 var year = cardid.substr(6, 4);
                 var month = cardid.substr(10, 2);
                 var day = cardid.substr(12, 2);
                 var birthday = cardid.substr(6, 8);
                 if (birthday != dateToString(new Date(year+'/'+month+'/'+day))) {//校驗日期是否合法
                     return false;
                 }
                 for (var i = 0; i < cardid.length - 1; i++) {
                     sum += cardid[i] * first[i];
                 }
                 var result = sum % 11;
                 var last = stard[result]; //計算出來的最后一位身份證號碼
                 if (cardid[cardid.length - 1].toUpperCase() == last) {
                     return true;
                 } else {
                     return false;
                 }
             }
             //日期轉字符串 返回日期格式20080808
             function dateToString(date) {
                 if (date instanceof Date) {
                     var year = date.getFullYear();
                     var month = date.getMonth() + 1;
                     month = month < 10 ? '0' + month : month;
                     var day = date.getDate();
                     day = day < 10 ? '0' + day : day;
                     return year + month + day;
                 }
                 return '';
             }
             // jquery validate身份證號驗證
             jQuery.validator.addMethod("isIdCard",
             function (value, element) {
                 return this.optional(element) || (isIdCard(value));
             },
             "身份證號非法！");
         </script>
     </head>
     <body>
         <form id="form1" method="get" action="">
            請輸入身份證號： <input type="text" id="txtIdCard" name="txtIdCard" />
             <p>
                 <input class="submit" type="submit" value="提交" />
             </p>
         </form>
     </body>
 </html>