用JavaScript完成注册验证

最新推荐文章于 2024-04-17 09:51:42 发布

星空Liu

最新推荐文章于 2024-04-17 09:51:42 发布

阅读量714

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/XingKongLiu6/article/details/109232800

版权

代码

<!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 = "<span style='color: green;'>验证通过</span>";
						nameText = true;
					} else {
						//输入的第一个字符不是数字输出提示
						document.getElementById("nameShow").innerHTML = "<span style='color: red;'>非法，有数字开头</span>";
						nameText = false;
					}
				} else {
					//输入的用户名长度不符合规则输出提示
					document.getElementById("nameShow").innerHTML = "<span style='color: red;'>用户名长度不符合规则</span>";
					nameText = false;
				}
			}
			//判断输入的密码是否符合规则
			function judgePwd() {
				//获取密码
				var pwd = document.getElementById("pwd").value;
				//判断输入的密码长度
				if(pwd.length >= 6 && pwd.length <= 18) {
					if(!isNaN(pwd)) {
						//输入的全是数字
						document.getElementById("pwdShow").innerHTML = "<span style='color: red;'>密码不能全为数字</span>";
						pwdText = false;

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

	</body>

</html>

页面效果

页面效果
在这里插入图片描述
用户名和密码错误

用户名和密码验证通过

注册成功

星空Liu

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript完成注册验证

目录代码页面效果代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{ text-align: center; } </style> </head> <body> <span>
复制链接

扫一扫