正则表达式

最新推荐文章于 2022-09-01 08:29:07 发布
最新推荐文章于 2022-09-01 08:29:07 发布
阅读量148 收藏
点赞数 1
分类专栏： # H5 & JS 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/asdasd1fdsyrt/article/details/117464418
版权

1.概念
正则表达式是字符模式的对象、主要用来验证客户端的输入数据、。用户填写完表单单击按钮之后，表单就会被发送到服务器，在服务器端通常会用Java 、PHP、等服务器脚本对其进行进一步处理。因为客户端验证，可以节约大量的服务器端的系统资源，并且提供更好的用户体验

2、正则语法

2.1 创建正则

new

var box = new RegExp('box'); 	   //第一个参数 字符串
var box = new RegExp('box', 'ig'); //第二个参数 可选模式修饰符

不要加引号

var box = /box/; 	//直接用两个反斜杠
var box = /box/ig;  //在第二个斜杠后面加上模式修饰符

模式修饰符
在这里插入图片描述
2.2、测试正则表达式
在这里插入图片描述
示例

/*new创建正则· 运算符的test()示例*/
  var pattern = new RegExp('box', 'i');    //创建正则模式，不区分大小写
  var str = 'This is a Box!';              //字符串
  alert(pattern.test(str));                //通过test()方法验证是否匹配

  /*使用字面量方式的test 方法示例*/
  var pattern = /box/i;                   //创建正则模式，不区分大小写
  var str = 'This is a Box!';
  alert(pattern.test(str));
  
  /*一条语句实现正则匹配*/
  alert(/box/i.test('This is a Box!'));
  
  /*使用exec 返回匹配数组*/
  var pattern = /box/i;
  var str = 'This is a Box!';
  alert(pattern.exec(str));               //匹配了返回数组，否则返回null

2.3 使用字符串的正则表达式方法
在这里插入图片描述

/*使用match()获取获取匹配数组*/
  var pattern = /box/ig;              //忽略大小写全局搜索
  var str = 'This is a Box!，That is a Box too';
  alert(str.match(pattern));          //匹配到两个Box,Box
  alert(str.match(pattern).length);   //获取数组的长度2
  
  /*使用search()来查找匹配数据*/
  var pattern = /box/ig;
  var str = 'This is a Box!，That is a Box too';
  alert(str.search(pattern));         //查找到返回位置，否则返回-1
  //search(正则)查找到即返回，也就是说无需g 全局
  
  /*replace()替换匹配到的数据*/
  var pattern = /box/ig;
  var str = 'This is a Box!，That is a Box too';
  alert(str.replace(pattern, 'Tom'));     //将Box 替换成了Tom
  
  /*split()拆分成字符串数组*/
  var pattern = / /ig;
  var str = 'This is a Box!，That is a Box too';
  alert(str.split(pattern));              //将空格拆开分组成数组

2.4 正则表达式元字符

常用元字符
在这里插入图片描述
常用限定符
在这里插入图片描述
常用反义词
在这里插入图片描述
元字符
在这里插入图片描述
**示例 **

<script>
    window.onload = function () {
        // 校验用户名必须是 4~12 位字母数字下划线的组合, 不能以数字开头
        // [0-9]用\d表示   [a-zA-Z_0-9]用\w表示
        var regex = /^[a-zA-Z]\w{3,11}$/;
        var result = regex.test("Jack_xie");
        if (result == true) {
            alert("用户名可用.");
        } else {
            alert("请更换用户名.");
        }
        
    }
</script>

示例 表单验证
在这里插入图片描述

<body>
    <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" width="350px" />
                </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>
                            <!-- 长度为4～16个字符，并且以英文字母开头 -->
                            <td class="left">用户名：</td>
                            <td class="center">
                                <input id="user" name="user" type="text" class="in" onblur="checkUser()"/>
                                <span style="color: red" id="userInfo"></span>
                            </td>
                        </tr>
                        <tr>
                            <!-- 不能为空， 输入长度大于6个字符 -->
                            <td class="left">密码：</td>
                            <td class="center">
                                <input id="pwd" name="pwd" type="password" class="in" onblur="checkPassword()"/>
                                <span style="color: red" id="pwdInfo"></span>
                            </td>
                        </tr>
                        <tr>
                            <!-- 不能为空， 与密码相同 -->
                            <td class="left">确认密码：</td>
                            <td class="center">
                                <input id="repwd" name="repwd" type="password" class="in" onblur="checkRepassword()"/>
                                <span style="color: red" id="repwdInfo"></span>
                            </td>
                        </tr>
                        <tr>
                            <!-- 不能为空， 邮箱格式要正确 -->
                            <td class="left">电子邮箱：</td>
                            <td class="center">
                                <input id="email" name="email" type="text" class="in" onblur="checkMail()"/>
                                <span id="emailInfo" style="color: red;"></span>
                            </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" style="color: red;"></span>
                            </td>
                        </tr>
                        <tr>
                            <!-- 不能为空， 要正确的日期格式 -->
                            <td class="left">生日：</td>
                            <td class="center">
                                <input id="birth" name="birth" type="text" class="in" onblur="checkBirth()"/>
                                <span id="birthInfo" style="color: red;"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="left">&nbsp;</td>
                            <td class="center">
                                <input type="image" src="../img/register.jpg" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </form>
