JavaScript学习笔记- 正则表达式常用验证

  <div>
         <h1>一、判断中国邮政编码匹配</h1>
         <p>分析：中国邮政编码都是6位，且为纯数字</p>
         <div>邮政编码：<input id="Postcode" type="text" onblur="checkPost();" /></div>
         <div id="Prompt"></div>
     </div>
     <script type="text/javascript">
         function checkPost() {
             var Post = document.getElementById("Postcode").value;  //获取输入框的值
             var Prom = document.getElementById("Prompt");          //获取提示栏
             var regPost = /^\d{6}$/;  //解释：匹配数字6次，且开头到结尾都为数字
             var isPost = regPost.test(Post); //测试 Post 是否符合 regPost 的规则，是则返回true，不是则返回false
             if (isPost == false) {
                 Prom.innerHTML = "请输入正确的邮政编码";
                 return false;
             }
             Prom.innerHTML = "";
             return true;
         }
     </script>

 <div>
         <h1>一、判断中国手机号</h1>
         <p>分析：中国手机号都是11位，且为纯数字</p>
         <div>手机号：<input id="Mobile" type="text" onblur="checkMobile();" /></div>
         <div id="PromptM"></div>
     </div>
     <script type="text/javascript">
         function checkMobile() {
             var Mobile = document.getElementById("Mobile").value;  //获取输入框的值
             var PromM = document.getElementById("PromptM");        //获取提示栏
             if (Mobile.length != 11) { //首先判断其必须为11位
                 PromM.innerHTML = "请输入11位手机号";
                 return false
             }
             /**分析：
               * 手机号码:
               * 13[0-9], 14[5,7], 15[0, 1, 2, 3, 5, 6, 7, 8, 9], 17[0, 1, 6, 7, 8], 18[0-9]
               * 移动号段: 134,135,136,137,138,139,147,150,151,152,157,158,159,170,178,182,183,184,187,188
               * 联通号段: 130,131,132,145,152,155,156,170,171,176,185,186
               * 电信号段: 133,134,153,170,177,180,181,189
               分析是在度娘里搜的，随便一搜就出来了很多了，这是2016年最新的
              **/

             var regMobile = /^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\d{8}$/;
             /**解释：
             * ^1         开头为1
             * 3[0-9]     第二位为3，第三位为0-9中的任意数字
             * |4[57]     或第二位为4，第三位为5或7
             * |5[0-35-9] 或第二位为5，第三位为0-3 5-9中的任意数字
             * |7[01678]  或第二位为7，第三位为[...]中的任意数字
             * |8[0-9]    或第二位为8，第三位为0-9中的任意数字
             * \d{8}$     后8为纯数字
             **/
             var isMobile = regMobile.test(Mobile);
             if (isMobile == false) {
                 PromM.innerHTML = "请输入正确的手机号";
                 return false;
             }
             PromM.innerHTML = "";
             return true;
         }
     </script>

 <div>
         <h1>一、判断用户名</h1>
         <p>分析：用户名每个平台的规定不一样，这里按“英文字母和数字组成的4-18为字符，以字母开头”为例</p>
         <div>用户名：<input id="UseName" type="text" onblur="checkUseN();" /></div>
         <div id="PromptU"></div>
     </div>
     <script type="text/javascript">
         function checkUseN() {
             var UseN = document.getElementById("UseName").value;  //获取输入框的值
             var PromU = document.getElementById("PromptU");       //获取提示栏
             if (UseN == "") { //判断用户名不为空
                 PromU.innerHTML = "用户名不能为空"
                 return false;
             }
             var regUseN = /^[A-z][A-z0-9]{3,17}$/;
             /**解释：
               * ^[A-z]  以字母开头
               * [A-z0-9] 后面最少4位字母或数字，最多17个，且以此为结尾
             **/
             var isUseN = regUseN.test(UseN);
             if (isUseN == false) {
                 PromU.innerHTML = "请输入正确的用户名";
                 return false;
             }
             PromU.innerHTML = "";
             return true;
         }
     </script>

  <div>
         <h1>一、判断密码</h1>
         <p>分析：密码每个平台的规则也不尽相同，这里按“英文字母+数字+特殊符号的6-20位字符组成”为例</p>
         <div>密码：<input id="password" type="password" onblur="checkPW();" /></div>
         <div id="PromptPW"></div>
         <div>确认密码：<input id="againpw" type="password" onblur="checkApw();" /></div>
         <div id="PromptApw"></div>

     </div>
     <script type="text/javascript">
         var PW;
         function checkPW() {
             PW = document.getElementById("password").value;         //获取密码输入框的值
             var PromPW = document.getElementById("PromptPW");       //获取提示栏
             if (PW == "") { //判断密码不为空
                 PromPW.innerHTML = "密码不能为空"
                 return false;
             }
             if (PW.length < 6) { //判断密码长度最少6位
                 PromPW.innerHTML = "密码最少为6位字符"
                 return false;
             }
             if (PW.length > 20) { //判断密码长度最多20位
                 PromPW.innerHTML = "密码最多只可以20位字符";
                 return false;
             }
             var zm = /[A-z]/g    //全局查找字母
             if (zm.test(PW) == false) {
                 PromptPW.innerHTML = "密码必须包含至少一位字母"
                 return false;
             }
             var NaN = /\d/g  //全局查找数字
             if (NaN.test(PW) == false) {
                 PromptPW.innerHTML = "密码必须包含至少一位数字"
                 return false;
             }
             var fh = /[^A-z]\D/g   //全局查找非数字与除了字母之外的字符
             if (fh.test(PW) == false) {
                 PromptPW.innerHTML = "密码必须包含至少一位字符"
                 return false;
             }
             PromptPW.innerHTML = ""
             return true;
         }

         function checkApw() {
             var Apw = document.getElementById("againpw").value;    //获取确认密码输入框值
             var PromApw = document.getElementById("PromptApw");    //获取提示栏
             if (Apw == "") { //判断确认密码不为空
                 PromApw.innerHTML = "确认密码不能为空"
                 return false;
             }
             if (Apw !== PW) { //判断确认密码值与密码值必须是否一致
                 PromApw.innerHTML = "两次输入的密码不一致";
                 return false;
             }
             PromApw.innerHTML = "";
             return true;
         }
     </script>

