表单验证

最新推荐文章于 2023-03-16 10:17:29 发布

Nydia~

最新推荐文章于 2023-03-16 10:17:29 发布

阅读量81

点赞数

分类专栏： Java 文章标签： js css

本文链接：https://blog.csdn.net/qq_43748400/article/details/115531495

版权

Java 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

表单验证

要求

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证</title>
		<style type="text/css">
		span{
			color:red;
		}
		
		input[type="text"]{
		border:1px solid black;
		text-align:left;
		outline:none;
		font-size:18px;;
		margin-top:5%;
		font-weight: 300;
		font-family: 'Muli', sans-serif;
		border-radius: 4px;
		}
		
		input[type="button"]
		{
		padding:10px 10px 10px 10px;
		border:1px solid black; 
		text-align:left;
		outline:none;
		font-size:18px;
		margin-top:5%;
		font-weight: 300;
		font-family: 'Muli', sans-serif;
		border-radius: 4px;
		}
		
		input[type="reset"]
		{
		padding:10px 10px 10px 10px;
		border:1px solid black; 
		text-align:left;
		outline:none;
		font-size:18px;
		margin-top:5%;
		font-weight: 300;
		font-family: 'Muli', sans-serif;
		border-radius: 4px;
		}
		</style>
	</head>

	<body>
		<script type="text/javascript">
			//页面加载完就执行
			window.onload=function()
			{
				var usernameElt=document.getElementById("userid");
				var useridSpan=document.getElementById("erroruserid");
				
				//1.姓名文本框绑定blur事件
				usernameElt.onblur=function()
				{
					//获取用户名
					var username=usernameElt.value;
					//去除空白
					username=username.trim();
					//判断用户名是否为空
					if(username=="")
					{
						useridSpan.innerText="用户名不能为空，请重新输入";
					}
					else
					{
						//用户名不为空,判断是否为6-14位
						if(username.length<6||username.length>14)
						{
							//用户名不合法
							useridSpan.innerText="用户名长度应为6-14位，请重新输入";
						}
						else{
							//用户名合法，判断是否有特殊符号
							var regExp=/^\w+$/;
							if(!regExp.test(username))
							{
								//用户名有特殊符号不合法
								useridSpan.innerText="用户名不能为特殊字符，请重新输入";
							}
							else{
								//用户名最终合法
							}
						}
					}
				}
				
				//2.姓名文本框绑定focus事件
				usernameElt.onfocus=function()
				{
					//清空非法的value
					if(useridSpan.innerText!="")
					{
						usernameElt.value="";
					}
					//提示信息清空
					useridSpan.innerText="";
					
				}
				
				
				
				
				var pswElt=document.getElementById("psw");
				var pswSpan=document.getElementById("errorpsw");
				//3.密码文本框绑定blur事件
				pswElt.onblur=function()
				{
					//获取密码
					var psw=pswElt.value;
					//去除空白
					psw=psw.trim();
					//判断密码是否为空
					if(psw=="")
					{
						pswSpan.innerText="密码不能为空，请重新输入";
					}
					else
					{
						//密码不为空,判断是否为6-14位
						if(psw.length<6||psw.length>14)
						{
							//密码不合法
							pswSpan.innerText="密码长度应为6-14位，请重新输入";
						}
						else{
							//密码合法，判断是否有特殊符号
							var regExp=/^\w+$/;
							if(!regExp.test(psw))
							{
								//用户名有特殊符号不合法
								pswSpan.innerText="密码不能为特殊字符，请重新输入";
							}
							else{
								//密码最终合法
							}
						}
					}
				}
				
				//4.密码文本框绑定focus事件
				pswElt.onfocus=function()
				{
					//清空非法的value
					if(pswSpan.innerText!="")
					{
						pswElt.value="";
					}
					//提示信息清空
					pswSpan.innerText="";
					
				}
				
				
				
				
				//判断确认密码与密码是否一致
				var psw2Elt=document.getElementById("psw2");
				var psw2Span=document.getElementById("errorpsw2");
				//5.确认密码文本框绑定blur事件
				psw2Elt.onblur=function()
				{
					if(psw2Elt.value!=pswElt.value)
						psw2Span.innerText="与密码不一致，请重新输入";
					
				}
				
				//6.确认密码文本框绑定focus事件
				psw2Elt.onfocus=function()
				{
					//清空非法的value
					if(psw2Span.innerText!="")
					{
						psw2Elt.value="";
					}
					//提示信息清空
					psw2Span.innerText="";
				}
				
				
				
				var emailElt=document.getElementById("email");
				var emailSpan=document.getElementById("erroremail");
				//7.邮箱绑定blur事件
				emailElt.onblur=function()
				{
					var regExp=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
					if(!regExp.test(emailElt.value))
					{
						emailSpan.innerText="邮箱地址不合法，请重新输入";
					}
				}
				
				//8.邮箱文本框绑定focus事件
				emailElt.onfocus=function()
				{
					//清空非法的value
					if(emailSpan.innerText!="")
					{
						emailElt.value="";
					}
					//提示信息清空
					emailSpan.innerText="";
				}
				
				
				//9.给提交按钮绑定鼠标单击事件
				var submitBtnElt=document.getElementById("submitbtn");
				submitBtnElt.onclick=function()
				{
					//触发以上文本框的blur,focus
					//不需要人工操作，使用JS纯代码触发事件
					usernameElt.focus();
					usernameElt.blur();
					pswElt.focus();
					pswElt.blur();
					psw2Elt.focus();
					psw2Elt.blur();
					emailElt.focus();
					emailElt.blur();
					
					//所有表单合法时提交表单
					if(useridSpan.innerText==""&&pswSpan.innerText==""&&psw2Span.innerText==""&&emailSpan.innerText=="")
					{
						var formElt=document.getElementById("formid");
						formElt.submit();
						alert("注册成功");
					}else{
						alert("无法提交，请重新输入");
					}
				}
			}
		</script>
		
		<form id="formid">
		姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：<input type="text" id="userid" name="userid"/><span id="erroruserid"></span><br>
		密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="text" id="psw" name="psw"/><span id="errorpsw"></span><br>
		确认密码：<input type="text" id="psw2" name="psw2"/><span id="errorpsw2"></span><br>
		邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：<input type="text" id="email" name="email"/><span id="erroremail"></span><br>
		<!-- <input type="submit" value="注册" id="submit"/>  submit不管是否合法都会提交-->
		<!-- 判断表单合法后提交-->
		<input type="button" value="注册" id="submitbtn"/>
		<input type="reset" value="重置" id="reset"/>
		</form>
	</body>
</html>