View Code

手机号、身份证号验证是否正确

现在有许多项目,都需要填写一些详细的东西,比如手机号,身份证号等,一般小项目的话,不需要那么严谨,简单的判断一下就好,这时候就用到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>  

 

posted @ 2017-07-14 17:09  风中摇曳的小花朵  阅读(783)  评论(2编辑  收藏  举报