在日常生活中,凡是需要表单验证的都会用到正则验证.下面拿一个简单的带有模态框的正则验证的小demo看一下
    <style>
        /* 遮罩层 */
        .mask{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0,0,0,0.5);
            display: none;
            /* display: flex; */
            /* flex-direction: column; */
            justify-content: space-around;
            align-items: center;
            flex: 1;
        }
        .con {
            width: 450px;
            height: 404px;
            /* border: 1px solid; */
            background-color: #fff;
        }
        .title {
            height:40px;
            width: 450px;
            color: #db6419;
            border-bottom: 3px solid orange;
           
        }
        .title p{
            text-align: center;
            line-height: 40px;
            font-weight: 700;
            font-size: 18px;
        }
        .form input {
            width: 405px;
            height: 30px;
            text-indent: 1em;
            border-radius: 10px;
            border: #8d898a 1px solid;
        }
        .form input,
        p {
            margin-top: 0;
            margin-left: 25px;
            margin-top: 15px;
        }
        .con button {
            width: 114px;
            height: 40px;
            outline: none;
            border: none;
            justify-content: space-around;
        }
        .con p {
            font-size: 12px;
            color: #8d898a;
        }
        /* 按钮 */
        .btn{
            display: flex;
            justify-content: space-around;
            cursor: pointer;
        }
        .btn .close{
            background-color: #8b898a;
            border-radius: 15px;
        }
        .btn .login{
            background-color: orange;
            color: #fff;
            border-radius: 15px;
        }
    </style>
</head>
<body>
    <!-- 注册按钮 -->
    <button id="submitBtn">注册</button>
    <!-- 模态框 -->
    <div class="mask">
        <div class="con">
            <!-- 标题 -->
            <div class="title">
                <p>用户注册</p>
            </div>
            <!-- 表单-->
            <div class="form">
                <input class="username" type="text" placeholder="请输入用户名">
                <p>中文、字母、数字、下划线长度2-12位</p>
                <input class="email" type="email" name="" id="" placeholder="请输入邮箱">
                <p>有效的邮箱</p>
                <input class="password" type="password" name="" id="" placeholder="请输入密码">
                <p>字母、数字、下划线长度6-12位</p>
            </div>
            <!-- 按钮 -->
            <div class="btn">
                <button class="close">关闭</button>
                <button class="login">注册</button>
            </div>
        </div>
    </div>
    <!-- 最外层大盒子 -->
    <script>
        // 获取元素
        let submitBtn = document.querySelector('#submitBtn')
        let mask = document.querySelector('.mask')
        // 关闭按钮
        let close = document.querySelector('.btn .close')
        // 注册按钮
        let login = document.querySelector('.btn .login')
        // 用户名
        let username = document.querySelector('.form .username')
        let email = document.querySelector('.form .email')
        let password = document.querySelector('.form .password')
        let ps = document.querySelectorAll('.form p')
        // 正则
        let useReg =  /^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$/
        let emaReg =  /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
        let psdReg = /^[a-zA-Z]\w{5,17}$/
        // 记录是否符合正则
        let useFlag = false
        let emaFlag = false
        let psdFlag = false
        // 给按钮注册点击事件
        submitBtn.addEventListener('click',function(){
            mask.style.display = "flex"
        })
        // 关闭按钮点击的时候 关闭模态框
        close.addEventListener('click',function(){
            mask.style.display="none"
        })
       
        // 遍历所有的正则验证的提示文字
        ps.forEach(function(p,index){
            // 用户名的input框注册失焦事件
            username.addEventListener('blur',function(){
                if(useReg.test(this.value)){
                    console.log(this.value);
                    ps[0].style.color="#8b898a"
                    useFlag = true
                }else{
                    ps[0].style.color="red"
                    console.log(ps[index]);
                    useFlag = false
                }
        })
        // 邮箱input框的失焦事件
        email.addEventListener('blur',function(){
                if(emaReg.test(this.value)){
                    console.log(this.value);
                    ps[1].style.color="#8b898a"
                    emaFlag = true
                }else{
                    ps[1].style.color="red"
                    emaFlag = false
                }
        })
        })
       
        // 密码的input输入框的失焦事件
        password.addEventListener('blur',function(){
            if(psdReg.test(this.value)){
                ps[2].style.color="#8b898a"
                psdFlag = true
            }else{
                ps[2].style.color="red"
                psdFlag = false
            }
        })
        //登陆
        login.addEventListener('click',function(){
            if(useFlag&&emaFlag&&psdFlag){
                location.href='https:www.baidu.com'
            }else{
                alert('请输入正确的格式')
            }
        })
    </script>
</body>
</html>

