正则表达式

最新推荐文章于 2022-09-05 20:45:58 发布

专注一生i

最新推荐文章于 2022-09-05 20:45:58 发布

阅读量371

点赞数

分类专栏：正则表达式 JavaScript 文章标签：正则表达式

本文链接：https://blog.csdn.net/qq_26304015/article/details/109478965

版权

JavaScript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

正则表达式

1 篇文章 0 订阅

订阅专栏

正则表达式的规则

目标

了解正则表达式的规则

引入

提问：如果要验证一个手机号码，我们以前应该如何写代码？

判断是否全是数字，isNaN
长度要是11个字符
必须以1开头，第2个数字是345789，后面的数字随意

正则表达式作用

用于校验一个字符串是否匹配规则
查找字符

回顾正则表达式的规则

符号	作用
[a-z]	中括号表示1个字符，a-z中任意一个字符
[xyz]	x或y或z，三个字符一个
[^xyz]	除了xyz之外的任意字符
\d	数字
\w	单词，相当于[a-zA-Z0-9_]
.	任意字符，如果要匹配点号需要转义 \.
()	分组
{n}	前面的字符出现n次
{n,}	前面的字符出现大于等于n次
{n,m}	前面的字符出现n次到m之间的次数，包头包尾
+	前面的字符出现1~n次
*	前面的字符出现0~n次
?	前面的字符出现0~1次
\|	多组字符串选择1个
^	匹配开头
$	匹配结尾

小结

正则表达式主要有哪两个作用？

1. 判断字符串是否匹配
2. 查找字符串</span>

使用正则表达式

目标

创建正则表达式有哪2种方式

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
</head>
<body>
<script type="text/javascript">
    /**
     * 创建正则表达式的2种方式：
     * 1. new RegExp("正则表达式")
     * 2. /正则表达式/
     *
     * 判断正则表达式是否匹配字符串的方法：
     * boolean 正则表达式对象.test(字符串) 如果匹配返回true，否则返回false
     * 与Java不同，Java默认是精确匹配。JS默认是模糊匹配，只要包含这个正则表达式的内容就可以
     * 结论：如果要在JS中精确匹配，必须以^开头，以$结尾
     */
    var reg = new RegExp("\\d{3}");  //包含3个连续的数字
    document.write(reg.test("123") + "<br/>");  //true
    document.write(reg.test("abc") + "<br/>");  //false
    document.write(reg.test("a123b") + "<br/>");  //true
    document.write("<hr/>");

    var reg = new RegExp("^\\d{3}");  //匹配3个数字开头
    document.write(reg.test("a123b") + "<br/>");  //false
    document.write(reg.test("123b") + "<br/>");  //true

    document.write("<hr/>");
    var reg = new RegExp("\\d{3}$");  //匹配3个数字结尾
    document.write(reg.test("a123") + "<br/>");  //true

    document.write("<hr/>");
    var reg = new RegExp("^\\d{3}$");  //精确匹配，必须匹配3个数字
    document.write(reg.test("123abc123") + "<br/>");  //false
    document.write(reg.test("456") + "<br/>");  //true

    /*
    使用第2种写法
     */
    var reg = /^\d{3}$/;
    document.write(reg.test("456") + "<br/>");  //true
</script>
</body>
</html>

两种方式的区别

方式一：正则表达式是做为字符串参数出现的，可以定义成变量，可以进行字符串拼接，相对更加灵活。但\等字符需要转义。
方式二：本身是一个正则表达式对象，\等字符不需要转义。

匹配模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式匹配模式</title>
</head>
<body>
<script type="text/javascript">
    /*
    i 忽略大小写比较
    1. new RegExp("正则表达式","匹配模式")
    2. /正则表达式/匹配模式
     */
    var reg = new RegExp("cat","i");
    document.write(reg.test("cat") + "<br/>");  //true
    document.write(reg.test("CAT") + "<br/>");  //true
    document.write("<hr/>");

    var reg = /cat/i;
    document.write(reg.test("cat") + "<br/>");  //true
    document.write(reg.test("CAT") + "<br/>");  //true
</script>
</body>
</html>

小结

判断正则表达式与字符串是否匹配的方法是？

boolean 正则表达式对象.test(字符串)
如果匹配返回true

案例：校验注册表单

目标

onsubmit事件说明

onsubmit事件，如果return false就可以阻止表单提交

案例需求

用户注册，需要进行如下验证，请在JS中使用正则表达式进行验证。

用户名：只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
密码：大小写字母和数字6-20个字符
确认密码：两次密码要相同
电子邮箱: 符合邮箱地址的格式 /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/
手机号：/^1[3456789]\d{9}$/
生日：生日的年份在1900～2009之间，生日格式为1980-5-12或1988-05-04的形式，/^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/

案例分析

创建正则表达式
得到文本框中输入的值
如果不匹配，在后面的span中显示错误信息，返回false
如果匹配，在后面的span中显示一个打勾图片，返回true
写一个验证表单中所有的项的方法，所有的方法都返回true，这个方法才返回true.

代码

