JavaScript编程（下篇）

最新推荐文章于 2023-01-06 13:48:46 发布

KeepStruggling

最新推荐文章于 2023-01-06 13:48:46 发布

阅读量577

点赞数 1

分类专栏： JavaScript编程文章标签： JavaScript

本文链接：https://blog.csdn.net/KeepStruggling/article/details/82319285

版权

4.3 正则对象（重点）

用于匹配一个字符串

4.3.1 创建的方式

4.3.1.1 格式

以/开头，以/结尾，中间的部分即正则表达式
```
var reg = /正则表达式/;
```

4.3.1.2 匹配模式

忽略大小写进行比较，有两种写法

var reg = new RegExp("正则表达式","匹配模式");
var reg = /正则表达式/匹配模式;

其中：

匹配模式有一种模式`i`，意思是**忽略大小写**

4.3.1.3 正则基本语法

字符	描述
^	匹配输入字符串的开始位置（边界匹配器的开始标记）
$	匹配输入字符串的结束位置（边界匹配器的结束标记）
{n}	前面的字符恰好n次（数量词）
{n,}	前面的字符至少n次（数量词）
{n,m}	前面的字符n~m次（数量词）
+	前面的字符出现1~n次（至少1次，数量词）
*	前面的字符出现0~n次（数量词）
?	前面的字符出现0~1次（要不不出现，要不只出一次，数量词）
\d	数字（范围词）
\w	匹配包括下划线的任何单词字符。等价于’[A-Za-z0-9_]’，但不包含出下划线的特殊字符如@%等。（范围词）
[a-z]	出现的字符范围是a~z（范围词）
.	匹配任意字符

注：[]内的内容就是前面的字符的取值范围

4.3.2 常用的方法

JS中正则表达式的方法	说明
boolean test(“字符串”)	如果正则表达式匹配字符串，返回true，否则返回false

4.3.3 注意事项（重要）

默认情况下正则对象匹配一个字符串时，只要字符串内容出现指定内容，则视为匹配；
边界匹配器就是排除上述的问题，^后第一个字符视作正则表达式匹配的开头，$前的第一个字符视作正则表达式匹配的结尾。所以建议正则表达式都写上边界匹配器；
任何字符如果没有数量词的搭配都只能匹配一个字符。

4.3.4 综合案例

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

用户名：只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
密码：大小写字母和数字6-20个字符
确认密码：两次密码要相同
电子邮箱: 符合邮箱地址的格式
手机号：/^1[34578]\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])$/
只有所有信息都满足要求，且密码与确认密码都一致时才能提交表单

<!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;
         }
        </style>
        <script type="text/javascript">

            //检查用户名
            function checkUser() {
     
                //获得输入的用户名
                var userName = document.getElementById("user").value;   //根据id获取对应的元素，然后再获取文本框输入的内容（value）
                //获得span对象
                var span = document.getElementById("userSpan");
                //用户名对应的正则表达式
                var reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
                if (reg.test(userName)) {
     
                    span.innerHTML="<font color='green'>正确</font>";
                    return true;
                } else {
     
                    span.innerHTML="<font color='red'>错误</font>";
                    return false;
                }
            }

            //检查密码
            function checkPass() {
     
                //获得输入的密码
                var userPassword = document.getElementById("pwd").value;
                //获得span对象
                var span = document.getElementById("passSpan");
                //密码对应的正则表达式
                var reg = /^[a-zA-Z0-9]{6,20}$/;
                if (reg.test(userPassword)){
     
                    span.innerHTML="<font color='green'>正确</font>";
                    return true;
                } else {
     
                    span.innerHTML="<font color='red'>错误</font>";
                    return false;
                }
            }

            //检查确认密码
            function checkRePass() {
     
                //获得输入的密码
                var userPassword = document.getElementById("pwd").value;
                //获得输入的确认密码
                var userRePass = document.getElementById("repwd").value;
                //获得span对象
                var span = document.getElementById("RepassSpan");
                if (userPassword==userRePass){
     
                    span.innerHTML="<font color='green'>正确</font>";
                    return true;
                } else {
     
                    span.innerHTML="<font color='red'>错误</font>";
                    return false;
                }
            }

            //检查邮箱
            function checkEmail() {
     
                //获得输入的用户名
                var userEmail = document.getElementById("email").value;   //根据id获取对应的元素，然后再获取文本框输入的内容（value）
                //获得span对象
                var span = document.getElementById("emailSpan");
                //邮箱对应的正则表达式
                var reg = /^[a-zA-Z1-9][a-zA-Z0-9]+@[a-zA-Z1-9]{2,}(\.[a-z]{2,3}){1,2}$/;
                if (reg.test(userEmail)) {
     
                    span.innerHTML="<font color='green'>正确</font>";
                    return true;
                } else {
     
                    span.innerHTML="<font color='red'>错误</font>";
                    return false;
                }
            }

            //检查手机号
            function checkPhone() {
     
                //获得输入的用户名
                var userPhone = document.getElementById("mobile").value;
                //获得span对象
                var span = document.getElementById("mobileSpan");
                //手机号对应的正则表达式
                var reg = /^1[34578]\d{9}$/;
                if (reg.test(userPhone)) {
     
                    span.innerHTML="<font color='green'>正确</font>";
                    return true;
                } else {
     
                    span.innerHTML="<font color='red'>错误</font>";
                    return false;
                }
            }
            //检查生日
            function checkBirth()

最低0.47元/天解锁文章

KeepStruggling

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript编程（下篇）

4.3 正则对象（重点）用于匹配一个字符串4.3.1 创建的方式4.3.1.1 格式以/开头，以/结尾，中间的部分即正则表达式var reg = /正则表达式/;4.3.1.2 匹配模式忽略大小写进行比较，有两种写法var reg = new RegExp(&quot;正则表达式&quot;,&quot;匹配模式&quot;);var reg = /正则表达式/匹配
复制链接

扫一扫