Jquery中的正则表达式

最新推荐文章于 2021-10-10 22:59:46 发布

yuzhang_zy

最新推荐文章于 2021-10-10 22:59:46 发布

阅读量1.9w

点赞数 8

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_39445165/article/details/86531782

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 在使用表单提交数据的时候由于输入的数据可能不合法，所以在表单提交或者文本框发生变化的时候来校验数据是否符合规定的要求，假如不符合要求，那么需要提示错误信息给用户，让用户重新输入，并且return false让表单不能够提交到控制器中

2. 这里我们使用Jquery来调用表单文本框内容改变的监听函数：change()，当文本框内容改变的时候进行数据校验，所以这里涉及到了正则表达式的书写，下面是常用的几种匹配方式：

^ 以...开头

$ 以...结尾

* 匹配前面的表达式任意次

+ 匹配前面的表达式一次或者多次，相当于{0,}

{n} 匹配确定的n次

{n，} 至少匹配n次

{m，n} 最少匹配m次且最多匹配n次

\d 匹配数字0-9

[a-z] 匹配小写字母

[A-Z] 匹配大写字母

[a-zA-Z]匹配任意字母

[0-9] 匹配数字

x|y 匹配符合x条件或者y条件

...还有一些是不太常用的匹配

3. 这里特别要注意的是假如匹配表单上中存在着|运算符的时候特别是匹配的内容处于中间的时候，比如就像下面的邮箱的匹配，@后面可以是若干位的数字或者字母，这时候匹配的内容处于中间的时候一定要加上括号，例如x|y 加上括号：(x|y)，所以像下面这样加：

var regEmail = /^\d{10,12}@(\d{3}|[a-zA-Z]{2,4}).[a-zA-Z]{2,3}$/;

不能像下面这样加：像下面这样加括号跟没加是一样，理解它的意思满足前面的条件或者满足后面的条件这样前面限制10-12位数字的条件就没有用了，只要后面的条件[a-zA-Z]{2,3}).[a-zA-Z]{2,3}$部分匹配也会满足匹配条件，这样的匹配是错误的，所以在使用|的时候特别注意一定要加上括号的问题

regEmail = /^\d{10,12}@(\d{2,3})|([a-zA-Z]{2,3}).[a-zA-Z]{2,3}$/;

4. 下面是具体的测试用例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
    </head>
    <body>
        <input type="text" name="stuId" id="stuId"/><br /><br />
        <input type="text" name="name" id="name"/><br /><br />
        <input type="text" name="age" id="age"/><br /><br />
        <input type="text" name="connect" id="connect"/><br /><br />
        <input type="text" name="email" id="email"/><br /><br />
    </body>
    <script type="text/javascript">
        /*获取相关的文本值进行校验*/
        /*匹配以20开头0或者1的1位数字0-6的1位数字剩下0-9之间的6位数字*/
        var regStuId = /^20[0-1]{1}[0-6]{1}[0-9]{6}$/;
        $("#stuId").change(function(){
            if(!regStuId.test($("#stuId").val())){
                alert("学号输入不正确");
            }    
        });

        /*匹配以数字或者字母开头并且位数在2-5位或者2-5位的中文*/
        var regName =  /(^[a-zA-Z0-9]{2,5}$)|(^[\u2E80-\u9FFF]{2,5}$)/;
        $("#name").change(function(){
            if(!regName.test($("#name").val())){
                alert("名字输入不符合要求");
            }    
        });
        
        /*匹配2位的数字*/
        var regAge = /^[1-9]{2}$/;
        $("#age").change(function(){
            if(!regAge.test($("#age").val())){
                alert("年龄输入不符合要求");
            }    
        });    
        
        /*匹配以13开头的总的位数为11位的数字*/
        var regConnect = /^13\d{9}$/;
        $("#connect").change(function(){
            if(!regConnect.test($("#connect").val())){
                alert("联系方式输入不符合要求");
            }    
        });
        
        /*匹配以10-12位数字开头@三位数字或者2-4位的字母.2-3位的结尾的字母*/
        /*使用|运算符的时候特别要注意要加上括号要不然在匹配的时候就会出现错误*/
        var regEmail = /^\d{10,12}@(\d{3}|[a-zA-Z]{2,4}).[a-zA-Z]{2,3}$/;
        /*假如不加上括号那么|那么只会匹配[a-zA-Z]{2,3}.[a-zA-Z]{2,3}的一部分*/
        /*regEmail = /^\d{10,12}@\d{2,3}|[a-zA-Z]{2,3}.[a-zA-Z]{2,3}$/;*/
        $("#email").change(function(){
            if(!regEmail.test($("#email").val())){
                alert("邮箱输入不符合要求");
            }    
        });    
    </script>
</html>

yuzhang_zy

关注

8
点赞
踩
24

收藏

觉得还不错? 一键收藏
1
评论
Jquery中的正则表达式

1. 在使用表单提交数据的时候由于输入的数据可能不合法，所以在表单提交或者文本框发生变化的时候来校验数据是否符合规定的要求，假如不符合要求，那么需要提示错误信息给用户，让用户重新输入，并且return false让表单不能够提交到控制器中2. 这里我们使用Jquery来调用表单文本框内容改变的监听函数：change()，当文本框内容改变的时候进行数据校验，所以这里涉及到了正则表达式的书写，下面...
复制链接

扫一扫