<!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>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            font-size: 12px;
            line-height: 20px;
        }

        .main {
            width: 525px;
            margin-left: auto;
            margin-right: auto;
        }

        .hr_1 {
            font-size: 14px;
            font-weight: bold;
            color: #3275c3;
            height: 35px;
            border-bottom-width: 2px;
            border-bottom-style: solid;
            border-bottom-color: #3275c3;
            vertical-align: bottom;
            padding-left: 12px;
        }

        .left {
            text-align: right;
            width: 80px;
            height: 25px;
            padding-right: 5px;
        }

        .center {
            width: 280px;
        }

        .in {
            width: 130px;
            height: 16px;
            border: solid 1px #79abea;
        }

        .red {
            color: #cc0000;
            font-weight: bold;
        }

        div {
            color: #F00;
        }

        span {
            color: red;
        }
    </style>
    <script type="text/javascript">
        /**
         * 校验所有的表单项
         */
        function checkAll() {
            return checkUser() && checkMobile();
        }

        /**
         * 检查用户名是否正确
         * 由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
         */
        function checkUser() {
            //1.得到文本框的值
            let value = document.getElementById("user").value;
            //2.创建正则表达式
            let reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
            //3.比较正则表达式与文本框的值是否匹配
            if (reg.test(value)) {
                //4.如果匹配就通过，在后面显示打勾的图片，返回true
                document.getElementById("userInfo").innerHTML = "<img src='img/gou.png' width='15'/>";
                return true;
            } else {
                //5.如果不匹配，在后面显示错误信息，返回false
                document.getElementById("userInfo").innerHTML = "用户名格式有误";
                return false;
            }
        }

        /**
         * 判断手机号
         */
        function checkMobile() {
            //1.得到文本框的值
            let value = document.getElementById("mobile").value;
            //2.创建正则表达式
            let reg = /^1[3456789]\d{9}$/;
            //3.比较正则表达式与文本框的值是否匹配
            if (reg.test(value)) {
                //4.如果匹配就通过，在后面显示打勾的图片，返回true
                document.getElementById("mobileInfo").innerHTML = "<img src='img/gou.png' width='15'/>";
                return true;
            } else {
                //5.如果不匹配，在后面显示错误信息，返回false
                document.getElementById("mobileInfo").innerHTML = "手机格式有误";
                return false;
            }
        }
    </script>
</head>

<body>
<!--  onsubmit事件，如果return false就可以阻止表单提交-->
<form action="server" method="post" id="myform" onsubmit="return checkAll()">
    <table class="main" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td><img src="img/logo.jpg" alt="logo"/><img src="img/banner.jpg" alt="banner"/></td>
        </tr>
        <tr>
            <td class="hr_1">新用户注册</td>
        </tr>
        <tr>
            <td style="height:10px;"></td>
        </tr>
        <tr>
            <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <!-- 不能为空， 输入长度必须介于 5 和 10 之间 -->
                        <td class="left">用户名：</td>
                        <td class="center">
                            <!--文本框失去焦点进行验证-->
                            <input id="user" name="user" type="text" class="in" onblur="checkUser()"/>
                            <span id="userInfo"></span>
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能为空， 输入长度大于6个字符 -->
                        <td class="left">密码：</td>
                        <td class="center">
                            <input id="pwd" name="pwd" type="password" class="in"/>
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能为空， 与密码相同 -->
                        <td class="left">确认密码：</td>
                        <td class="center">
                            <input id="repwd" name="repwd" type="password" class="in"/>
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能为空， 邮箱格式要正确 -->
                        <td class="left">电子邮箱：</td>
                        <td class="center">
                            <input id="email" name="email" type="text" class="in"/>
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能为空， 使用正则表达式自定义校验规则,1开头，11位全是数字 -->
                        <td class="left">手机号码：</td>
                        <td class="center">
                            <input id="mobile" name="mobile" type="text" class="in" onblur="checkMobile()"/>
                            <span id="mobileInfo"></span>
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能为空， 要正确的日期格式 -->
                        <td class="left">生日：</td>
                        <td class="center">
                            <input id="birth" name="birth" type="text" class="in"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="left">&nbsp;</td>
                        <td class="center">
                            <input name="" type="image" src="img/register.jpg"/>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</form>
</body>
</html>

小结

表单提交的时候会激活哪个事件？onsubmit
能够使用正则表达式进行表单的验证

创建正则表达式格式：

new RegExp("正则表达式","匹配模式")
/正则表达式/匹配模式

正则表达式的判断方法：

boolean 正则表达式.test(字符串)

专注一生i

关注

0
点赞
踩
0

收藏

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

正则表达式的规则目标了解正则表达式的规则引入提问：如果要验证一个手机号码，我们以前应该如何写代码？判断是否全是数字，isNaN 长度要是11个字符必须以1开头，第2个数字是345789，后面的数字随意正则表达式作用用于校验一个字符串是否匹配规则查找字符回顾正则表达式的规则符号作用 [a-z] 中括号表示1个字符，a-z中任意一个字符 [xyz] x或y或z，三个字符一个 [^xyz].
复制链接

扫一扫