标签：UNC als 成功 onsubmit UI 定义 验证码 item ref
<!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> </head> <style> form { margin-top: 50px; } form>div { display: flex; width: 500px; margin-bottom: 30px; justify-content: space-around; align-items: center; } form>div>label { width: 70px; text-align: right; } form>div>input { height: 20px; } form>div>span { width: 120px; } #submit { width: 170px; height: 30px; font-size: 20px; margin-left: -120px; } </style> <body> <form action="03denglu.html"> <div> <label for="">手机号</label> <input type="text" maxlength="11" required> <span></span> </div> <div> <label for="">验证码</label> <input type="text" maxlength="6" required> <span></span> </div> <div> <label for="">密码</label> <input type="text" maxlength="20" required> <span></span> </div> <div> <label for="">确认密码</label> <input type="text" maxlength="20" required> <span></span> </div> <div> <label for=""></label> <input type="submit" id=‘submit‘> <a href=""></a> </div> </form> <script src=‘../../util.js‘></script> //引用的方法 <script> window.onload = function () { let phone = document.querySelectorAll(‘input‘)[0]; let ma = document.querySelectorAll(‘input‘)[1]; let pwd1 = document.querySelectorAll(‘input‘)[2]; let pwd2 = document.querySelectorAll(‘input‘)[3]; let form = document.querySelector(‘form‘); let isok1; let isok2; let isok3; let isok4; //手机号 phone.onblur = function () { let reg = /^1[358]\d{9}$/; if (this.value) { if (reg.test(phone.value)) { let arr = get(‘users‘, []); for (let i = 0; i < arr.length; i++) { if (arr[i].phone == phone.value) { phone.nextElementSibling.innerText = "手机号已被注册"; phone.nextElementSibling.style = "color:red"; isok1 = 0; return; } } phone.nextElementSibling.innerText = "格式正确"; phone.nextElementSibling.style = "color:green"; isok1 = 1; } else { phone.nextElementSibling.innerText = "格式不正确"; phone.nextElementSibling.style = "color:red"; isok1 = 0; } } } // 验证码 ma.onblur = function () { let reg = /^\d{6}$/; if (this.value) { if (reg.test(ma.value)) { ma.nextElementSibling.innerText = "格式正确"; ma.nextElementSibling.style = "color:green"; isok2 = 1; } else { ma.nextElementSibling.innerText = "格式不正确"; ma.nextElementSibling.style = "color:red"; isok2 = 0; } } } // 密码 pwd1.onblur = function () { let reg = /^\w{6,}$/; if (this.value) { if (reg.test(pwd1.value)) { pwd1.nextElementSibling.innerText = "格式正确"; pwd1.nextElementSibling.style = "color:green"; isok3 = 1; } else { pwd1.nextElementSibling.innerText = "格式不正确"; pwd1.nextElementSibling.style = "color:red"; isok3 = 0; } } } //确认密码 pwd2.onblur = function () { if (pwd1.nextElementSibling.innerText == "格式正确") { if (pwd2.value == pwd1.value) { pwd2.nextElementSibling.innerText = "密码一致"; pwd2.nextElementSibling.style = "color:green"; isok4 = 1; } else { pwd2.nextElementSibling.innerText = "密码不一致"; pwd2.nextElementSibling.style = "color:red"; isok4 = 0; } } } //提交登录 form.onsubmit = function (e) { if (isok1 + isok2 + isok3 + isok4 == 4) { alert(‘登录成功‘); let arr = get(‘users‘, []);//获取数据,如果有值就用locla的值，没有就创建一个新数组 arr.push({ phone: phone.value, pwd: pwd2.value, }) save(‘users‘, arr);//保存数据，users是键名，arr是值 } else { alert(‘失败‘) e.preventDefault(); } }
} </script> </body> </html>
标签：UNC als 成功 onsubmit UI 定义 验证码 item ref
原文地址：https://www.cnblogs.com/w123123/p/9195825.html
