JavaScript实现对表单用户名进行空白验证和长度验证-----JavaScript

柔情只为你懂 2024-02-19 10:07 61阅读 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
>     						{
>     							//用户名长度合法
>     						}
>     					}
>     					else
>     					{
>     						//代表空
>     						//提示信息
>     						UF.innerText = "用户名不能为空";
>     					}
>     				}
>     				un.onfocus = function()
>     				{			
>     					//这里要先检测再清空,这样就可以判断内容是否为空格组成用于清理
>     					if(UF.innerText != "")
>     					{
>     						//清空空格内容
>     						un.value = "";
>     					}
>     					//清空提示信息
>     					UF.innerText = "";
>     				}
>     			}
>     		</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>
>     					<tr>
>     						<th>
>     							用户名:
>     						</th>
>     						<th>
>     							<input type="text" id="username"/>
>     							
>     						</th>
>     						<th>
>     							<span id="usernameError"></span>
>     						</th>
>     					</tr>
>     					<tr>
>     						<th>
>     							密码:
>     						</th>
>     						<th>
>     							<input type="text"/>
>     						</th>
>     					</tr>
>     					<tr>
>     						<th>
>     							确认密码:
>     						</th>
>     						<th>
>     							<input type="text"/>
>     						</th>
>     						<th>
>     							<span id="pwdError"></span>
>     						</th>
>     					</tr>
>     					<tr>
>     						<th>
>     							邮箱:
>     						</th>
>     						<th>
>     							<input type="email"/>							
>     						</th>
>     						<th>
>     							<span id="emailnameError"></span>
>     						</th>
>     					</tr>
>     					<tr>
>     						<th>
>     							注册或重置
>     						</th>
>     						<th>
>     							<input type="submit" 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  
> \{  
> //用户名长度合法  
> \}  
> \}  
> else  
> \{  
> //代表空  
> //提示信息  
> UF.innerText = "用户名不能为空";  
> \}  
> \}  
> un.onfocus = function()  
> \{  
> //这里要先检测再清空,这样就可以判断内容是否为空格组成用于清理  
> if(UF.innerText != "")  
> \{  
> //清空空格内容  
> un.value = "";  
> \}  
> //清空提示信息  
> UF.innerText = "";  
> \}  
> \}  
> </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>  
> <tr>  
> <th>  
> 用户名:  
> </th>  
> <th>  
> <input type="text" id="username"/>  
>   
> </th>  
> <th>  
> <span id="usernameError"></span>  
> </th>  
> </tr>  
> <tr>  
> <th>  
> 密码:  
> </th>  
> <th>  
> <input type="text"/>  
> </th>  
> </tr>  
> <tr>  
> <th>  
> 确认密码:  
> </th>  
> <th>  
> <input type="text"/>  
> </th>  
> <th>  
> <span id="pwdError"></span>  
> </th>  
> </tr>  
> <tr>  
> <th>  
> 邮箱:  
> </th>  
> <th>  
> <input type="email"/>  
> </th>  
> <th>  
> <span id="emailnameError"></span>  
> </th>  
> </tr>  
> <tr>  
> <th>  
> 注册或重置  
> </th>  
> <th>  
> <input type="submit" value="注册"/>  
> <input type="reset" value="重置"/>  
> </th>  
> </tr>  
> </form>  
> </table>  
> </div>  
> </body>  
> </html>