<!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(); ???????????????} ???????????}//保存数据到localStorage 引用的方法
// function save(name, value) {//键名
// if (typeof value == "object") {
// localStorage[name] = JSON.stringify(value);
// } else {
// localStorage[name] = value;
// }
// }
// //从localStorage获取数据
// function get(name, defaultValue) {
// ????let value;
// ????if (!localStorage[name]) {//如果自定义没有值,就是undefined
// ????????value = defaultValue;
// ????} else {
// ????????value = JSON.parse(localStorage[name]);
// ????}
// ????return value;
// }
???????} ???</script></body></html>
登录注册判断，js
原文地址：https://www.cnblogs.com/w123123/p/9195825.html