利用正则来验证姓名、手机号、身份证号

开发工具与关键技术：Visual Studio 2015   正则
作者：孙水兵
撰写时间：2019年6月27

一、 效果

二、 用到的方法
test：test 方法检查字符串是否与给出的正则表达式模式相匹配，如果是则返回 true，否则就返回 false。
三、 HTML代码
姓名、手机号、身份证号的HTML代码都类似。一个label标签加上一个input标签，然后在input标签下面跟上一个id为tip0的div元素，并设置其为行内元素显示。

  <div class="form-group form-row w-100">
       <label class="col-form-label col-lg-3">姓名:<span style="color:red;">*</span></label>
        <div class="col-lg-7 text-left">
              <input type="text" class="form-control" id="CarOwnerName" name="CarOwnerName"  />
              <div style="display: inline" id="tip0"></div>
         </div>
   </div>

四、 JS代码
1、 验证姓名
这种验证一般都市在对应的input框失去焦点后触发的。因此在姓名的input框失去焦点后的事件中获取到其对应的input框的值。然后利用正则来做姓名验证。姓名一般最少有两个字符（不管是中文姓名还是英文姓名）。还有一些特殊的姓名中间可能会带上“·”，例如卡尔·马克思。因此这些姓名的长度可能会长一点。因此我这设置的长度为2-20之间。其中a-zA-Z匹配的是英文字母，后面的“\u4E00-\u9FA5\uf900-\ufa2d·s”匹配的是中文和“·”。然后利用test方法来检测从姓名input框中获取的到的值是否与上面给出的正则表达式相匹配。如果匹配则让id为tip0的html为字体绿色的“姓名格式正确”，否则为字体为红色的“姓名格式填写错误”。也可以在表单提交里面写上这一判断，匹配就继续往下执行，不匹配这输出提示。
参考：https://blog.csdn.net/sheng_li/article/details/73649071

    $("#CarOwnerName").blur(function () {
            var CarOwnerName = $("#formPassengerCar [name='CarOwnerName']").val();
            //姓名验证
            var CellPoe = /^[a-zA-Z\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
            if (!CellPoe.test(CarOwnerName)) {
                $("#tip0").html("<font color=\"red\" size=\"2\">姓名格式填写错误！</font>");
            } else {
                $("#tip0").html("<font color=\"green\" size=\"2\">姓名格式正确！</font>");
            }
        })

2、 验证手机号
手机号一般是11位数字。手机号的第一位都是数字“1”，第二位通常是数字“3、4、5、7、8”，之后的则在0-9之间。因此正则表达式为“/¹[3,4,5,7,8][0-9]{9}$/”。和验证姓名一样，在姓名的文本框失去焦点之后出发该事件。在该事件中获取值和验证手机号的正则。然后利用test方法来检测从姓名input框中获取的到的值是否与上面给出的正则表达式相匹配。如果匹配则让id为tip1的html为字体绿色的“手机号格式正确”，否则为字体为红色的“手机号信息有误，请输入正确的手机号”。关于评论中的191等一些号段无法验证的问题：我这验证的是一些比较常见的号段，所以没有加入这些，如果要加入的话只需要在[3,4,5,7,8]中再加入,9即可，其他号段类似。而关于1,2345之类的也可以验证成功的解决方案是需要在input标签中加入正则验证，让用户只能输入数字，因为手机号都是由数字组成的，像评论中将,换成 | 的话，1|2345也是可以的，所有比较好的解决方法是在input标签中加入正则验证，让用户只能输入数字，

        //手机号信息验证（11位数）
        $("#CarOwnerPhone").blur(function () {
            var CarOwnerPhone = $("#formPassengerCar [name='CarOwnerPhone']").val();
            //手机号信息验证（11位数）
            var CellPoe = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!CellPoe.test(CarOwnerPhone)) {
                $("#tip1").html("<font color=\"red\" size=\"2\">手机号信息有误，请输入正确的手机号！</font>");
            } else {
                $("#tip1").html("<font color=\"green\" size=\"2\">手机号格式正确！</font>");
            }
        })

解决1,234问题
其中 οnkeyup='this.value=this.value.replace(/\D/gi,"")'是只允许用户输入数字

3、 验证身份证号
首先先定义一个全国地区的对象。用来后面验证前两位数字。然后写一个方法来做正则的判断。

身份证的结构：身份证号码是由十七位数字本体码和一位校验码组成。排列顺序从左至右依次为：六位数字地址码，八位数字出生日期码，三位数字顺序码和一位数字校验码。参考：https://www.jb51.net/article/72189.htm

验证的方法：在验证的方法中首先验证的就是身份证号的长度和格式。利用test方法来检测传入方法的参数是否符合前面17位是数字，最后一位是数字或者“x”的正则，如果不符合，返回提示。如果符合，将最后一位的“x”替换为“a”。然后利用前面定义的全国地区的对象来判断身份证号的前两位。不符合，返回提示。符合，往下判断出生日期。先提取出出生日期中年月日所在的数字并用“-”拼接，然后将“-”替换成“/”。然后判断出生日期。然后验证身份证号是否非法，后面还可以验证性别。

        //验证身份证 
        //1、定义一个全国地区的对象
        var aCity = {
            11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林",
            23: "黑龙江", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西",
            37: "山东", 41: "河南", 42: "湖北", 43: "湖南", 44: "广东", 45: "广西", 46: "海南",
            50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏", 61: "陕西", 62: "甘肃",
            63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外"
        }
        //2、正则表达式判断
        function isCardID(sId) {
            var iSum = 0;
            var info = "";
            if (!/^\d{17}(\d|x)$/i.test(sId)) return "你输入的身份证长度或格式错误";
            sId = sId.replace(/x$/i, "a");
            if (aCity[parseInt(sId.substr(0, 2))] == null) return "你的身份证地区非法";
            sBirthday = sId.substr(6, 4) + "-" + Number(sId.substr(10, 2)) + "-" + Number(sId.substr(12, 2));
            var d = new Date(sBirthday.replace(/-/g, "/"));
            if (sBirthday != (d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate())) return "身份证上的出生日期非法";
            for (var i = 17; i >= 0; i--) iSum += (Math.pow(2, i) % 11) * parseInt(sId.charAt(17 - i), 11);
            if (iSum % 11 != 1) return "你输入的身份证号非法";
            aCity[parseInt(sId.substr(0, 2))] + "," + sBirthday + "," + (sId.substr(16, 1) % 2 ? "男" : "女");//此次还可以判断出输入的身份证号的人性别
            aCity[parseInt]
            return true;
        }

验证身份证号：在身份证号的input框的失去焦点事件中获取到身份证号的input框中的值。然后将其传入进验证身份证号的方法中，并用变量flg接收返回的数据。如果flg==true，则说明身份证验证正确，然后让id为tip2的html为字体绿色的“身份证号正确”，否则为字体为红色的验证身份证号的方法中返回的文字。

        //身份证验证
        $("#CarOwnerIDNum").blur(function () {
            var sId = $("#formPassengerCar [name='CarOwnerIDNum']").val();
            var flg = isCardID(sId);
            if (flg == true) {
                $("#tip2").html("<font color=\"green\" size=\"2\">身份证号正确</font>");
            } else {
                $("#tip2").html("<font color=\"red\" size=\"2\"> " + flg + "</font>");
            }
        })

---

1. 1 ↩︎