</body>

<script>
    // 检查所有 : 控制了表单的提交事件
    function checkAll() {
        return checkUser() && checkMail() && checkPassword() 
        && checkRepassword() && checkMobile() && checkBirth();
    }
 
    // 校验用户名
    function checkUser() {
        //长度为4～16个字符并以英文字母开头
        var regex = /^[a-zA-Z]\w{3,15}$/;
        return regexMethod(regex, "user");
    }

    // 校验密码
    function checkPassword() {
        var regex = /^[a-zA-Z0-9]{6,20}$/;
        return regexMethod(regex, "pwd");
    }
 
    // 校验邮箱
    function checkMail() {
        //不能为空， 邮箱格式要正确
        var regex = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
        return regexMethod(regex, "email");
    }
 
    // 校验重复密码
    function checkRepassword() {
        //获取两次密码的数值
        var pwd = document.getElementById("pwd").value;
        var repwd = document.getElementById("repwd").value;
        //判断
        if (pwd != repwd) {
            document.getElementById("repwdInfo").innerHTML = "两次密码不一致";
            return false;
        }
        document.getElementById("repwdInfo").innerHTML = "<img src='../img/gou.png' width='15px' />";
        return true;
    }
 
    // 校验手机号码
    function checkMobile() {
        var regex = /^1[34578]\d{9}$/;
        return regexMethod(regex, "mobile");
    }
 
    // 校验生日
    function checkBirth() {
        // 1988-09-01   ·2008-12-31
        var regex = /^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/; // type=date
        return regexMethod(regex, "birth");
    }
 
    //定义函数
    function regexMethod(regex, name) {
        var value = document.getElementById(name).value;
        if (regex.test(value) == false) {
            document.getElementById(name + "Info").innerHTML = "格式不正确!";
            return false;
        }
        document.getElementById(name + "Info").innerHTML = "<img src='../img/gou.png' width='15px'/>";
        return true;
    }
