注册表单提交

浪漫季

已于 2023-01-18 13:35:48 修改

阅读量433

点赞数

文章标签： javascript 前端 html

于 2023-01-18 12:28:30 首次发布

本文链接：https://blog.csdn.net/lishunyu1226/article/details/128725058

版权

文章介绍了如何使用HTML创建一个包含昵称、姓名等字段的注册表单，通过CSS设置样式，以及利用JavaScript编写验证函数，包括昵称长度、姓名限制、QQ号、手机号和邮箱格式的验证，并确保密码和确认密码的一致性。

摘要由CSDN通过智能技术生成

注册表单提交

内容
原理
html
css
js

内容

1.表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以及提交和重置按钮；
2.点击表单里的输入框，隐藏提示文字；
3.点击提交和重置按钮时，都需要有相应的提示；
4.在表单提交是，需要进行验证验证填写内容是否合理：昵称不超过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同。

原理

编写正则表达式确定校验规则
编写校验函数
再用if判断

html

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="https://www.baidu.com" id="userform">
			<table>
				<tr>
					<th>昵称：</th>
					<th><input type="text" id="username" name="id" /></th>
					<th><span id="error1" style="color: red;"></th>
				</tr>
				<tr>
					<th>姓名：</th>
					<th><input type="text" id="username" name="id" /></th>
					<th><span id="error1" style="color: red;"></th>
				</tr>
				<tr>
					<th>qq号:</th>
					<th><input type="text" id="username" name="id" /></th>
					<th><span id="error1" style="color: red;"></th>
				</tr>
				<tr>
					<th>手机号：</th>
					<th><input type="text" id="username" name="id" /></th>
					<th><span id="error1" style="color: red;"></th>
				</tr>
                <tr>
					<th>邮箱地址：</th>
					<th><input type="text" id="email" name="email" /></th>
					<th><span id="error3" style="color: red;"></th>
				</tr>
				<tr>
					<th>密码：</th>
					<th><input type="password" id="userpwd1" /></th>
				</tr>
				<tr>
					<th>确认密码：</th>
					<th><input type="password" id="userpwd2" name="pwd" /></th>
					<th><span id="error2" style="color: red;"></th>
				</tr>
				<tr>
					<th><input type="button" value="提交" id="start" /></th>
					<th><input type="reset" value="重置" id="reset" /></th>
				</tr>
			</table>
		</form>
	</body>
</html>

css

#error1{
				font-size: 8px;
			}
			#error2{
				font-size: 8px;
			}
			#error3{
				font-size: 8px;
			}
			#start{
				background-color: #ffffff;
				height: 30px;
				width: 60px;
				border-radius: 25px;
			}
			#reset{
				background-color:#ffffff;
				height: 30px;
				width: 60px;
				border-radius: 25px;
			}
			table{
				position: absolute;
				border: 1px;
				left:40%;
				top: 20%;
			}
			#userpwd1,#userpwd2{
				background-color:#ffffff;
			}

js

		<script type="text/javascript">
			window.onload=function(){
				//用户名
				var usernameElt=document.getElementById("username");
				//错误信息1
				var error1=document.getElementById("error1");
				usernameElt.onblur=function(){
					var username=usernameElt.value;
					//清空字符串前后空白
					username=username.trim();
					var usernameRegExp=/[0-9]+[a-zA-Z]+[0-9a-zA-Z]*|[a-zA-Z]+[0-9]+[0-9a-zA-Z]*/;
					var ok=usernameRegExp.test(username);
					if(username==""){
						error1.innerText="昵称不能为空!";
					}else if(username.length<6||username.length>12){
						error1.innerText="昵称长度应该在0-10之间!";
					}else if(!ok){
						error1.innerText="昵称必须是字母和数字的组合!";
					}else {
						error1.innerText="";
					}
				}
				usernameElt.onfocus=function(){
					//如果有错误，将用户名清空
					if(error1.innerText!=""){
						usernameElt.value="";
					}
					error1.innerText="";
				}
				
				//错误信息2
				var error2=document.getElementById("error2");
				//密码
				var userpwd1Elt=document.getElementById("userpwd1");
				var userpwd2Elt=document.getElementById("userpwd2");
				userpwd2Elt.onblur=function(){
					var p1=userpwd1Elt.value;
					var p2=userpwd2Elt.value;
					if(p2!=p1){
						error2.innerText="密码不一致!";
					}else{
						error2.innerText="";
					}
				}
				userpwd2Elt.onfocus=function(){
					if(error2.innerText!=""){
						userpwd2Elt.value="";
					}
					error2.innerText="";
				}
				
				//错误信息3
				var error3=document.getElementById("error3");
				//邮箱
				var emailElt=document.getElementById("email");
				emailElt.onblur=function(){
					var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+(-.\w+)*$/;
					var ok=emailRegExp.test(emailElt.value);
					if(ok){
						error3.innerText="";
					}else{
						error3.innerText="邮箱格式错误!";
					}
				}
				emailElt.onfocus=function(){
					//如果有错误，将用户名清空
					if(error3.innerText!=""){
						emailElt.value="";
					}
					error3.innerText="";
				}
				
				//注册按钮
				document.getElementById("start").onclick=function(){
					//先触发blur 
					usernameElt.focus();
					username.blur();
					
					userpwd2Elt.focus();
					userpwd2Elt.blur();
					
					emailElt.focus();
					emailElt.blur();
					//再判断
					if(error1.innerText==""
					&&error2.innerText==""
					&&error3.innerText==""){
						alert("注册成功!");
						//获取表单对象，并提交
						document.getElementById("userform").submit();
					}else{
						alert("请输入正确信息!");
					}
				}
			}
		</script>