正则验证&正则验证的函数封装&模态框

2022-01-08 20:00:45 阅读：130 来源： 互联网

标签：模态 ps style 验证 color 正则 let function document

在日常生活中,凡是需要表单验证的都会用到正则验证.下面拿一个简单的带有模态框的正则验证的小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>

标签：模态,ps,style,验证,color,正则,let,function,document
来源： https://www.cnblogs.com/insomnia-again/p/15779392.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

正则验证&正则验证的函数封装&模态框