正则验证&模态框的更多相关文章

  1. 循环遍历正则验证input框内容合法性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js常用的一些正则验证文本框

    只允许输入数字和-onKeyUp="value=value.replace(/[^-\d]/g,'')" onafterpaste="value=value.replac ...

  3. Asp.net MVC利用Ajax.BeginForm实现bootstrap模态框弹出，并进行前段验证

    1.新建Controller public ActionResult Index() { return View(); } public ActionResult Person(int? id) { ...

  4. 模态框的理解 ,jQ: loading,进度条, 省级联动 表单验证 插件

    模态框: 打开一个弹框 不关闭它就不能做框外的操作 必须关闭或弹出另外的弹框 加载延迟loading + 进度条只要有请求 就处理一下监控ajax 全局事件jquery: $('#box').ajax ...

  5. bootstrap下使用模态框，在模态框内输入框中回车时，模态框自动关闭的问题及解决方法

    使用bootstrap下模态框,构建表单提交页面,但是输入框中直接回车,本来是想执行一下验证,但是却导致模态框自动关闭了. 遇到这样的问题,只需要先禁止回车触发表单提交            $(do ...

  6. bootstrap模态框远程加载网页的正确处理方式

    bootstrap模态框远程加载网页的方法 在bootsrap模态框文档里给出了这个方法: 使用链接模式 <a data-toggle="modal" href=" ...

  7. Bootstrap3 模态框 select2搜索框无法输入

    <div class="modal fade" role="dialog" aria-hidden="true" data-backd ...

  8. 整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹出层），比kendo弹出效果好

    效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...

  9. 身份证真实性校验js、mini ui身份证长度正则验证

    身份证号码真实性校验 <input type="text" value="请输入身份证号" id="cards" ><bu ...

随机推荐

  1. 密码学之Hash散列

    一.简介 hash(散列.杂凑)函数,是将任意长度的数据映射到有限长度的域上. 直观解释起来,就是对一串数据m进行杂糅,输出另一段固定长度的数据h,作为这段数据的特征(指纹).也就是说,无论数据块m有 ...

  2. 学习笔记--html篇（2）

    html学习--2 canvas . svg 区别 canvas: 依赖分辨率 不支持文本渲染能力 文本渲染能力弱 支持保存图像为png.jpg等格式 适合图像密集开发(游戏) SVG 不依赖分辨率 ...

  3. 层次分析法、模糊综合评测法实例分析（涵盖各个过程讲解、原创实例示范、MATLAB源码公布）

    目录 一.先定个小目标 二.层次分析法部分 2.1 思路总括 2.2 构造两两比较矩阵 2.3 权重计算方法 2.3.1 算术平均法求权重 2.3.2 几何平均法求权重 2.3.3 特征值法求权重 2 ...

  4. [BUUCTF]PWN——picoctf_2018_rop chain

    picoctf_2018_rop chain 附件 步骤: 例行检查,32位,开启了NX保护 试运行一下程序,看到输入太长数据会崩溃 32位ida载入,习惯性的检索程序里的字符串,看见了flag.tx ...

  5. spring security oauth2搭建resource-server demo及token改造成JWT令牌

    我们在上文讲了如何在spring security的环境中搭建基于oauth2协议的认证中心demo:https://www.cnblogs.com/process-h/p/15688971.html ...

  6. 『与善仁』Appium基础 — 25、APP模拟手势高级操作

    目录 1.手指轻敲操作 2.手指按下和抬起操作 3.等待操作 4.手指长按操作 5.手指移动操作 6.综合练习 APP模拟手势的动作都被封装在TouchAction类中,TouchAction是App ...

  7. LuoguB2001 入门测试题目 题解

    Update \(\texttt{2021.7.3}\) 经测试,本题 \(a,b\) 范围在 long long,对代码进行了修改,并修改一些笔误,更新了数据范围. \(\texttt{2021.7 ...

  8. LuoguP7379 [COCI2018-2019#6] Lun 题解

    Content 判断使一个长度为 \(n\) 的银行卡号码(有一个空缺)合法,空缺里面填入的最小数字. 数据范围:\(n\in[1,100]\). Solution 由于只有一个空缺,因此我们可以考虑 ...

  9. vue+uniapp实现美颜拍照录像，相册选择 ｜ 录像限制时长，美颜拍照录像

    一.插件简介 Zhimi-BeautyCamera(智密 - 美颜相机图册插件)是一个支持美颜录像,美颜拍照,选择图视频功能,带录像参数时长限制的uniapp原生插件.平台支持:Android.IOS ...

  10. JAVA遍历某个文件夹下所有文件listFiles() 实现按照名称升序排序

    File[] files = file.listFiles(); List fileList = Arrays.asList(files); Collections.sort(fileList, ne ...