正则表达式的应用

最新推荐文章于 2024-06-27 20:45:00 发布

sem00000

最新推荐文章于 2024-06-27 20:45:00 发布

阅读量300

点赞数

分类专栏：前端 JavaScript+jQuery 文章标签： javascript 正则表达式 js

本文链接：https://blog.csdn.net/sem00000/article/details/105072773

版权

前端同时被 2 个专栏收录

16 篇文章 5 订阅

订阅专栏

JavaScript+jQuery

2 篇文章 0 订阅

订阅专栏

了解了如何定义一个正则表达式，那么在实际的工作应用中，经常使用正则表达式验证哪些内容呢？针对新用户注册页面，需要验证的内容有用户名、密码、电子邮箱、手机号码、身份证号码、生日、邮政编码、固定电话等，主要是检查输入的内容是否是中文字符、英文字母、数字、下划线等，以及对输入内容的长度验证。例如，用户名是否只有中文字符、英文字母、数字及下划线，手机号码是否由数字组成，身份证号码的长度是否是15位或18位，以及是否全由数字组成。

上面我们看到的是网页中经常用到的验证内容，那么如何编写正则表达式来实现呢？例如，邮政编码、手机号码的验证，中国的邮政编码都是六位，而手机号码都是11位，并且第一位都是1，因此对邮政编码和手机号码进行验证的正则表达式如下。

var regCode=/^\d{6}$//;
var regMobile=/^l\d{10}$/;

验证邮政编码和手机号码的代码如示例9所示。
【示例】　验证邮编和手机号码

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>验证邮编和手机号码</title>
        <style type="text/css">
            body {line-height: 25px; }
            input {width: 120px; height: 16px; }
            div {color: #F00; font-size: 12px; display: inline-block;padding-left: 5px;}
            ul, li {list-style: none; }
        </style>
    </head>
    <body>
        <ul>
            <li>邮政编码：<input id="code" type="text" />
                <div id="divCode"></div>
            </li>
            <li>手机号码：<input id="mobile" type="text" />
                <div id="divMobile"></div>
            </li>
        </ul>
        <script src="js/jquery-1.12.4.js"></script>
        <script>
            $(document).ready(function() {
                $("#code").blur(function() {
                    var code = $(this).val();
                    var $codeId = $("#divCode");
                    var regCode = /^\d{6}$/;
                    if(regCode.test(code) == false) {
                        $codeId.html("邮政编码不正确，请重新输入");
                        return false;
                    }
                    $codeId.html("");
                    return true;
                });
                $("#mobile").blur(function() {
                    var mobile = $(this).val();
                    var $mobileId = $("#divMobile");
                    var regMobile = /^1\d{10}$/;
                    if(regMobile.test(mobile) == false) {
                        $mobileId.html("手机号码不正确，请重新输入");
                        return false;
                    }
                    $mobileId.html("");
                    return true;
                });
            });
        </script>
    </body>
</html>

在浏览器中运行示例，如果在邮政编码输入框中输入的不全是数字或长度不是六位，均提示错误；如果在手机号码输入框中输入的不全是数字，或第一位不是1，或长度不是11位，均提示错误。

以上使用正则表达式验证了手机号码和邮政编码，但是这只是规定了字符串的长度及字符串中某一位上的数字的范围，如果要对年龄进行验证，则年龄必须为0~120，该如何编写正则表达式呢？
思路分析
(1) 10-99这个范围都是两位数，十位是1-9，个位是0-9，正则表达式为[1-9]\d。
(2) 0~9这个范围是一位数，正则表达式为\d。
(3) 100~119这个范围是三位数，百位是1，十位是0~1，个位是0~9，正则表达式为1[0-1]\d。
(4) 根据以上可知，所有年龄的个位都是0~9，当百位是1时，十位是0~1，当年龄为两位数时十位是1~9，因此0~119这个范围的正则表达式为(1[0-1]|[1-9])?\d。
(5) 年龄为120是单独的一种情况，需要单独列出来。
根据思路分析，^和$限制了匹配单独的一行，使用正则表达式验证年龄的完整代码如示例10所示。

【示例】　验证年龄

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证年龄</title>
    <style type="text/css">
        span{color: #ff0000; padding-left: 5px; font-size: 12px;}
    </style>
</head>
<body>
   年龄： <input id="age" type="text"/><span id="divAge"></span>
   <script  src="js/jquery-1.12.4.js"></script>
   <script>
       $(document).ready(function(){
           $("#age").blur(function(){
               var age = $(this).val();
               var $ageId = $("#divAge");
                var regAge = /^120$|^((1[0-1]|[1-9])?\d)$/m;
               if (regAge.test(age) == false) {
                   $ageId.html("年龄不正确，请重新输入");
                   return false;
               }
               $ageId.html("");
               return true;
           });
       });
   </script>
</body>
</html>

上述校验年龄的正则表达式，对于"01"、“012”、“0012"这样的数字，校验结果是不合法的，这样的结果对用户来说似乎有些苛刻，毕竟在正常年龄前多个0，仍然是个正确的年龄数字，因此可以进一步修改前面的正则表达式，允许开头有任意个0，可以表示为”[0]*"，完整验证年龄的正则表达式则变成"^[0]*(120|((1[0-1]|[1-9])?\d))$ "。

从前面的示例可以看出，结果要匹配得越精确，则编写的正则表达式就越复杂。编写一个复杂的表达式，应该先分解问题，从简单的表达式开始，然后组合成复杂的表达式。

到这里为止，我们学习了什么是正则表达式及如何定义一个正则表达式，并且使用正则表达式进行了简单的验证。下面我们综合运用以上所学的知识，验证一个用户的注册页面，学习并巩固复杂正则表达式的验证技术。

超全面的测试IT技术课程，0元立即加入学习！有需要的朋友戳：

腾讯课堂测试技术学习地址

欢迎转载，但未经作者同意请保留此段声明，并在文章页面明显位置给出原文链接。

sem00000

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
正则表达式的应用

了解了如何定义一个正则表达式，那么在实际的工作应用中，经常使用正则表达式验证哪些内容呢？针对新用户注册页面，需要验证的内容有用户名、密码、电子邮箱、手机号码、身份证号码、生日、邮政编码、固定电话等，主要是检查输入的内容是否是中文字符、英文字母、数字、下划线等，以及对输入内容的长度验证。例如，用户名是否只有中文字符、英文字母、数字及下划线，手机号码是否由数字组成，身份证号码的长度是否是15位或18位...
复制链接

扫一扫

专栏目录