正则表达式

最新推荐文章于 2023-04-28 10:33:20 发布

罪恶的拓海

最新推荐文章于 2023-04-28 10:33:20 发布

阅读量441

点赞数

本文链接：https://blog.csdn.net/Bulid_Evolto/article/details/99485246

版权

正则表达式体验

目标

学习正则表达式的作用和好处

正则表达式介绍

[外链图片转存失败(img-ptVhokKV-1565706473345)(/)]

请编写一个手机号码规则?

第一位是1
第二位345789中的一位
后面9个0到9的数字

以上是使用中文描述规则，需要自己使用if…else去编程，很麻烦。

什么是正则表达式

正则表达式也称为规则表达式

"1[345789][0-9]{9}"

正则表达式的使用

定义正则表达式对象
调用方法去匹配

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式体验</title>
</head>
<body>
<script>
    // 1.定义正则表达式
    var reg = new RegExp("^1[34578][0-9]{9}$");
    // 2.调用方法去匹配字符串
    var b = reg.test("13838389438");
    alert("是否是手机号: " + b);
</script>
</body>
</html>

正则表达式作用

判断一个字符串是否符合指定的规则
使用正则表达式去一个字符串中查找符合规则的字符串

正则表达式的好处

比我们直接编写if…else去匹配简单很多

小结

说出正则表达式的好处?

比我们直接编写if…else去匹配简单很多

创建正则表达式(重点)

目标

学习创建正则表达式的2种方式

方式1:实例创建方式

RegExp是JS中一个内置对象

var 变量名 = new RegExp("正则表达式规则");

方式2:字面量创建方式

var 变量名 = /正则表达式规则/;

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建正则表达式的2种方式</title>
</head>
<body>
<script>
    // 方式1:实例创建方式
    // RegExp是JS中一个内置对象
    var reg = new RegExp("^\\d{3}" + "1$");

    // 方式2:字面量方式
    var reg2 = /^\d{3}$/;
</script>
</body>
</html>

两种方式的区别

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

小结

创建正则表达式的两种方法？

实例创建方式
var reg1 = new RegExp("规则");

字面量创建方式
var reg2 = /规则/;

正则表达式的规则

目标

了解正则表达式的规则

正则表达式的规则

符号	作用
[xyz]	中括号表示从里面取一个，匹配x或y或z
[a-z]	-表示范围。表示a-z中的一个字母
[^xyz]	在中括号中^ 符号，表示取反。表示：除了xyz之外的字母
\d	数字：相当于[0-9]
\w	单词：相当于[a-zA-Z0-9_]
.	匹配任意字符，相当于通配符。如果要匹配点号，需要转义。 \.
()	表示1组
数量词
{n}	表示前面的字符出现n次
{n,}	表示前面的字符出现大于等于n次
{n,m}	表示前面的字符出现大于等于n次，小于等于m次
+	表示前面的字符出现1~n次
*****	表示前面的字符出现0~n次
?	表示前面的字符出现0~1次
\|	表示多个单词之间选择一个，或者
边界匹配器
^	表示开头
$	表示结尾

这些规则在所有的编程语言中都是一样的

正则表达式的举例

正则表达式	匹配字符串
\d{3}	在JS中默认是模糊匹配，包含3个数字即可：a123b
^\d{3}	匹配以3个数字开头的字符串，比如：123b
\d{3}$	匹配以3个数字结尾的字符串，比如：a123
^\d{3}$	表示严格匹配，必须是3个数字的字符串，比如：123
^ab{2}$	匹配a后面出现2个b的字符串，比如：abb
^ab{2,}$	匹配a后面至少出现2个b的字符串，比如：abb 或 abbb 或 abbbb
^ab{3,5}$	匹配a后面出现3到5个b的字符串，比如：abbb或abbbb或abbbbb
^ab+$	匹配a后面出现1到n个b的字符串，比如：ab 或 abb 或 abbb
^ab*$	匹配a后面出现0到n个b 的字符串，比如：a 或 ab 或 abbb
^ab?$	匹配a后面出现0到1次b的字符串，比如：a 或 ab
hi\|hello	匹配字符串里包含hi或hello的字符串
(b\|cd)ef	匹配字符串包含 bef或cdef的字符串
^.{3}$	匹配任意三个字符的字符串
[^a-zA-Z]	^在中括号中代表取反，匹配⽆无字母的任意⼀一个字符串

匹配模式

[外链图片转存失败(img-AOnzli3c-1565706473349)(/)]

正则表达式的方法

[外链图片转存失败(img-xhMknl4e-1565706473349)(/)]

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    //i表示匹配模式，表示忽略大小写
    //var reg = new RegExp("abc","i");

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

小结

正则表达式规则？

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

案例：使用正则表达式校验注册表单

目标

[外链图片转存失败(img-wEOqMRzx-1565706473349)(/)]

案例需求

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

1.用户名：只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
2.手机号：/^1[34578]\d{9}$/

案例分析

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

onsubmit事件说明

[外链图片转存失败(img-S750CanF-1565706473349)()]

代码

<!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;
        }

        #su,#sm {
            color: red;
        }
    </style>
    <script type="text/javascript">
    </script>
</head>

<body>
<form action="" 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="su"></span>
                            <!--<span id="su">用户名不正确</span>-->
                            <!--<span id="su"><img src="img/gou.png" width="15px"/></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="sm"></span>
                            <!--<span id="sm">手机号不正确</span>-->
                            <!--<span id="sm"><img src="img/gou.png" width="15px"/></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>

<script>
    // 检测用户名是否正确
    function checkUser() {
        // 1.得到文本框中输入的值
        var userName = document.getElementById("user").value;
        // 2.创建正则表达式
        // 1.用户名：只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
        var reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
        var b = reg.test(userName);
        if (b) {
            // 4.如果匹配，在后面的span中显示一个打勾图片，返回true
            document.getElementById("su").innerHTML = "<img src='img/gou.png\' width='15px'/>";
        } else {
            // 3.如果不匹配，在后面的span中显示错误信息，返回false
            document.getElementById("su").innerHTML = "用户名不正确";
        }

        return b;
    }
    
    
    // 检测手机号
    function checkMobile() {
        // 1.得到文本框中输入的值
        var mobile = document.getElementById("mobile").value;
        // 2.创建正则表达式
        var reg = /^1[3456789][0-9]{9}$/;
        var b = reg.test(mobile);
        if (b) {
            // 4.如果匹配，在后面的span中显示一个打勾图片，返回true
            document.getElementById("sm").innerHTML = "<img src=\"img/gou.png\" width=\"15px\"/>";
        } else {
            // 3.如果不匹配，在后面的span中显示错误信息，返回false
            document.getElementById("sm").innerHTML = "手机号不正确";
        }

        return b;
    }
    
    // 检测合格才提交
    function checkAll() {
        return checkUser() && checkMobile();
    }
</script>
</body>
</html>

小结

正则表达式验证字符串的方法是什么？

reg.test(“字符串”);
表单提交的时候会激活哪个事件？

onsubmit = “return true” 提交

onsubmit = “return false” 不提交

罪恶的拓海

关注

0
点赞
踩
1

收藏

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

《JavaScript高级&Bootstrap框架-笔记》正则表达式体验目标学习正则表达式的作用和好处正则表达式介绍请编写一个手机号码规则?第一位是1第二位345789中的一位后面9个0到9的数字以上是使用中文描述规则，需要自己使用if…else去编程，很麻烦。什么是正则表达式正则表达式也称为规则表达式"1[345789][0-9]{9}"正则...
复制链接

扫一扫