JavaScript——编写注册页面，使用正则表达式完成相关验证，使用alert弹出

心已赠人 2024-04-06 12:30 11阅读 0赞

菜鸟分享代码

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		欢迎注册**网站<br>
    		姓名：<input type="text" id="users" placeholder="2-4个中文" /><br />
    		密码：<input type="password" id="pwd" placeholder="至少六位,只能字母数字下划线" /><br />
    		邮箱：<input type="email" id="email" placeholder="单域名邮箱" /><br />
    		年龄：<input type="text" id="age" placeholder="整数" /><br />
    		<input type="button" id="check" value="验证信息" />
    		<script>
    			// 编写注册页面，使用正则表达式完成相关验证，可以使用alert弹出。
    			document.getElementById("check").onclick = function() {
    				var users = document.getElementById("users").value;//获取姓名的值
    				var password = document.getElementById("pwd").value;//获取密码的值
    				var email = document.getElementById("email").value;//获取邮箱的值
    				var age = document.getElementById("age").value;//获取年龄的值
    				var uReg = /^[\u4e00-\u9fa5]{2,4}$/;
    				var pReg = /^[1-9a-zA-Z_]{6}$/;
    				var eReg = /^[0-1a-zA-Z_]+@[0-9a-zA-Z_]+[\.]{1}[0-9a-zA-Z_]+$/;
    				var aReg = /^[1-9]{1}$/;
    				if (uReg.test(users) && pReg.test(password) && eReg.test(email) && aReg.test(age)) {
    					alert("注册成功");
    				} else if (!uReg.test(users)) {
    					alert("姓名不符合规范")
    				} else if (!pReg.test(password)) {
    					alert("密码不符合规范")
    				} else if (!eReg.test(email)) {
    					alert("邮箱不符合规范")
    				} else if (!aReg.test(age)) {
    					alert("年龄不符合规范")
    				}
    			}
    		</script>
    	</body>
    </html>

效果图

![a5eb851631a74bc0a4a0e238b6f3cfcd.png][]

[a5eb851631a74bc0a4a0e238b6f3cfcd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/00ad7b53f1ed4b48b7c3f7679b838ef8.png