用JavaScript完成注册验证

目录

    • 代码
    • 页面效果

代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				text-align: center;
			}
		</style>
	</head>

	<body>
		<span>用户名:</span><input type="text" id="name" placeholder="长度在3-15&&非数字开头" onblur="judgeName()" /><span id="nameShow"></span><br />
		<span>密码:</span><input type="text" id="pwd" placeholder="长度在6-18&&含数字和字母" onblur="judgePwd()" /><span id="pwdShow"></span><br />
		<input type="button" value="注册" onclick="reg()" />

		<script>
			//如果用户名验证通过把true赋给pwdName
			var pwdName;
			//如果密码验证通过把true赋给pwdText
			var pwdText;
			//判断输入的用户名是否符合规则
			function judgeName() {
				//获取用户名
				var name = document.getElementById("name").value;
				//判断输入的用户名长度
				if(name.length >= 3 && name.length <= 15) {
					//获取输入的第一个字符
					var first = name.charAt(0);
					//如果输入的第一个字符不是数字
					if(isNaN(first)) {
						//输入的第一个字符是数字验证通过
						document.getElementById("nameShow").innerHTML = "验证通过";
						nameText = true;
					} else {
						//输入的第一个字符不是数字输出提示
						document.getElementById("nameShow").innerHTML = "非法,有数字开头";
						nameText = false;
					}
				} else {
					//输入的用户名长度不符合规则输出提示
					document.getElementById("nameShow").innerHTML = "用户名长度不符合规则";
					nameText = false;
				}
			}
			//判断输入的密码是否符合规则
			function judgePwd() {
				//获取密码
				var pwd = document.getElementById("pwd").value;
				//判断输入的密码长度
				if(pwd.length >= 6 && pwd.length <= 18) {
					if(!isNaN(pwd)) {
						//输入的全是数字
						document.getElementById("pwdShow").innerHTML = "密码不能全为数字";
						pwdText = false;

					} else {
						//输入的密码不全为数字(肯定包含字符)
						for(var i = 0; i < pwd.length; i++) {
							if(isNaN(pwd.charAt(i))) {
								document.getElementById("pwdShow").innerHTML = "密码不能全为字母";
								pwdText = false;
							} else {
								document.getElementById("pwdShow").innerHTML = "验证通过";
								pwdText = true;
								break;
							}
						}
					}
				} else {
					//输入的密码长度不符合规则
					document.getElementById("pwdShow").innerHTML = "密码长度不符合规则";
					pwdText = false;
				}
			}
			//判断注册条件
			function reg() {
				//如果用户名和密码同时成立,注册成功
				if(nameText == true && pwdText == true) {
					alert("注册成功!");
				} else {
					alert("注册失败!");
				}
			}
		</script>

	</body>

</html>

页面效果

页面效果
用JavaScript完成注册验证_第1张图片
用户名和密码错误
用JavaScript完成注册验证_第2张图片
用户名和密码验证通过
用JavaScript完成注册验证_第3张图片
注册成功
用JavaScript完成注册验证_第4张图片

你可能感兴趣的:(javascript)