JS中获取用户名的标签＜span＞，简称usernameErrorSpan,位置放置错误

最新推荐文章于 2022-11-08 23:02:05 发布

Jackielei编程日记

最新推荐文章于 2022-11-08 23:02:05 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/m0_52086371/article/details/118882861

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

我这是学习js过程中遇见的问题，找了半个小时bug，发现获取用户名的标签<span>，简称usernameErrorSpan,位置放置错误。

//获取username的span标签

var usernameErrorSpan = document.getElementById("username");

先看一下源码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>表单创建</title>
       <style type="text/css">
           span {
               color: red;
               font-size: 12px;
           }
       </style>
   </head>
   <body>
       <script type="text/javascript">
       /*
       （1）用户名不能为空
       （2）用户名必须在6-14位之间
       （3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
       （4）密码和确认密码一致，邮箱地址合法。
       （5）统一失去焦点验证
       （6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
       （7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
       （8）最终表单中所有项均合法方可提交
       */

       window.onload = function(){

           //给用户名文本框绑定失去焦点blur事件
           var usernameEln = document.getElementById("username");
           usernameEln.onblur = function(){
               //获取用户名
               var username = usernameEln.value;
               //去除前后空白
               username = username.trim();
                   //判断用户名不能为空
                   //获取username的span标签（就是这里位置错误，这是针对用户名失去焦点blur获取的span标签，如果要想用户名的获取焦点foucs就不能调用这个属性）
                   var usernameErrorSpan = document.getElementById("usernameError");
                   if(username ==""){
                       usernameErrorSpan.innerText= "用户名不能为空！";
                   }else{
                       //用户名不为空
                       //用户名的长度[6-14]
                       if(username.length < 6 || username.length > 14){
                           usernameErrorSpan.innerText = "用户名长度不合法！";
                       }else{
                           //用户名长度合法
                           //用户名是否有特殊符号,正则表达式
                           var regExp = /^[a-zA-Z0-9]+$/;
                           var ok = regExp.test(username);
                           if(ok){
                               //用户名符号合法
                           }else{
                               usernameErrorSpan.innerText = "用户名只能由数字和字母组成！";
                           }
                   }
               }
           }
       // 给username这个文本框绑定获得焦点事件
           usernameEln.onfocus = function(){
                           // 清空非法的value
                           if(usernameErrorSpan.innerText != ""){
                               usernameEln.value = "";
                           }
                           // 清空span
                           usernameErrorSpan.innerText = "";
           }


       }

       </script>

       <form action="" method="get">
       用户名<input type="text" name="username" id="username" /><span id="usernameError"></span><br>
       密码<input type="text" name="userpwd" id="userpwd" /><br>
       确认密码<input type="text" id="userpwd1" /><span id="userpwdError"></span><br>
       邮箱<input type="text" name="email" id="email" /><span id="emailError"></span><br>
       <input type="button" value="提交" id="submit" />   
       <input type="reset" value="重置" />
       </form>

   </body>
</html>

正确修改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单创建</title>	
		<style type="text/css">
			span {
				color: red;
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
		/*
		（1）用户名不能为空
		（2）用户名必须在6-14位之间
		（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
		（4）密码和确认密码一致，邮箱地址合法。
		（5）统一失去焦点验证
		（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
		（7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
		（8）最终表单中所有项均合法方可提交
		*/
	   
		window.onload = function(){
			//获取username的span标签
			var usernameErrorSpan = document.getElementById("usernameError");
			//给用户名文本框绑定失去焦点blur事件
			var usernameEln = document.getElementById("username");
			usernameEln.onblur = function(){
				//获取用户名
				var username = usernameEln.value;
				//去除前后空白
				username = username.trim();
					//判断用户名不能为空
					
					if(username ==""){
						usernameErrorSpan.innerText= "用户名不能为空！";
					}else{
						//用户名不为空
						//用户名的长度[6-14]
						if(username.length < 6 || username.length > 14){
							usernameErrorSpan.innerText = "用户名长度不合法！";
						}else{
							//用户名长度合法
							//用户名是否有特殊符号,正则表达式
							var regExp = /^[a-zA-Z0-9]+$/;
							var ok = regExp.test(username);
							if(ok){
								//用户名符号合法
							}else{
								usernameErrorSpan.innerText = "用户名只能由数字和字母组成！";		
							}
					}
				}
			}
		    // 给username这个文本框绑定获得焦点事件
			usernameEln.onfocus = function(){
							   // 清空非法的value
							   if(usernameErrorSpan.innerText != ""){
								   usernameEln.value = "";   
							   }
							   // 清空span
							   usernameErrorSpan.innerText = "";
			}
			
			
		}

		</script>
		
		<form action="" method="get">
		用户名<input type="text" name="username" id="username" /><span id="usernameError"></span><br>
		密码<input type="text" name="userpwd" id="userpwd" /><br>
		确认密码<input type="text" id="userpwd1" /><span id="userpwdError"></span><br>
		邮箱<input type="text" name="email" id="email" /><span id="emailError"></span><br>
		<input type="button" value="提交" id="submit" />&nbsp; &nbsp;
		<input type="reset" value="重置" />
		</form>
		
	</body>
</html>

Jackielei编程日记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS中获取用户名的标签＜span＞，简称usernameErrorSpan,位置放置错误

我这是学习js过程中遇见的问题，找了半个小时bug，发现获取用户名的标签<span>，简称usernameErrorSpan,位置放置错误。//获取username的span标签var usernameErrorSpan = document.getElementById("username");先看一下源码<!DOCTYPE html><html> <head> <meta charset="utf-8"...
复制链接

扫一扫