在日常生活中,凡是需要表单验证的都会用到正则验证.下面拿一个简单的带有模态框的正则验证的小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>
- 循环遍历正则验证input框内容合法性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js常用的一些正则验证文本框
只允许输入数字和-onKeyUp="value=value.replace(/[^-\d]/g,'')" onafterpaste="value=value.replac ...
- Asp.net MVC利用Ajax.BeginForm实现bootstrap模态框弹出,并进行前段验证
1.新建Controller public ActionResult Index() { return View(); } public ActionResult Person(int? id) { ...
- 模态框的理解 ,jQ: loading,进度条, 省级联动 表单验证 插件
模态框: 打开一个弹框 不关闭它就不能做框外的操作 必须关闭或弹出另外的弹框 加载延迟loading + 进度条只要有请求 就处理一下监控ajax 全局事件jquery: $('#box').ajax ...
- bootstrap下使用模态框,在模态框内输入框中回车时,模态框自动关闭的问题及解决方法
使用bootstrap下模态框,构建表单提交页面,但是输入框中直接回车,本来是想执行一下验证,但是却导致模态框自动关闭了. 遇到这样的问题,只需要先禁止回车触发表单提交 $(do ...
- bootstrap模态框远程加载网页的正确处理方式
bootstrap模态框远程加载网页的方法 在bootsrap模态框文档里给出了这个方法: 使用链接模式 <a data-toggle="modal" href=" ...
- Bootstrap3 模态框 select2搜索框无法输入
<div class="modal fade" role="dialog" aria-hidden="true" data-backd ...
- 整理:手机端弹出提示框,使用的bootstrap中的模态框(modal,弹出层),比kendo弹出效果好
效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...
- 身份证真实性校验js、mini ui身份证长度正则验证
身份证号码真实性校验 <input type="text" value="请输入身份证号" id="cards" ><bu ...
随机推荐
- Moment.js使用笔记
零.前情提要 上个月开发了数据平台,用的框架是vue + Ant Design of Vue,其中用了组件[range-picker]日期选择框,涉及到时间方法就去看了momentJS,以此记录~ 如 ...
- Python用pandas获取Excel数据
import pandas as pd df1 = pd.DataFrame(pd.read_excel(r'C:\python测试文件\我的三国啊.xlsx',sheet_name='Sheet1' ...
- Jmeter——SMTP Sampler发送邮件
在平时测试过程中,也会出一些测试报告,那jmeter在不依托其他工具的情况下,可不可以发送邮件呢,自然是可以的. 我们直接使用SMTP Sampler即可. SMTP Sampler参数 我们来添加个 ...
- Windows10下mysql 8.0.19 安装配置方法图文教程
第一步 下载安装包: 官网 毕竟是甲骨文公司的产品,去官网下真的慢! 这里有两个供选择的,我建议选第一个(因为我先下了第二个,结果失败了,不知道为什么总是出错.) 下载完自行选择路径解压就可以了. 第 ...
- C# 脚本
有些情况下,需要在程序运行期间动态执行C#代码,比如,将某些经常改变的算法保存在配置文件中,在运行期间从配置文件中读取并执行运算.这时可以使用C#脚本来完成这些工作. 使用C#脚本需要引用库Micro ...
- LuoguB2044 有一门课不及格的学生 题解
Content 给出一名学生的语数英三门成绩,请判断该名学生是否恰好有一门不及格(成绩小于 \(60\) 分). 数据范围:成绩在 \(0\sim 100\) 之间. Solution 强烈建议先去做 ...
- CF1494A ABC String 题解
Content 给定 \(T\) 个仅包含大写字母 A,B,C 的字符串 \(s\).问你是否能够通过将每个 A,B,C 换成 (,) 中的一个(同一个字母必须要换成同一个字符),使得最后得到的括号序 ...
- 线程 TLS
TLS为什么产生呢?是软件开发中的什么问题呢? TLS 产生背景进程中的全局变量与函数内定义的静态(static)变量,是各个线程都可以访问的共享变量.在一个线程修改的内存内容,对所有线程都生效 ...
- Uni-app原生插件入门使用教程-[1]从Uni-app插件市场试用插件
[1]从Uniapp插件市场试用插件 当HBuilderX中提供的能力无法满足App功能需求,需要通过使用Andorid/iOS原生开发实现时,可使用App离线SDK开发原生插件来扩展原生能力. 如使 ...
- 【LeetCode】1171. Remove Zero Sum Consecutive Nodes from Linked List 解题报告 (C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 preSum + 字典 日期 题目地址:https:/ ...