Web前端-简单注册页面（js）

阿兜BAI

已于 2024-06-15 23:21:14 修改

阅读量455

点赞数 6

文章标签：前端 javascript

于 2024-06-12 23:31:21 首次发布

本文链接：https://blog.csdn.net/2302_79643763/article/details/139638508

版权

前言

该注册界面包含了用户名、邮箱、密码及确认密码的输入项，每一点都有非空校验和正则校验，在js中书写。

当输入所有部分后，点击注册按钮后在输入框下面会显示相关提示信息，若输入格式正确显示为绿色，若输入格式有误则会显示为红色。

展示效果

代码部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
            /* 背景图的url自行设置 */
			background-image: url("img/bgi4.jpg");
		}
		form{
			margin: 80px auto;
			width: 400px;
			height: 500px;
			border: 1px solid whitesmoke;
			/* 背景模糊 */
			backdrop-filter: blur(5px); 
		}
		h2{
			width: 400px;
			height: 50px;
			color: cadetblue;
			background-color: whitesmoke;
			text-align: center;
			line-height: 42px;
		}
		.center{
			margin: 38px auto;
			width: 272px;
			height: 366px;
		}
		.content{
			width: 272px;
			height: 34px;
		}
		.center p{
			margin-top: 0;
			padding-bottom: 40px;
			height: 5px;
		}
		.button{
			width: 272px;
			height: 34px;
			color: white;
			background-color: skyblue;
			border: 1px solid skyblue;
		}
	</style>
	<body>
		<form>
			<h2>注册账号</h2>
			<div class="center">
				<input type="text" placeholder="用户名" id="username" class="content" required/>
				<p id="err-user"></p>
				<input type="text" placeholder="邮箱" id="email" class="content" required/>
				<p id="err-email"></p>
				<input type="password" placeholder="密码" id="password" class="content" required/>
				<p id="err-pwd"></p>
				<input type="password" placeholder="确认密码" id="repassword" class="content" required />
				<p id="err-check"></p>
				<input type="button" value="注册" class="button" onclick="validateForm()"/>
			</div>
		</form>
	</body>
	<script>
		function validateForm(){
			// 用户名以字母开头，4-6位数字字母组成
			var username = document.getElementById("username").value;
			var err_user = document.getElementById("err-user");
			if(username == ""){ 
				err_user.innerHTML = "用户名不能为空";
				err_user.style.color = "red";
			}else{
				var result = /^[a-zA-z][-_0-9a-zA-Z]{3,5}$/.test(username);
				if(result){
					err_user.innerHTML = "用户名可用";
					err_user.style.color = "green";
				}else{
					err_user.innerHTML = "请输入4-6个由字母和数字组成的用户名";
					err_user.style.color = "red";
				}
			}
			
			//邮箱：数字字母+@+数字字母+.com|cn|net|org
			var email = document.getElementById("email").value;
			var err_email = document.getElementById("err-email");
			if(email == ""){
				err_email.innerHTML = "邮箱不能为空";
				err_email.style.color = "red";
			}else{
				var result = /^[0-9a-zA-Z]+@+[0-9a-zA-Z]+(.com|cn|net|org)$/.test(email);
				if(result){
					err_email.innerHTML = "邮箱格式正确";
					err_email.style.color = "green";
				}else{
					err_email.innerHTML = "请输入正确的邮箱格式";
					err_email.style.color = "red";
				}
			}
			
			//密码:6-10位由字母开头，数字字母特殊字符的密码
			var password = document.getElementById("password").value;
			var err_pwd = document.getElementById("err-pwd");
			if(password == ""){
				err_pwd.innerHTML = "密码不能为空";
				err_pwd.style.color = "red";
			}else{
				var result = /^[a-zA-z][-_0-9a-zA-Z!@?]{5,9}$/.test(password);
				if(result){
					err_pwd.innerHTML = "密码格式正确";
					err_pwd.style.color = "green";
				}else{
					err_pwd.innerHTML = "请输入6-10位由字母开头，数字字母特殊字符的密码";
					err_pwd.style.color = "red";
				}
			}
			
			//确认密码：两次输入密码相同
			var repassword = document.getElementById("repassword").value;
			var err_repwd = document.getElementById("err-check");
			if(repassword == ""){
				err_repwd.innerHTML = "确认密码不能为空";
				err_repwd.style.color = "red";
			}else{
				if(repassword == password){
					err_repwd.innerHTML = "两次密码相同";
					err_repwd.style.color = "green";
				}else{
					err_repwd.innerHTML = "两次密码不同";
					err_repwd.style.color = "red";
				}
			}
		}
	</script>
</html>