<!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> <body> <!-- 在页面上写出5个输入框和一个提交按钮。 --> <h2>注册</h2> 账号：<input type="text" id="txt1"><span></span><br><br> 密码：<input type="password" id="pas1"><span></span><br><br> 确认密码：<input type="password" id="pas2"><span></span><br><br> 手机号：<input type="text" id="txt2"><span></span><br><br> 邮箱：<input type="text" id="txt3"><span></span><br><br> <input type="submit" value="提交注册信息" id="sub"> </body>
<script> // 获取页面的输入框及按钮 var oTxt1 = document.getElementById("txt1"); var opas1 = document.getElementById("pas1"); var opas2 = document.getElementById("pas2"); var oTxt2 = document.getElementById("txt2"); var oTxt3 = document.getElementById("txt3"); var osub = document.getElementById("sub"); // 提前定义每个输入框的成功状态：false为失败，true为成功 var t1 = p1 = p2 = t2 = t3 = false; //给第一个输入框绑定一个失去焦点事件 oTxt1.onblur = function () { //定义一个用户名的正则，这个规则可以自己确定，我的是支持中文、字母、数字、“-”“_”的组合，4-20个字符 var reg = /^[u2E80-u9FFFw-]{4,20}$/gi //判断当前输入的内容是否符合 if (reg.test(this.value)) { //如符合提示成功。 this.nextElementSibling.innerHTML = "成功"; t1 = true; } else { //否则提示用户名规则。 this.nextElementSibling.innerHTML = "用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符"; t1 = false; } } //给第二个输入框绑定一个失去焦点事件,判断密码强度数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强 opas1.onblur = function () { //提前定义每种类型的状态：0为没有，1为出现 var a = b = c = 0; //判断为纯数字; var aReg = /d/ if (aReg.test(this.value)) { //数值为1； a = 1; } //判断为字母 var bReg = /[a-zA-Z]/ if (bReg.test(this.value)) { //数值为1 b = 1; } // 判断为特殊符号 var cReg = /W/ if (cReg.test(this.value)) { // 数值为1 c = 1; } //状态累加之后，判断总和，判断难度类型；三个数值相加为1密码为简单为2为一般为3为困难 switch (a + b + c) { case 1: this.nextElementSibling.innerHTML = "简单"; break; case 2: this.nextElementSibling.innerHTML = "一般"; break; case 3: this.nextElementSibling.innerHTML = "困难"; break; } //给第三个输入框绑定一个失去焦点事件判断密码是否一致。 //在第一次输入密码时，只要再次输入的密码不为空，都做重复密码的验证 p1 = true; if (opas2.value == "") return; if (this.value === opas2.value) { opas2.nextElementSibling.innerHTML = "一致"; p2 = true; } else { opas2.nextElementSibling.innerHTML = "不一致"; p2 = false; } } opas2.onblur = function () { if (this.value === opas1.value) { this.nextElementSibling.innerHTML = "一致"; p2 = true; } else { this.nextElementSibling.innerHTML = "不一致"; p2 = false; } } //给第四个输入框绑定一个失去焦点事件判断手机号。 oTxt2.onblur = function () { //定义一个判断手机号的正则 var reg = /^1[3-9][0-9]{9}$/ //判断 if (reg.test(this.value)) { //成功 this.nextElementSibling.innerHTML = "正确"; t2 = true; } else { //格式不正确 this.nextElementSibling.innerHTML = "请输入符合格式的手机号"; t2 = false; } } //给第五个输入框绑定一个失去焦点事件判断邮箱。 oTxt3.onblur = function () { //定义一个判断邮箱的正则 var reg = /^[a-z][a-z0-9]{0,5}@[a-z0-9]{2,9}.[a-z]{2,4}$/; //判断 if (reg.test(this.value)) { //成功 this.nextElementSibling.innerHTML = "正确"; t3 = true; } else { //格式不正确 this.nextElementSibling.innerHTML = "请输入符合格式的邮箱"; t3 = false; } } //给第六个输入框绑定一个点击事件。 osub.onclick = function () { // 提交时，判断所有输入框的状态必须全为true if (t1 && p1 && p2 && t2 && t3) { //如果成功点击跳转 window.location.href = "https://www.cnblogs.com/zl-light/" } else { // 只要有一个不为true，都单独判断，找到真正的错误 if (!t1) { alert("用户名错误"); } if (!p1) { alert("密码不正确"); } if (!p2) { alert("两次不一致"); } if (!t2) { alert("手机号不符合"); } if (!t3) { alert("邮箱不符合"); } } } </script> </html>