JavaScript——制作验证页面，并给一定的提示

╰半橙微兮° 2024-04-06 13:19 10阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			table {
    				border: 1px solid black;
    			}
    
    			td {
    				border: 1px solid black;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<table>
    			<tr>
    				<td>账户：</td>
    				<td><input type="text" id="users" onblur="checkUsers()"></td>
    				<td><span id="checkUsers"></span></td>
    			</tr>
    			<tr>
    				<td>密码：</td>
    				<td><input type="password" id="pwd" onblur="checkPwd(1)"></td>
    				<td><span id="checkPwd"></span></td>
    			</tr>
    			<tr>
    				<td>确认密码：</td>
    				<td><input type="password" id="pwdRight" onblur="checkPwd(2)"></td>
    				<td><span id="checkPwdRight"></span></td>
    			</tr>
    			<tr>
    				<td>家庭住址：</td>
    				<td id="city" colspan="2"><select onchange="city(this)" id="choose">
    						<option value="-1">--请选择省份--</option>
    						<option value="0">河南</option>
    						<option value="1">浙江</option>
    						<option value="2">北京</option>
    						<option value="3">安徽</option>
    						
    					</select>
    				</td>
    			</tr>
    			<tr align="center">
    				<td colspan="3"><input type="button" id="btn" value="提交" onclick="check()"></td>
    			</tr>
    		</table>
    		<script>
    			// 二级联动 省份对应的地区
    			var arr = [
    				["郑州", "开封", "洛阳", "平顶山", "安阳", "鹤壁", "新乡", "焦作", "濮阳", "许昌", "漯河", "三门峡", "南阳", "商丘", "信阳", "周口", "驻马店"],
    				["杭州", "宁波", "温州", "嘉兴", "湖州", "绍兴", "金华", "衢州", "舟山", "台州", "丽水市"],
    				["东城", "西城", "朝阳", "丰台", "石景山", "海淀", "顺义", "通州", "大兴", "房山", "门头沟", "昌平", "平谷", "密云", "怀柔", "延庆区"],
    				["合肥", "芜湖", "蚌埠", "淮南", "马鞍山", "淮北", "铜陵", "安庆", "黄山", "阜阳", "宿州", "滁州", "六安", "宣城", "池州", "亳州", "潜山市"]
    			]
    			var selectobj = null
    
    			function city(obj) {
    				if (selectobj != null) {
    					selectobj.remove()
    				}
    				if (obj.value == -1) {
    					return
    				}
    				selectobj = document.createElement("select")
    				for (var i = 0; i < arr[obj.value].length; i++) {
    					var optionobj = document.createElement("option")
    					optionobj.innerHTML = arr[obj.value][i]
    					selectobj.appendChild(optionobj)
    				}
    				document.getElementById("city").appendChild(selectobj)
    			}
    
    			// ----------------------------------------------------------------------------------------------------------
    			function checkUsers() {
    				var users = document.getElementById("users").value;
    				var usersReg = /^[a-zA-Z_]{6,}$/
    				var checkUsers = document.getElementById("checkUsers");
    				if (usersReg.test(users)) {
    					checkUsers.innerHTML = "√"
    					checkUsers.style.color = "#008000";
    				} else {
    					checkUsers.innerHTML = "×"
    					checkUsers.style.color = "#FF0000";
    				}
    			}
    
    			function checkPwd(y) {
    				var pwd = document.getElementById("pwd").value;
    				var pwdRight = document.getElementById("pwdRight").value;
    				var pwdReg = /^[0-9a-zA-Z_]{6,}$/
    				var checkPwd = document.getElementById("checkPwd");
    				var checkPwdR = document.getElementById("checkPwdRight");
    				if (y == 1) {
    					checkPwd
    					if (pwdReg.test(pwd)) {
    						checkPwd.innerHTML = "√"
    						checkPwd.style.color = "#008000";
    					} else {
    						checkPwd.innerHTML = "×"
    						checkPwd.style.color = "#FF0000";
    					}
    					if (pwd !== pwdRight) {
    						checkPwdR.innerHTML = "×";
    						checkPwdR.style.color = "#FF0000";
    					}
    				} else if (y == 2) {
    					if (!pwdReg.test(pwd)) {
    						alert("请先输入正确的密码！")
    						checkPwdR.innerHTML = "×";
    						checkPwdR.style.color = "#FF0000";
    					} else {
    						if (pwd === pwdRight) {
    							checkPwdR.innerHTML = "√";
    							checkPwdR.style.color = "#008000";
    						} else {
    							checkPwdR.innerHTML = "×";
    							checkPwdR.style.color = "#FF0000";
    						}
    					}
    				}
    			}
    
    			function check() {
    				var checkUsers = document.getElementById("checkUsers").innerHTML;
    				var checkPwd = document.getElementById("checkPwd").innerHTML;
    				var checkPwdR = document.getElementById("checkPwdRight").innerHTML;
    				var choose = document.getElementById("choose");
    				var index = choose.selectedIndex;
    				var city = choose.options[index].value;
    				console.log()
    				if (checkUsers == "√" && checkPwd == "√" && checkPwdR == "√" && city >= 0) {
    					alert("注册成功!!!");
    				} else if (checkUsers != "√") {
    					alert("账号格式不正确!");
    				} else if (checkPwd != "√") {
    					alert("密码格式不正确!")
    				} else if (checkPwdR != "√") {
    					alert("两次密码不相同！")
    				} else if (city < 0) {
    					alert("请选择您所在的城市！")
    				}
    
    			}
    		</script>
    	</body>
    </html>

效果图：

![d73d84567699408983a5fc8ba9814051.png][]

[d73d84567699408983a5fc8ba9814051.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/488fae556bac4a20b0f6736c674d5f5c.png