<div>
        <h1>一、判断电子邮件</h1>
        <p>分析：888@qq.com    888@sina.com.cn</p>
        <div>E-mail：<input id="email" type="text" onblur="checkEm();" /></div>
        <div id="PromptEm"></div>
    </div>
    <script type="text/javascript">
        function checkEm() {
            var Em = document.getElementById("email").value;   //获取E-mail输入框值
            var PromEm = document.getElementById("PromptEm");  //获取提示栏
            var regEm = /^[a-zA-Z0-9_-]{1,}@[a-zA-Z0-9_-]{1,}(\.[a-zA-Z]{2,}){1,2}$/;
            /**解释
              * ^[a-zA-Z0-9_-]{1,}   开头可以是字母、数字或“_-”，且1次以上
              * @[a-zA-Z0-9_-]{1,}   接着是“@”，“@”后是可以是字母、数字或“_-”，且字母、数字或“_-”要1次以上
              * (\.[a-zA-Z]{2,})     接着后面应该是“.”，“.”后应为字母，且字母需2次以上
              * {1,2}                像上面这种“.”后面是字母的，最少1次 ，最多只能2次
            **/
            var isEm = regEm.test(Em);
            if (isEm == false) {
                PromEm.innerHTML = "您输入的E-mail地址不合法"
                return false;
            }
            PromEm.innerHTML = "";
            return true;
        }
    </script>

 <div>
         <h1>一、判断出生年月日</h1>
         <p>分析：1997-05-11 19970511 1997-5-2</p>
         <div>出生年月：<input id="Birth" type="text" onblur="checkBth()" /></div>
         <div id="PromptBth"></div>
     </div>
     <script type="text/javascript">
         function checkBth() {
             var Bth = document.getElementById("Birth").value;     //获取出生年月日输入框值
             var PromBth = document.getElementById("PromptBth");   //获取提示栏

             //首先大体判断下是否为正确的年月日格式
             var regBth = /(19\d{2}|200\d{1}|201\d{1})-?(0?[1-9]|1[0-2])-?(0?[1-9]|[1-2]\d|3[0-1])/;
             /**解释
               * (19\d{2}|200\d{1}|201\d{1}) 匹配年份，
                 * 目前能有的年份开头仅有19xx也就是/19\d{2}/ || 200x也就是/200\d{1}/ || 201x也就是/201\d{1}/
               * -?                          可以有-，也可以没有
                 * 这是为符合大部分人的书写习惯，我们加上这个判断，可以让匹配率更高，用户体验也更好
               * (0?[1-9]|1[0-2])            匹配月份，这里的0?与上面的-?是一样的作用
               *(0?[1-9]|[1-2]\d|3[0-1])     匹配日
             **/
             var isBth = regBth.test(Bth);
             if (isBth == false) {
                 PromBth.innerHTML = "请输入正确的出生年月";
                 return false;
             }

             //判断瑞年平年，大小月的年月日格式
             var YearR = /(19\d{2}|200\d{1}|201\d{1})/.exec(Bth)[0] / 4;   //获取年份除以4，为判断是否为瑞平年
             var YearZ = parseInt(YearR);                                  //年份除以4取整，为判断是否为瑞平年
             var month = /^(19\d{2}|200\d{1}|201\d{1})-?(0?[1-9]|1[0-2])/.exec(Bth)[0];  //获取年月

             if (/2$/.test(month) == true) { //判断月份是否为2月
                 if (YearR == YearZ) { //判断是否为瑞年
                     if (/[30-31]$/.test(Bth) == true) { //判断是否有30或31
                         PromBth.innerHTML = "请输入正确的出生年月";
                         return false;
                     }
                 }
                 else if (YearR !== YearZ) { //判断是否为平年
                     if (/(29|30|31)$/.test(Bth) == true) { //判断是否有29或30或31
                         PromBth.innerHTML = "请输入正确的出生年月";
                         return false;
                     }
                 }
             }
             if (/(4|6|9|11)$/.test(month) == true) { //判断月份是否为4、6、9或11月
                 if (/31$/.test(Bth) == true) { //判断是否有31
                     PromBth.innerHTML = "请输入正确的出生年月";
                     return false;
                 }
             }
                 PromBth.innerHTML = "";
                 return true;
             }
     </script>

作者：leona

原文链接：http://www.cnblogs.com/leona-d/p/5950280.html

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接