【JS】制作注册页面

最新推荐文章于 2023-04-25 19:37:58 发布

哇，女前端哎！

最新推荐文章于 2023-04-25 19:37:58 发布

阅读量5.3k

点赞数 7

分类专栏： javaScript&jQuery 文章标签： html5 css3 javascript js

本文链接：https://blog.csdn.net/Handsome_gir/article/details/105590044

版权

javaScript&jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

使用js制作注册页面，使用正则表达式验证该数据是否符合要求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
	</head>
	<body>
		<div class="box" id="box">
			<h2>注册</h2>
			<!--请求方式设置为get-->
			<form id="form" action="" method="get">
				<ul>
					<li>
						<label><span>*</span>用户名：</label>
						<!--设置输入框的提示信息-->
						<input type="text" name="username" placeholder="只能输入6-20个字母、数字、下划线" id="username" />
					</li>
					<li>
						<label><span>*</span>电子邮箱：</label>
						<input type="text" name="email" placeholder="输入正确的电子邮箱地址" id="email" />
					</li>
					<li>
						<label><span>*</span>密码：</label>
						<!--输入类型设置为密码类型-->
						<input type="password" name="pwd" placeholder="由字母开头，包含字母、数字、下划线，6-16位" id="pwd" />
					</li>
					<li>
						<!--设置行内元素标签-->
						<label><span>*</span>确认密码：</label>
						<input type="password" name="pwdOk" placeholder="确认密码必须与密码一致" id="pwdOk" />
					</li>
				</ul>
				<!--绑定表单提交方法-->
				<button type="button" onclick="formSubmit()">提交</button>
			</form>
		</div>
	</body>
</html>

css页面

			body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			input{
				border:0;
			}
			.clear:after{
				content: "";
				display: block;
				clear: both;
			}
			.box{
				width: 500px;
				margin:30px auto;
				padding:30px 40px;
				border:1px solid #ddd;
				box-shadow: 0 0 10px #bbb;
				box-sizing: border-box;
			}
			.box h2{
				text-align: center;
				color:#666;
				font-size: 22px;
				line-height: 40px;
			}
			.box form{
				padding:15px 0;
			}
			.box form ul li{
				display: flex;
				height: 40px;
				line-height: 40px;
				margin-bottom: 15px;
			}
			.box form ul li input{
				border:1px solid #ddd;
				height: 38px;
				padding:0 10px;
				line-height: 38px;
				flex:1;
				box-sizing: border-box;
			}
			.box form ul li label{
				display: block;
				width: 120px;
			}
			.box form ul li label span{
				color:red;
				padding-right:10px;
			}
			.box form button{
				width: 100%;
				border:none;
				height: 40px;
				background-color: green;
				color:#fff;
			}

js页面

			//自定义验证用户名的方法
			function validate_strLenght(str){
				var regExp=/^(\w){6,20}$/;
				return regExp.test(str);
			}
			//自定义验证email方法
			function validate_email(str){
				var regExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				return regExp.test(str);
			}
			//自定义验证密码的方法
			function validate_pwd(str){
				var regExp=/^[a-zA-Z]\w{5,15}/;
				return regExp.test(str);
			}
			//根据表单控件的id填写
			var username=document.getElementById("username");
			//通过id获取元素
			var email=document.getElementById("email");
			//根据表单控件pwd的id填写
			var pwd=document.getElementById("pwd");
			var pwdOk=document.getElementById("pwdOk");
			//通过标签名获取元素
			var form=document.getElementsByTagName("form")[0];
			//表单提交
			function formSubmit(){
				//使用自定义方法验证用户名、验证邮箱
				if(validate_strLenght(username.value)&&validate_email(email.value)&&validate_pwd(pwd.value)&&checkOk()){
					//调用表单提交方法
					document.getElementById("form").submit() ;
					alert("登录成功");
				}else{
					//控制台输出
					console.log("验证失败");
				}
			}
			//检查用户名
			username.onblur=function(){
				if(validate_strLenght(username.value)){
					console.log("用户名符合要求");
				}else{
					console.log("用户名不符合要求");
				}
			}
			//检查email
			email.onblur=function(){
				if(validate_email(email.value)){
					console.log("邮箱格式符合要求");
				}else{
					console.log("邮箱格式不符合要求");
				}
			}
			//密码框失去焦点的时候
			pwd.onblur=function(){
				if(validate_pwd(pwd.value)){
					console.log("密码符合要求");
				}else{
					console.log("密码不符合要求");
				}
			}
			function checkOk(){
				if(pwd.value==pwdOk.value){
					console.log("密码与重复密码一致");
					return true;
				}else{
					console.log("密码与重复密码不一致");
					return false;
				}
			}
			pwdOk.onkeyup=checkOk;

哇，女前端哎！

关注

7
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
【JS】制作注册页面

使用js制作注册页面，使用正则表达式验证该数据是否符合要求<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>注册页面</title> </head> <body> <div class="box" id="b...
复制链接

扫一扫