JavaScript 正则表达式

于 2022-05-08 16:32:44 发布
阅读量112 收藏
点赞数
分类专栏： javaScript 文章标签： 正则表达式 javascript webview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57855884/article/details/124650057
版权
本文通过两个HTML示例介绍了正则表达式在前端注册页面中的应用，用于验证用户名、密码和手机号码的格式。通过设置正则表达式，确保输入的用户名为6-12个单词字符，密码也为6-12位，手机号码为11位且以1开头。同时，利用JavaScript的onblur事件进行实时验证，显示错误提示信息。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正则表达式</title>
</head>
<body>
    
</body>
<script>
    /*
        正则表达式
    •概念：正则表达式定义了字符串组成的规则

    定义：
    1.直接量：注意不要加引号
    var reg = /^\w{6,12}$/;
    2.创建 RegExp 对象
    var reg = new RegExp("^\\w{6,12}$");

    方法：
    test(str)：判断指定字符串是否符合规则，返回true 或 false

    语法：
        定义
        ^：表示开始
        $：表示结束
        []：代表某个范围内的单个字符，比如：[0-9] 单个数字字符
        .：代表任意单个字符，除了换行和行结束符
        \w：代表单词宇符：宇母、数字、下划线(_)，相当于[1A-Za-z0-9_] 
        \d：代表数字字符：相当于 [0-9]
    
        量词:
        +：至少一个  var reg=/^\w+$/;
        *：零个或多个
        ?：零个或一个
        {x}：x个
        {m,}：至少m个
        {m,n)：至少m个，最多个
        */

    //    规则：单词字符组成6-12位
    var reg = /^\w{6,12}$/;

    var str ="abcbbb";

    var flg =reg.test(str);
    alert(flg);
</script>
</html>

 

正则表达式案例：注册页面的正则表达式 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎注册</title>
    
    <link rel="stylesheet" href="css/register.css">
</head>
<body>
    <div class="form-div">
        <div class="reg-content">
            <h1>欢迎注册</h1>
            <span>已有账号?</span> <a href="#">登录</a>
        </div>
        <form id="reg-form" action="#" method="get">
            <table>
                <tr>
                    <td>用户名</td>
                    <td class="inputs">
                        <input name="username" type="text" id="username">
                        <br>
                        <span id="username_err" class="err_msg" style="display: none;">用户不太受欢迎</span>
                    </td>
                </tr>

                <tr>
                    <td>密&nbsp;&nbsp;&nbsp;&nbsp;码</td>
                    <td class="inputs">
                        <input type="password" name="password" id="password">
                        <br>
                        <span id="password_err" class="err_msg" style="display: none;">密码格式错误</span>
                    </td>
                </tr>

                <tr>
                    <td>手机号</td>
                   <td class="inputs"><input name="tel" type="text" id="tel">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none;">手机号格式有误</span>
                   </td>
                </tr>
            </table>

            <div class="buttons">
                <input  value="注册" type="submit" id="reg_btn">
            </div>
            <br class="clear">
        </form>
    </div>
    
</body>
<script>
    /* 用户名的验证 */
    // 1.验证用户名是否符合规则
    // 1.1获取用户名的输入框
    var usernameInput = document.getElementById("username");

    //1.2绑定onblur 事件 失去焦点
    usernameInput.onblur = checkUsername;

    function checkUsername(){
        //1.3获取用户输入的用户名
       var username = usernameInput.value.trim();

    //    alert(username);
    // 1.4判断用户名是否符合规则：6-12  and 单词字符的组成
           //正则表达式
            var reg =/^\w{6,12}$/;
            var flag = reg.test(username);

            // var flag = username.length >=6 && username.length <= 12;
            if(flag){
                //符合规则
                document.getElementById("username_err").style.display = 'none';

            }else{
                //不符合规则
                document.getElementById("username_err").style.display = '';
            }
            return flag;
    }




        /* 密码的验证 */
    // 1.验证密码是否符合规则
    // 1.1获取密码的输入框
    var usernameInpu = document.getElementById("password");

    //1.2绑定onblur 事件 失去焦点
    usernameInpu.onblur = checkPassword;

    function checkPassword(){
        //1.3获取用户输入的密码
       var password = usernameInpu.value.trim();

    //    alert(username);
    // 1.4判断密码是否符合规则：6-12
             //正则表达式
            var reg =/^\w{6,12}$/;
            var flag = reg.test(password);

            // var flag = password.length>=6 && password.length<=12;
            if(flag){
                //符合规则
                document.getElementById("password_err").style.display ='none';
            }else{
                //不符合规则
                document.getElementById("password_err").style.display ='';
            }
            return flag;
    }


    /* 手机号的验证 */
    // 1.验证手机号是否符合规则
    // 1.1获取手机号的输入框
    var usernameInp = document.getElementById("tel");

    //1.2绑定onblur 事件 失去焦点
    usernameInp.onblur = checkTepon;

    function checkTepon() {
        //1.3获取用户输入的手机号
       var tel = usernameInp.value.trim();
    //正则表达式  长度是11，数组组成，第一位是1
    // 第一位只能在1范围内取值
            var reg =/^[1]\d{10}$/;
            var flag = reg.test(tel);

    //    记录结果
    //    var flag =tel.length==11;

    //    alert(username);
    // 1.4判断手机号是否符合规则：6-12
            if(flag){
                //符合规则
                document.getElementById("tel_err").style.display= 'none';
            }else{
                //不符合规则
                document.getElementById("tel_err").style.display = '';
            }
            return flag;
        }


    /*-------------------------------------------------------*/

    //1.获取表单对象
    var regForm = document.getElementById("reg-form");

    //2.绑定onsubmint 事件
    regForm.onsubmit=function(){
        //3.挨个判断每一个表单项目都符合要求，如果有一个不符合，则返回 false
      
       var flag =checkUsername()&&checkPassword()&&checkTepon();
       return flag;

    }



