javascript实现注册功能 javascript用户注册代码

转载

mob64ca13f587aa 2024-05-29 05:55:45

文章标签 javascript实现注册功能 java javascript js html 文章分类 JavaScript 前端开发

用JavaScript完成注册的逻辑

代码

讲解都在注释里面

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>登录</title>
	</head>

	<body>
		<!-- HTML代码  -->
		<span>用户名:</span><input type="text" id="userName" onblur="userNameFormat()" placeholder="长度在3-15&&非数字开头" />
		<span id="userNameCheck"></span><br />
		<span>密码:</span><input type="text" id="pwd" onblur="pwdFormat()" placeholder="长度在6-18&&含数字和字母" />
		<span id="pwdCheck"></span><br />
		<input type="button" value="注册" onclick="btnCheck()" />

		<!-- JavaScript代码  -->
		<script>
			// 初始化判断输入的用户名和密码是否可以注册
			var isUserNameReg = false; //false表示用户名输入非法
			var isPwdReg = false; //false表示密码输入非法

			// 用户名的格式判断方法
			function userNameFormat() {
				// 获取输入的用户名
				var userName = document.getElementById("userName").value;

				// 判断用户名的长度	
				if(userName.length >= 3 && userName.length <= 15) {
					// 当用户名的长度大于3小于15时执行以下内容
					var userNameFirst = userName.charAt(0); // 获取用户名第一个字符
					// 判断第一个字符是否是数字开头
					if(isNaN(userNameFirst)) {
						// 当用户名的第一个字符不是数字开头时,验证通过
						var pass = "<span style='color: green;'>验证通过</span>";
						document.getElementById("userNameCheck").innerHTML = pass;
						// true表示验证通过,这里表示用户名验证通过
						isUserNameReg = true;
					} else {
						// 当第一个字符是数字时,提示非法
						var notPass = "<span style='color: red;'>*非法,第一个字符不能为数字</span>"
						document.getElementById("userNameCheck").innerHTML = notPass;
						isUserNameReg = false; // false表示输入非法
					}

				} else {
					// 当用户名小于3大于15执行以下内容
					var notPass = "<span style='color: red;'>*非法,长度不符合要求</span>"
					document.getElementById("userNameCheck").innerHTML = notPass;
					isUserNameReg = false; // false表示输入非法
				}
			}

			// 密码的格式判断方法
			function pwdFormat() {
				// 获取输入的密码
				var pwd = document.getElementById("pwd").value;

				// 判断密码的长度
				if(pwd.length >= 6 && pwd.length <= 18) {
					// 当密码的长度大于6小于18时执行以下内容
					if(!isNaN(pwd)) {
						// 当密码只含有数字时
						var notPass = "<span style='color: red;'>*非法,只含有数字</span>";
						document.getElementById("pwdCheck").innerHTML = notPass;
						isPwdReg = false; // false表示输入非法
					} else {
						// 循环找到每个密码的字符并判断
						var pwdIsLetter = false;
						for(var i = 0; i < pwd.length; i++) {
							// 判断当前字符是不是数字
							if(isNaN(pwd.charAt(i))) {
								// 如果当前字符是字母的话pwdIsLetter为true
								pwdIsLetter = true;
							} else {
								// 如果当前字符是数字的话pwdIsLetter为false,并退出循环
								pwdIsLetter = false;
								break;
							}
						}

						// 判断 如果都是字母的话 那么提示非法 如果有一个数字的话那么验证就通过
						if(pwdIsLetter == true) {
							// 如果都是字母,提示非法
							var notPass = "<span style='color: red;'>*非法,只含有字母</span>";
							document.getElementById("pwdCheck").innerHTML = notPass;
							isPwdReg = false; // false表示输入非法
						} else {
							// 如果至少有一个数字,验证就通过
							var pass = "<span style='color: green;'>验证通过</span>";
							document.getElementById("pwdCheck").innerHTML = pass;
							isPwdReg = true; // true表示验证通过,这个地方表示密码验证通过
						}
					}

				} else {
					// 当密码的长度小于6大于18时执行以下内容
					var notPass = "<span style='color: red;'>*非法,长度不符合要求</span>";
					document.getElementById("pwdCheck").innerHTML = notPass;
					isPwdReg = false; // false表示输入非法
				}

			}

			// 按钮的判断
			function btnCheck() {
				// 可以注册成功的条件
				var isReg = isUserNameReg == true && isPwdReg == true;
				if(isReg) {
					// 提示注册成功
					alert("恭喜你,注册成功!");
				} else {
					// 提示注册失败
					alert("注册失败,账户名或密码有非法输入!");
				}

			}
		</script>
	</body>

</html>