正則驗證&模態框
在日常生活中,凡是需要表單驗證的都會用到正則驗證.下面拿一個簡單的帶有模態框的正則驗證的小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>
