JavaScript实现完整的表单验证对邮箱用户名和密码一致性检测并拦截提交-----JavaScript

柔情只为你懂 2024-02-19 10:46 11阅读 0赞

>     <!DOCTYPE html>
>     
>     <html lang="en" id="myHtml">
>     	<head>
>     		
>     		<meta charset="UTF-8">
>     		<meta name="viewport" content="width=device-width, initial-scale=1.0">
>     		<title>HtmlAll</title>
>     		<style type="text/css">
>     			span
>     			{
>     				color: red;
>     				font-size: 12px;
>     			}
>     		</style>
>     	</head>
>     	<body>
>     		
>     		
>     		
>     		<script type="text/javascript">
>     			window.onload = function()
>     			{
>     				var UF = document.getElementById("usernameError");
>     				//通过浏览器窗体获取了html元素
>     				document.getElementById("btn").onclick = function()
>     				{
>     					alert(btn);
>     				}
>     				document.getElementById("get").onclick = function()
>     				{
>     					alert(document.getElementById("txt").value);
>     					document.getElementById("nwx").value = "jack";
>     				}
>     				var un = document.getElementById("username");
>     				un.onblur = function()
>     				{
>     					username = un.value;
>     					username = username.trim();
>     					if(username)
>     					{
>     						//代表非空
>     						if(username.length < 6 || username.length > 14)
>     						{
>     							//用户名长度非法
>     							UF.innerText = "用户名必须在6到14之间";
>     						}
>     						else
>     						{
>     							//用户名长度合法
>     							//判断是否有非法字符
>     							var regExp = /^[A-Za-z0-9]+$/;
>     							if(regExp.test(username))
>     							{
>     								//合法
>     							}
>     							else
>     							{
>     								//不合法
>     								UF.innerText = "用户名只能由数字和字母组成";
>     							}
>     						}
>     					}
>     					else
>     					{
>     						//代表空
>     						//提示信息
>     						UF.innerText = "用户名不能为空";
>     					}
>     				}
>     				un.onfocus = function()
>     				{			
>     					//这里要先检测再清空,这样就可以判断内容是否为空格组成用于清理
>     					if(UF.innerText != "")
>     					{
>     						//清空空格内容
>     						un.value = "";
>     					}
>     					//清空提示信息
>     					UF.innerText = "";
>     				}
>     				document.getElementById("pwd2").onblur = function()
>     				{
>     					var pwd1 = document.getElementById("pwd1").value;
>     					var pwd2 = document.getElementById("pwd2").value;
>     					if(pwd1 != pwd2)
>     					{
>     						//密码错误的提示标签提示错误
>     						document.getElementById("pwdError").innerText = "两次输入的密码不一致";
>     					}
>     					if(pwd1 === "" || pwd2 === "")
>     					{
>     						document.getElementById("pwdError").innerText = "密码不能为空";
>     					}
>     				}
>     				document.getElementById("pwd2").onfocus = function()
>     				{
>     					if(document.getElementById("pwdError").innerText != "")
>     					{
>     						document.getElementById("pwdError").innerText = "";
>     					}
>     				}
>     				document.getElementById("email").onblur = function()
>     				{
>     					var email = document.getElementById("email").value;
>     					var emailRegExp = /^[A-Za-z0-9]+([-._][A-Za-z0-9]+)*@[A-Za-z0-9]+(-[A-Za-z0-9]+)*(\.[A-Za-z]{2,6}|[A-Za-z]{2,4}\.[A-Za-z]{2,3})$/;
>     					if(emailRegExp.test(email))
>     					{
>     						
>     					}
>     					else
>     					{
>     						//没过
>     						document.getElementById("emailnameError").innerText = "必须输入一个邮箱";
>     					}
>     				}
>     				document.getElementById("email").onfocus = function()
>     				{
>     					if(document.getElementById("emailnameError").innerText != "")
>     					{
>     						document.getElementById("emailnameError").innerText = "";
>     					}
>     				}
>     				document.getElementById("myForm").onsubmit = function()
>     				{
>     					
>     				}
>     				document.getElementById("update").onclick = function()
>     				{
>     					document.getElementById("username").onblur();
>     					document.getElementById("pwd2").onblur();
>     					document.getElementById("email").onblur();
>     					var emailnameError = document.getElementById("emailnameError").innerText;
>     					var emailnameError = document.getElementById("pwdError").innerText;
>     					if(UF.innerText === "" && emailnameError === "" && pwdError === "")
>     					{
>     						document.getElementById("myForm").submit();
>     					}
>     					else
>     					{
>     						alert("输入信息有误");
>     					}
>     				}
>     			}
>     		</script>
>     		<input type="button" id="btn" value="hello"/>
>     		<input type="text" id="txt"/>
>     		<input type="button" id="get" value="获取文本的value"/>
>     		<input type="text" id="nwx"/>
>     		<input type="text" value="哈哈哈哈哈哈哈哈哈" onblur="alert(this.value)"/>
>     		<div>
>     			<table>
>     				<form id="myForm" action="http://www.baidu.com">
>     					<tr>
>     						<th>
>     							用户名:
>     						</th>
>     						<th>
>     							<input type="text" id="username"/>
>     							
>     						</th>
>     						<th>
>     							<span id="usernameError"></span>
>     						</th>
>     					</tr>
>     					<tr>
>     						<th>
>     							密码:
>     						</th>
>     						<th>
>     							<input id="pwd1" type="text"/>
>     						</th>
>     					</tr>
>     					<tr>
>     						<th>
>     							确认密码:
>     						</th>
>     						<th>
>     							<input id="pwd2" type="text"/>
>     						</th>
>     						<th>
>     							<span id="pwdError"></span>
>     						</th>
>     					</tr>
>     					<tr>
>     						<th>
>     							邮箱:
>     						</th>
>     						<th>
>     							<input id="email" type="email"/>							
>     						</th>
>     						<th>
>     							<span id="emailnameError"></span>
>     						</th>
>     					</tr>
>     					<tr>
>     						<th>
>     							注册或重置
>     						</th>
>     						<th>
>     							<input id="update" type="button" value="注册"/>
>     							<input type="reset" value="重置"/>
>     						</th>
>     					</tr>
>     				</form>
>     			</table>
>     		</div>
>     	</body>
>     </html>
> 
> <!DOCTYPE html>  
>   
> <html lang="en" id="myHtml">  
> <head>  
>   
> <meta charset="UTF-8">  
> <meta name="viewport" content="width=device-width, initial-scale=1.0">  
> <title>HtmlAll</title>  
> <style type="text/css">  
> span  
> \{  
> color: red;  
> font-size: 12px;  
> \}  
> </style>  
> </head>  
> <body>  
>   
>   
>   
> <script type="text/javascript">  
> window.onload = function()  
> \{  
> var UF = document.getElementById("usernameError");  
> //通过浏览器窗体获取了html元素  
> document.getElementById("btn").onclick = function()  
> \{  
> alert(btn);  
> \}  
> document.getElementById("get").onclick = function()  
> \{  
> alert(document.getElementById("txt").value);  
> document.getElementById("nwx").value = "jack";  
> \}  
> var un = document.getElementById("username");  
> un.onblur = function()  
> \{  
> username = un.value;  
> username = username.trim();  
> if(username)  
> \{  
> //代表非空  
> if(username.length < 6 || username.length > 14)  
> \{  
> //用户名长度非法  
> UF.innerText = "用户名必须在6到14之间";  
> \}  
> else  
> \{  
> //用户名长度合法  
> //判断是否有非法字符  
> var regExp = /^\[A-Za-z0-9\]+$/;  
> if(regExp.test(username))  
> \{  
> //合法  
> \}  
> else  
> \{  
> //不合法  
> UF.innerText = "用户名只能由数字和字母组成";  
> \}  
> \}  
> \}  
> else  
> \{  
> //代表空  
> //提示信息  
> UF.innerText = "用户名不能为空";  
> \}  
> \}  
> un.onfocus = function()  
> \{  
> //这里要先检测再清空,这样就可以判断内容是否为空格组成用于清理  
> if(UF.innerText != "")  
> \{  
> //清空空格内容  
> un.value = "";  
> \}  
> //清空提示信息  
> UF.innerText = "";  
> \}  
> document.getElementById("pwd2").onblur = function()  
> \{  
> var pwd1 = document.getElementById("pwd1").value;  
> var pwd2 = document.getElementById("pwd2").value;  
> if(pwd1 != pwd2)  
> \{  
> //密码错误的提示标签提示错误  
> document.getElementById("pwdError").innerText = "两次输入的密码不一致";  
> \}  
> if(pwd1 === "" || pwd2 === "")  
> \{  
> document.getElementById("pwdError").innerText = "密码不能为空";  
> \}  
> \}  
> document.getElementById("pwd2").onfocus = function()  
> \{  
> if(document.getElementById("pwdError").innerText != "")  
> \{  
> document.getElementById("pwdError").innerText = "";  
> \}  
> \}  
> document.getElementById("email").onblur = function()  
> \{  
> var email = document.getElementById("email").value;  
> var emailRegExp = /^\[A-Za-z0-9\]+(\[-.\_\]\[A-Za-z0-9\]+)\*@\[A-Za-z0-9\]+(-\[A-Za-z0-9\]+)\*(\\.\[A-Za-z\]\{2,6\}|\[A-Za-z\]\{2,4\}\\.\[A-Za-z\]\{2,3\})$/;  
> if(emailRegExp.test(email))  
> \{  
>   
> \}  
> else  
> \{  
> //没过  
> document.getElementById("emailnameError").innerText = "必须输入一个邮箱";  
> \}  
> \}  
> document.getElementById("email").onfocus = function()  
> \{  
> if(document.getElementById("emailnameError").innerText != "")  
> \{  
> document.getElementById("emailnameError").innerText = "";  
> \}  
> \}  
> document.getElementById("myForm").onsubmit = function()  
> \{  
>   
> \}  
> document.getElementById("update").onclick = function()  
> \{  
> document.getElementById("username").onblur();  
> document.getElementById("pwd2").onblur();  
> document.getElementById("email").onblur();  
> var emailnameError = document.getElementById("emailnameError").innerText;  
> var emailnameError = document.getElementById("pwdError").innerText;  
> if(UF.innerText === "" && emailnameError === "" && pwdError === "")  
> \{  
> document.getElementById("myForm").submit();  
> \}  
> else  
> \{  
> alert("输入信息有误");  
> \}  
> \}  
> \}  
> </script>  
> <input type="button" id="btn" value="hello"/>  
> <input type="text" id="txt"/>  
> <input type="button" id="get" value="获取文本的value"/>  
> <input type="text" id="nwx"/>  
> <input type="text" value="哈哈哈哈哈哈哈哈哈" οnblur="alert(this.value)"/>  
> <div>  
> <table>  
> <form id="myForm" action="http://www.baidu.com">  
> <tr>  
> <th>  
> 用户名:  
> </th>  
> <th>  
> <input type="text" id="username"/>  
>   
> </th>  
> <th>  
> <span id="usernameError"></span>  
> </th>  
> </tr>  
> <tr>  
> <th>  
> 密码:  
> </th>  
> <th>  
> <input id="pwd1" type="text"/>  
> </th>  
> </tr>  
> <tr>  
> <th>  
> 确认密码:  
> </th>  
> <th>  
> <input id="pwd2" type="text"/>  
> </th>  
> <th>  
> <span id="pwdError"></span>  
> </th>  
> </tr>  
> <tr>  
> <th>  
> 邮箱:  
> </th>  
> <th>  
> <input id="email" type="email"/>  
> </th>  
> <th>  
> <span id="emailnameError"></span>  
> </th>  
> </tr>  
> <tr>  
> <th>  
> 注册或重置  
> </th>  
> <th>  
> <input id="update" type="button" value="注册"/>  
> <input type="reset" value="重置"/>  
> </th>  
> </tr>  
> </form>  
> </table>  
> </div>  
> </body>  
> </html>