注册表单提交加验证码功能

注册表单提交加验证码功能 一、需求

1.表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以 发送验证码及提交和重置按钮； 2.点击表单里的输入框，隐藏提示文字； 3.点击提交和重置按钮时，都需要有相应的提示； 4.在表单提交是，需要进行验证验证填写内容是否合理：昵称不超 过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同。 5.发送验证码按钮点击后，会被禁用；发送验证码按钮被点击后，按钮里面的内容会变化成1分钟的倒计时；待发送验证码按钮被触发后才可以点击提交按钮，需在验证码框里填写 0505,用弹窗提示成功。

二、html <div class="form"> 昵称：<input type="text" id="nickname" placeholder="请输入昵称"> <br> 姓名：<input type="text" id="name" placeholder="请输入姓名"> <br> QQ号：<input type="text" id="qq" placeholder="请输入QQ号"> <br> 手机号：<input type="text" id="phone" placeholder="请输入手机号"> <br> 邮箱：<input type="email" id="email" placeholder="请输入邮箱"> <br> 密码：<input type="password" id="password" placeholder="请输入密码"> <br> 确认密码：<input type="password" id="confirmPassword" placeholder="请再次输入密码"> <br> 验证码：<input type="text" id="verifyCode" placeholder="请输入验证码"> <button type="button" id="verifyCodeButton">发送验证码</button> <br> <button type="submit" id="submit" disabled>提交</button> <button type="reset" id="reset">重置</button> </div> 三、css <style> .form { width: 400px; height: 380px; border:1px solid black; border-radius:15px; padding:20px; } .form input { padding:5px; margin:5px; } .form button{ margin:5px 0px; } .form #verifyCodeButton { height: 30px; } .form #submit, .form #reset { width: 70px; height: 30px; } </style> 四、JavaScript <script> const form = document.querySelector('.form') const inputs = document.querySelectorAll('input') const nickname = document.querySelector('#nickname') const name = document.querySelector('#name') const qq = document.querySelector('#qq') const phone = document.querySelector('#phone') const email = document.querySelector('#email') const confirmPassword = document.querySelector('#confirmPassword') const verifyCode = document.querySelector('#verifyCode') const verifyCodeButton = document.querySelector('#verifyCodeButton') const submit = document.querySelector('#submit') const reset = document.querySelector('#reset') //点击输入框，隐藏提示文字 inputs.forEach(input=>{ input.addEventListener('focus',function(){ input.placeholder='' }) input.addEventListener('blur',function(){ if(input.id==='nickname'){ input.placeholder='请输入昵称' } else if (input.id === 'name') { input.placeholder = '请输入姓名'; } else if (input.id === 'qq') { input.placeholder = '请输入QQ号'; } else if (input.id === 'phone') { input.placeholder = '请输入手机号';a } else if (input.id === 'email') { input.placeholder = '请输入邮箱'; } else if (input.id === 'password') { input.placeholder = '请输入密码'; } else if (input.id === 'confirmPassword') { input.placeholder = '请再次输入密码'; } else if (input.id === 'verifyCode') { input.placeholder = '请输入验证码'; } }) }) //点击发送验证码之后 verifyCodeButton.addEventListener('click',function(){ verifyCodeButton.disabled = true; submit.disabled = false; let time = 60 const timer = setInterval(()=>{ verifyCodeButton.textContent=`${time}秒后重新发送` time-- if(time<0){ verifyCodeButton.textContent='发送验证码' verifyCodeButton.disabled = false } },1000) }) //点击提交和重置的提示 submit.addEventListener('click',function(){ if(nickname.value.length=0){ alert('昵称不能为空'); return; } if(nickname.value.length>10){ alert('昵称不能超过10个字'); return; } if(name.value.length=0){ alert('姓名不能为空'); return; } if (name.value.length > 4) { alert('姓名不能超过4个字'); return; } if (qq.value.length>10 || qq.value.length<=5) { alert('QQ号应为长度小于等于10大于5位的数字'); return; } if (phone.value.length!=11) { alert('手机号应为11位数字'); return; } if (!/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{9,15}$/.test(password.value)) { //正则表达式 alert('密码应由字母和数字组成，且大于8位小于16位'); return; } if (password.value !== confirmPassword.value) { alert('密码和确认密码不相同'); return; } if (verifyCode.value !== '0505') { alert('验证码输入错误'); return; } alert('提交成功'); }) reset.addEventListener('click',function(){ if(confirm('确认需要重置？')){ nickname.value='' name.value='' qq.value='' phone.value='' emal.value='' password.value='' confirmPassword.value='' verifyCode.value='' submit.disabled=true verifyCodeButton.disabled = false } }) </script> 五、样式截图

六、实现原理 点击表单里的输入框，隐藏提示文字：‘focus’时placeholder=’'，'blur’时if与else if语句输出placeholder发送验证码点击后禁用，内容变化成一分钟倒计时，启用提交按钮：disabled控制发送验证码与提交按钮禁用与否，textContent改变内容，启用定时器修改内部时间重置提示：使用confirm()作为if语句的判断条件验证填写内容是否合理：依次使用if语句对填写内容进行判断，if语句全部不符合就输出提交成功