</script>

</html>

 

背景图片：

 

/* 把我们所有标签的内外边距清零 */
*{
    margin: 0;
    padding: 0;
    /* css3盒子模型 */
    /* box-sizing: border-box; */
}
/* em 和 i 斜体文字不倾斜 */
em,i{
    font-style: normal;
}
i{
    font-style: normal;
}
/* 去掉li的小圆点 */
li{
    list-style: none;
}
img{
    /* border 0 照顾低版本浏览器 如果外面包含了连接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    /* 垂直对齐中间 */
    vertical-align: middle;
}
.buttons{
    /* 当我们经过button 按钮的时候，鼠标变成小手 */
    /* 光标指针 */
    cursor: pointer;
}
a{
    color: #666;
    /* 文本装饰 */
    text-decoration: none;
}


body{
    background-image: url("../img/R-C.jpg");
    text-align: center;
}

table{
    border-collapse: collapse;
    border-spacing: 0;
}
.reg-content{
    text-align: center;
    /* margin-bottom:10px; */
   
    
}


td{
    padding: 0;
    height: 100px;
    text-align: center;

   

}

.inputs{
    vertical-align: top;

}

.clear{
    clear: both;
}

.clear:before, .clear::after{
    content: "";
    display: table;
}

.clear:after{
    clear: both;
}

.form-div{
    background-color: rgb(255, 255, 255,0.27);
    border-radius: 10px;
    border: 1px solid #aaa;
    width: 424px;
    margin-top: 150px;
    margin-left: 1050px;
    padding: 30px 0px 20px 0px;
    font-size: 16px;
    box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5),0px 0px 15px rgba(75, 75, 75, 0.3);
    text-align: left;
    
}
.form-div input[type="text"],.form-div input[type="password"]{
    width: 168px;
    margin: 10px;
    /* height: 30px; */
    line-height: 30px;
    font-size: 16px;
    /* margin-right: 50px; */
    margin-top: 35px;
    border-radius:6px;
    /* margin-top: 30px; */
}
.form-div input[type="submit"]{
    width: 168px;
    margin: 10px;
    /* height: 30px; */
    line-height: 20px;
    font-size: 16px;
    background-color:antiquewhite;
    border-radius:9px;
  
}
.form-div input[type="checkbox"]{
    margin: 20px 0 20px 10px;
}
.form-div input[type="button"],.form-div input[type="submit"]{
    margin: 10px 0px 0 0;
}


.form-div table{
    margin: 0 auto;
    text-align: right;
    color: rgba(64, 64, 64, 1.00);
}
.buttons{
    text-align: center;
    margin-left: 30px;
}

.err_msg{
    
    color: aqua;

}

最后效果：

 

 

 

