<!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-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
form {
width: 500px;
padding: 30px;
border: 5px solid pink;
border-radius: 15px;
margin: 50px auto;
display: flex;
flex-direction: column;
}
form>label {
height: 50px;
position: relative;
}
form>label>span {
color: red;
position: absolute;
left: 20px;
bottom: 5px;
display: none;
}
</style>
</head>
<body>
<form>
<label>
用户名: <input autocomplete="off" type="text" class="name">
<span>请按照规则填写用户名</span>
</label>
<label>
密码: <input autocomplete="off" type="text" class="password">
<span>请按照规则填写密码</span>
</label>
<label>
手机号: <input autocomplete="off" type="text" class="phone">
<span>请按照规则填写手机号</span>
</label>
<button>注册</button>
</form>
<script>
/**
* 需求:
* 1. 用户名以数字或字母开头, 6~11位;
* 2. 密码 6~12 位数字字母下划线;
* 3. 手机号 11 位数字
*/
/**
* 逻辑:
* 1.获取到用户名 密码 手机号
* 2.根据正则匹配是否符合规则,决定是否渲染 对应的span 标签
*
* */
// 0.获取元素
let inps = [...document.querySelectorAll('input')]
let reg = {
name: /^[0-9a-zA-Z]\w{5,10}$/,
password: /^\w{6,12}$/,
phone: /^\d{11}$/
}
// 利用循环,简化代码量
inps.forEach((item) => {
item.onblur = function (e) {
// 拿到用户输入的内容
let value = this.value
// 想办法拿到正则
let fnReg = reg[this.className]
// 通过正则判断用户名是否符合规则
if(fnReg.test(value)) {
this.nextElementSibling.style.display = 'none'
}else {
this.nextElementSibling.style.display = 'block'
}
}
})
// 普通写法
// // 验证用户名
// inps[0].onblur = function(e) {
// // console.log('失去焦点')
// // 1.1拿到用户名
// let value = e.target.value
// // 1.2创建一个正则
// let reg = /^[0-9a-zA-Z]\w{5,10}$/
// // 1.3通过正则判断用户名是否符合规则
// // console.log(reg.test(value))
// if(reg.test(value)) {
// // 如果当前分支执行，说明符合规则
// e.target.nextElementSibling.style.display = 'none'
// }else {
// // 如果当前分支执行，说明不符合规则
// // console.log(e.target)
// e.target.nextElementSibling.style.display = 'block'
// }
// }
// // 验证密码
// inps[1].onblur = function(e) {
// // console.log('失去焦点')
// // 2.1拿到密码
// let value = e.target.value
// // 2.2创建一个正则
// let reg = /^\w{6,12}$/
// // 2.3通过正则判断用户名是否符合规则
// if (reg.test(value)) {
// // 当前分支执行,代表符合规则
// e.target.nextElementSibling.style.display = 'none'
// }else {
// // 当前分支执行,代表不符合规则
// e.target.nextElementSibling.style.display = 'block'
// }
// }
// inps[2].onblur = function(e) {
// // console.log('失去焦点')
// // 3.1拿到手机号
// let value = e.target.value
// // 3.2创建一个正则
// let reg = /^\d{11}$/
// // 3.3通过正则判断用户名是否符合规则
// if (reg.test(value)) {
// // 当前分支执行,代表符合规则
// e.target.nextElementSibling.style.display = 'none'
// }else {
// // 当前分支执行,代表不符合规则
// e.target.nextElementSibling.style.display = 'block'
// }
// }
</script>
</body>
</html>
