1.表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以 发送验证码及提交和重置按钮；
2.点击表单里的输入框，隐藏提示文字；
3.点击提交和重置按钮时，都需要有相应的提示；
4.在表单提交是，需要进行验证验证填写内容是否合理：昵称不超 过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同。
5.发送验证码按钮点击后，会被禁用；发送验证码按钮被点击后，按钮里面的内容会变化成1分钟的倒计时；待发送验证码按钮被触发后才可以点击提交按钮，需在验证码框里填写 0505,用弹窗提示成功。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="card">
<form class="form">
<div data-prop="username" class="form-item">
<span class="zhanghao1"></span>
<input type="text" name="username" placeholder="设置昵称">
<span class="msg"></span>
</div>
<div data-prop="realname" class="form-item">
<span class="realname1"></span>
<input type="text" name="realname" placeholder="输入真实姓名">
<span class="msg"></span>
</div>
<div data-prop="QQ" class="form-item">
<span class="QQ1"></span>
<input type="text" name="QQ" placeholder="QQ号">
<span class="msg"></span>
</div>
<div data-prop="phone" class="form-item">
<span class="phone1"></span>
<input type="text" name="phone" placeholder="输入手机号码">
<span class="msg"></span>
</div>
<div data-prop="email" class="form-item">
<span class="email1"></span>
<input type="text" name="email" placeholder="输入邮箱">
<span class="msg"></span>
</div>
<div data-prop="password" class="form-item">
<span class="password1"></span>
<input type="password" name="password" placeholder="设置密码">
<span class="msg"></span>
</div>
<div data-prop="confirm" class="form-item">
<span class="confirm1"></span>
<input type="password" name="confirm" placeholder="确认密码">
<span class="msg"></span>
</div>
<div data-prop="code" class="form-item">
<span class="code1"></span>
<input type="text" name="code" placeholder="短信验证码">
<span class="msg"></span>
<button id="getcode">发送验证码</button>
</div>
<button class="submit">提交</button>
<button class="again">重置</button>
</form>
</div>
</div>
<script>
// 获取元素
const inp = document.querySelectorAll('input')
const submit = document.querySelector('.submit')
const again = document.querySelector('.again')
// username
const username =document.querySelector('[name=username]')
// 绑定change事件（失去焦点且内容发生改变的）
username.addEventListener('change', verifyUserName)
function verifyUserName() {
// 获取输入框的下一个兄弟元素（用来展示错误提示的<span>）
const span = username.nextElementSibling
// 定义正则规则：匹配"1~10个任意字符"
const reg = /^.{1,10}$/
// 校验输入值：不满足规则
if (!reg.test(username.value)) {
span.innerText = '昵称不超过10个字' // 显示错误提示
return false // 表示验证不通过
}
else {
span.innerText = '' // 清空提示
return true // 表示验证通过
}
}
// realname
const realname =document.querySelector('[name=realname]')
realname.addEventListener('change', verifyRealName)
function verifyRealName() {
const span = realname.nextElementSibling
const reg = /^.{1,4}$/
if (!reg.test(realname.value)) {
span.innerText = '姓名不超过4个字'
return false
}
else {
span.innerText = ''
return true
}
}
const QQ = document.querySelector('[name=QQ]')
QQ.addEventListener('change', verifyQQ)
function verifyQQ() {
const span = QQ.nextElementSibling
const reg = /^\d{6,10}$/
if(!reg.test(QQ.value)) {
span.innerText = '长度小于等于10大于5位的数字'
return false
}
span.innerText = ''
return true
}
// Phone
const phone = document.querySelector('[name=phone]')
phone.addEventListener('change', verifyPhone)
function verifyPhone() {
const span = phone.nextElementSibling
const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
if(!reg.test(phone.value)) {
span.innerText = '请输入正确的11位手机号码'
return false
}
span.innerText = ''
return true
}
// password
const password = document.querySelector('[name=password]')
password.addEventListener('change', verifyPwd)
function verifyPwd() {
const span = password.nextElementSibling
const reg = /^[a-zA-Z0-9-_]{9,16}$/
if(!reg.test(password.value)) {
span.innerText = '密码由字母和数字组成且大于8位小于16位'
return false
}
span.innerText = ''
return true
}
// 输入框点击交互
inp.forEach(function(input) {
input.addEventListener('click',function () {
this.placeholder = '' // 用户点击输入框时，清空该输入框的placeholder
})
})
// 表单重置按钮
again.addEventListener('click', function () {
alert('您确定要重置吗？')
inp.forEach(function (input) {
input.value = ''
})
})
// 表单提交按钮
submit.addEventListener('click', function () {
alert('您确定要提交吗？')
const inpCode = document.querySelector('[name=code]')
// 除去内容前后空格
const inpValue = inpCode.value.trim()
// 校验验证码是否是"0505"
if(inpValue !== "0505") {
alert('请输入正确的验证码')
}
else {
alert('成功')
}
Pass () // 调用密码一致性校验函数
// 清空所有输入框
inp.forEach(function(input) {
input.value = ''
})
})
let flag = true // 控制验证码按钮是否可点击的标记
const code = document.querySelector('#getcode')
code.addEventListener('click', function (e) {
e.preventDefault() // 阻止按钮默认行为
if(flag) {
// 倒计时开始,标记为"不可点击"
flag =false
let i = 60
code.innerHTML = `${i}秒后重新获取`
// 启动定时器,每一秒执行一次
let timerId = setInterval(function () {
i--
code.innerHTML = `${i}秒后重新获取`
// 倒计时结束
if (i === 0) {
clearInterval(timerId) // 清除定时器
code.innerHTML = `重新获取`
flag = true // 标记为可点击
}
}, 1000)
}
})
function Pass () {
// 获取元素
const password = document.querySelector('[name=password]').value
const confirm = document.querySelector('[name=confirm]').value
// 校验两次输入的密码是否一致
if(password !== confirm) {
alert('两次密码输入不一致，请再次输入')
return false
}
else {
return true
}
}
</script>
</body>
</html>