「已注销」
关注
专栏目录
原生js表单美化制作注册个人信息提交表单.zip
07-11
原生js表单美化制作注册个人信息提交表单代码
JavaScript 表单验证 注册页面提交数据
m0_57855884的博客
05-08 333
JavaScript 表单验证 注册页面提交数据
【Javascript】入门之验证注册信息
qq_37086980的博客
12-16 297
描述: html <main class="clearfix"> <div class="leftpanel fl"> <form action="#" id = "registerform"> <div> <span>手机: </span> <input type="text"
JavaScript实现注册页面的表单验证
03-10 8958
基于javaweb的学习以及为后面做项目做基础，其次参考资料做了些琢磨来实现这个登录界面的注册的验证，下面是效果图（顺便附加素材） 下面是代码展示 1.注册界面register.html 无标题文档 会员注册 会员邮箱: 请输入有效的邮箱地址 会员名:
js注册表单的验证提交
qq_45148387的博客
06-07 355
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
JavaScript正则表达式
01-08
JavaScript正则表达式 一、认识正则表达式 1、正则表达式是描述字符模式的对象，正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。 2、String和RegExp都定义了使用正则表达式进行强大...
javascript正则表达式迷你书 (1).pdf
12-28
JavaScript 正则表达式迷你书 本书是 JavaScript 正则表达式的入门级教程，旨在帮助读者快速掌握正则表达式的基本概念和应用。下面是本书的知识点摘要： 第一章：正则表达式字符匹配攻略 * 两种模糊匹配：横向...
JavaScript正则表达式替换字符串中图片地址(img src)的方法
10-20
本篇文章将深入探讨如何使用JavaScript正则表达式来实现这个功能。 首先，我们需要理解JavaScript的`String.prototype.replace()`方法。此方法接受两个参数：一个正则表达式或字符串作为查找的模式，以及一个替换...
如何用javascript正则表达式验证身份证号码是否合法
10-23
在用户注册页面有些需求要求的比较严格，需要对身份证验证是否合法，通过此功能严格此系统软件，从而过滤到很多水客。此篇文章主要是讲解如何用javascript正则表达式验证身份证号码是否合法,需要的朋友可以参考下
JavaScript正则表达式校验非零的正整数实例
10-20
本文分享了JavaScript正则表达式（^[1-9]d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^+?[1-9][0-9]*$）校验非零的正整数实例代码，代码简单易懂，需要的朋友可以看下
JS定义网页表单提交（submit）的方法
01-21
本文实例讲述了JS定义网页表单提交（submit）的方法。分享给大家供大家参考。具体如下： 这段代码表示网页表单提交时不是提交到指定的页面，而是执行一个特定的函数 [removed] function saveInfo() { localStorage.setItem(name,$(#name).val()); } [removed] <form id=register onSubmit=return saveInfo()> <label for=name>Name:</label> <input type=text name=name id=name> <input
JavaScript 提交(Submit)页面数据
david_zl的专栏
08-05 2992
当不采用 http://xxx.xxx.xxx?xxx=xxx 方式提交页面数据时，JavaScript 还有另外一种方法客户端：function MakeConfirm(){ if ( confirm("确认以上增加/修改吗？") ) {  document.Form1.submit();  }}    width="640">        &nbsp
JS验证通过之后才提交表单
ithouse的专栏
08-11 4355
JS代码： function reg() { var v1 = document.getElementById('consumerName').value; var s = document.getElementById('sex'); var v3 = document.getElementById('consumerPasswd').value; var
原生js实现表单的正则验证，所有验证都通过后提交按钮才可用
热门推荐
u010552788的专栏
03-30 2万+
实现了如下功能： 1.用户名：onfouc显示msg规则；onkeyup计算字符，其中中文为两个字符；onblur，验证是否通过 2.邮箱：onblur 正则匹配，正则是根据自己的需求写的，可以根据个人需求更改 3..密码：onkeyup时显示密码的强弱度，onblur时验证密码，是否为相同字符，是否全字符，或全数字，长度是否符合要求 4.确认密码：验证是否和
js中对提交信息的处理
weixin_45542692的博客
01-16 358
注册中用户信息的过滤处理对用户提交信息的处理页面的设计 对用户提交信息的处理 // 浪念 console.log('form发生了提交事件，携带的数据为：', e.detail.value); if (e.detail.value.rt_xm) { //是否输入姓名 if (e.detail.value.rt_ph) { //是否输入号码 if (e.detail.va...
js实现把一个页面层数据传递到另一个页面
xiaoxiaoyoumeng的博客
08-12 1万+
由于之前面试，被问到过此问题，所以今天特意整理了一下。由于自己技术水平有限，若存在错误，欢迎提出批评。 本博客整理了两种方式从一个页面层向另一个页面层传递参数。 一. 通过cookie方式 1. 传递cookie页面的html,此处命名为a.html 请输入用户名和密码： &lt;input id="userName" type="text" /&gt; &lt;input id="pa...
js实现注册验证
he626shidizai的博客
04-03 6496
为什么需要表单验证（前端）? 首先我们要保证提交的数据是正确的，但是把信息都交给服务器去做服务器压力就太大了，所以要进行表单验证。 思路分析 通过getElementById()方法获得表单元素的值 通过字符串方法（包括正则式）对数据进行判断 判断失败，利用alert()方法进行提示，返回false；判断成功，返回true进行表单提交 要点 getElementById(‘str’).val...
【JavaScript】eg：同源、未使用ajax实现页面的数据通过Node后台提交到数据库
南栀的博客
12-17 1352
前后端交互
js-5秒之后跳转页面
qq_41670147的博客
12-03 1722
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
深入理解JavaScript正则表达式
"Javascript正则表达式教程" 正则表达式是JavaScript中一个强大的文本处理工具，用于模式匹配、查找、替换和分割字符串。它是通过一套特定的语法规则来定义文本模式的序列，这些规则由普通字符（例如字母、数字）和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

「已注销」

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值