</script>
asdasd1fdsyrt
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
onsubmit="return check();" 中为何加上return的问题
u010327174的专栏
07-07 5384
以前在项目中为一个表单（from）编写onsubmit()脚本的时候，经常需要验证表单中数据的合法性，所以常会写道：，试图在validateForm()中return false来阻止表单的提交。实际上的效果是即使return false 表单 还是会提交。后来发现 onsubmit="return validateForm()"就没有问题了，当时也没有多想就继续做其它事情了。      直
表单提交的三种方式
xiaozhegaa的博客
12-11 2386
第一种： 使用submit提交 <form method = "post" action = "jieshou.php"> ..... <input type="submit" /> </form>这一种是最常见到的提交方式，在jieshou.php接受数据就可以了第二种： 使用button提交function form1() { //获
onclick="return check()" 和 onclick="check()" 区别
tfish的专栏
03-06 2958
如果是 onclick="return check()"，check() 运行完返回 true，控件才会继续运行，否则，不继续运行。 如果是 onclick="check()"，check() 运行完，控件都会继续运行。 例子： &lt;script type="text/javascript"&gt; function check(){ if(1 == "" ){ r...
Javascript中的正则表达式详细解读
jakeasd的博客
04-08 268
JavaScript中的正则表达式前言什么是正则表达式正则表达式的两种创建方式字面量创建方式基于构造函数模式创建正则表达式的组成常用元字符常用修饰符常用元字符详解()小分组的作用?五大作用正则的捕获正则捕获的懒惰性正则捕获的贪婪性正则表达式中的分组捕获关于 前言 本片文章是笔者个人对正则一些浅显理解，有什么错误之处，请各位留言区说明 什么是正则表达式 正则表达式就是可以验证字符串是否符合某个...
onsubmit="return check();"和onsubmit="check();"的区别
04-24 1万+
表单是否提交取决于onsubmit事件的返回值。 若onsubmit事件返回false，则将阻止表单的提交。 如果不返回值，则默认为true。 主要区别: onsubmit=”return false;” 将无论何时都阻止表单的提交 onsubmit=”return check();” 是否提交表单取决于check()的返回值 onsubmit=”check();” check()的返回
一看就懂：正则表达式
小白一个
03-25 8万+
案例引入 在讲正则表达式前，我们不妨先从一个场景来逐渐引入。 你可能有过这样的经历：我们去某些网站注册帐号，当你在设置密码的时候，网站会提示你密码的长度范围，以及对应的规则限制（如下图）。 根据上图，我们将密码设置规则可以描述为两个条件： （1）长度为6-16位； （2）密码中必须包含数字，大写字母，小写字母，特殊字符（指定字符）； 现在假设我们不知道正则表达式，作为程序员的你，该如何去实现这样一个密码验证呢？ 下面是我写的一个校验方法（样本）： /** * 校验用户密码是否满足..
关于邮箱的正则表达式
weixin_42698221的博客
09-01 4万+
关于邮箱规范的正则表达式
手机号验证最新正则表达式
热门推荐
itbrand的博客
10-26 26万+
一般表单页面都需要填写手机号，校验用户输入的手机号码是否正确，就要用到正则表达式，用正则表达式来匹配手机号段，如在运营商号段内，则号码正确。因此，需要知道运营商最新的号段，如下所示： 各大运营商手机号码段（新） 中国电信号段 133、153、173、177、180、181、189、190、191、193、199 中国联通号段 130、131、132、145、155、156、166、167、171、175、176、185、186、196 中国移动号段 134(0-8)、135、136、137、138
正则表达式（常用版）
BLWY_1124的博客
05-25 4万+
正则表达式 是用来描述字符串内容格式，使用它通常用于匹配一个字符串的内容是否符合格式要求 正则表达式的语法： 1.[]:表示一个字符,该字符可以是[]中指定的内容 例如: [abc]:这个字符可以是a或b或c [a-z] :表示任意一个小写字母 [a-zA-Z] :表示任意一个字母 [a-zA-Z0-9_] :表示任意一个数字字母下划线 [^abc] :该字符只要不是a或b或c 2.预定义字符: . :表示任意一个字符,没有范围限制 \d :表示任意一个数字,等同于[0-9] \w :表示任意一个单词
IP 正则表达式验证
12-12
您可能感兴趣的文章:javascript 手机号码正则表达式验证函数JS正则表达式验证数字代码JavaScript正则表达式验证身份证号码是否合法(两种方法)jquery正则表达式验证（手机号、身份证号、中文名称）邮箱地址正则...
正则表达式必知必会v_1.0.pdf
01-02
"正则表达式必知必会" 正则表达式是一种强大的文本处理工具，广泛应用于各个领域。下面是对正则表达式的详细解释： 正则表达式的用途 正则表达式主要用于处理文本，提供了两大主要功能：查找和替换。查找功能允许...
JavaScript正则表达式
01-08
1、正则表达式是描述字符模式的对象，正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。 2、String和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。 3、...
正则表达式匹配用户密码
12-13
正则表达式 ^[a-zA-Z]\w{5,17}$ 匹配 以字母开头，长度在6~18之间，只能包含字符、数字和下划线 不匹配 正则表达式 ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{4,8}$ 匹配 1agdA*$# | 1agdA*$# | 1agdA*$# 不...
正则表达式汇总-Labview
03-25
正则表达式汇总
【独家首发】基于蜣螂优化算法DBO-GMDH的风电数据回归预测研究Matlab实现.rar
最新发布
08-14
【独家首发】基于蜣螂优化算法DBO-GMDH的风电数据回归预测研究Matlab实现.rar
深度探索：神经网络在图像识别中的革命性应用
08-14
神经网络是一种受人脑结构启发的数学模型，它由大量的节点（或称为“神经元”）相互连接构成。这些节点通常组织成层，包括输入层、隐藏层和输出层。每个神经元可以接收来自前一层的输入，通过某种激活函数处理这些输入，然后将结果传递给下一层的神经元。 神经网络能够通过学习大量的数据来识别模式和特征，这使得它们在图像识别、语音识别、自然语言处理等领域有着广泛的应用。它们也可以用于预测、分类和回归等任务。 训练神经网络通常涉及到一个称为“反向传播”的过程，通过这个过程，网络可以调整其内部参数（权重和偏置），以便更好地完成特定的任务。这个过程通常需要大量的计算资源，并且伴随着梯度下降或其他优化算法来最小化损失函数，从而提高模型的性能。 随着深度学习技术的发展，神经网络变得更加复杂和强大，出现了各种类型的网络结构，比如卷积神经网络（CNNs）用于图像处理，循环神经网络（RNNs）用于序列数据，以及长短期记忆网络（LSTMs）等。
基础会计教学课件第十一章财务会计报告.pptx
08-14
基础会计教学课件第十一章财务会计报告.pptx
基于Android网络聊天软件APP设计与实现.docx
08-14
基于Android网络聊天软件APP设计与实现.docx
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值