用js代码写表单验证

最新推荐文章于 2020-03-13 21:17:32 发布

oldhunter686

最新推荐文章于 2020-03-13 21:17:32 发布

阅读量230

点赞数

分类专栏： javaScript java学习笔记

本文链接：https://blog.csdn.net/oldhunter686/article/details/103134305

版权

java学习笔记同时被 2 个专栏收录

8 篇文章 1 订阅

订阅专栏

javaScript

2 篇文章 0 订阅

订阅专栏

//需求

在这里插入图片描述

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
	   <style>
        span{
         color:red;
         font-size:20px;
        }
       </style>
   </head>
   <body>
       <script type="text/javascript"> 
          window.onload= function(){
		    var usernameElm = document.getElementById("username");
			var usernameErrorSpan = document.getElementById("usernameError");
			//给usename文本框绑定失去焦点事件
			usernameElm.onblur=function(){
			  //获取用户名
			  var username = usernameElm.value;
			  //去除空白
			  username=username.trim();
			   //判断用户名是否为空
			   //获取sapn标签
			   var usernameErrorSpan = document.getElementById("usernameError");
			   if(username==""){
			      usernameErrorSpan.innerText="用户名不能为空！"
			   }else{
			         if(username.length<6||username.length>14){
				     //用户名非法
				     usernameErrorSpan.innerText="用户名长度必须在6—14个字符之间"
				     }else{
				           //用正则表达式判断是否有特殊字符
				           var regExp=/^[A-Za-z0-9]+$/;
					       if(!regExp.test(username)){
					        usernameErrorSpan.innerText="用户名只能由字母和数字组成！"
					      }
				  }
			   }
			}
			//给usename文本框绑定获得焦点事件
			usernameElm.onfocus=function(){
			  //清空非法用户名,该操作应该放在清除span之前
			  if(usernameErrorSpan.innerText!=""){
			     usernameElm.value="";
				  //清空Errorspan
			  //var usernameErrorSpan = document.getElementById("usernameError"); 将usernameErrorSpan变量写在开始
			  usernameErrorSpan.innerText="";
			  }
			}
			//密码不能为空的情况没有写入
			//给确认密码绑定失去焦点事件
			//获取密码不一致提示的标签
			var pwdError = document.getElementById("pwdError");
			var userpwd2 = document.getElementById("userpwd2");
			userpwd2.onblur=function(){
			  var userpwd = document.getElementById("userpwd");
			  if(userpwd.value!=userpwd2.value){
			     pwdError.innerText="两次输入的密码不一致！"
			  }
			}
			userpwd2.onfocus=function(){
			   //清空非法密码
			   if(pwdError.innerText!=""){
			      userpwd2.value=""; 
			   }
			   //清空span
			   pwdError.innerText="";
			}
			//给邮箱绑定blur事件
			var email =document.getElementById("email");
			//获取sapn标签
			var emailError=document.getElementById("emailError")
			email.onblur=function(){
			  var emailRegExp=/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/
			  if(emailRegExp.test(email.value)){
			    //邮箱合法
			  }else{
			    emailError.innerText="邮箱不合法！"
			  }
			}
			email.onfocus=function(){
			  //清空非法邮箱
			  if(emailError.innerText!=""){
			     email.value="";
			  }
			  //清空span
			  emailError.innerText="";
			}
			//如果所有表单项合法，点击按钮提交表单
			var submitbutton = document.getElementById("submitbutton")
			submitbutton.onclick=function(){
			   //浏览器自动触发usernameElm userpwd2 email的blur事件
			   usernameElm.focus();
			   usernameElm.blur();
			   userpwd2.focus();
			   userpwd2.blur();
			   email.focus();
			   email.blur();
			   
			  if(usernameErrorSpan.innerText=="" && pwdError.innerText=="" &&emailError.innerText==""){
			    var userform=document.getElementById("userform");
				userform.submit();
			  }
			}
			
		 }
       </script>
       <form id="userform" action="xxxxxxx" method="get">
          <table>
              <tr>
                  <td>用户名</td>
                  <td><input type="text" name="username" id="username"/>
                  <span id = "usernameError"><span>
                  </td> 
              </tr>
              <tr>
                 <td>密码</td>
                 <td><input type="password" name="userpwd" id="userpwd"/></td>
              </tr>
              <tr>
                 <td>确认密码</td>
                 <td><input type="password" id="userpwd2"/>
				 <span id = "pwdError"></span>
				 </td>
              </tr>
              <tr>
                 <td>邮箱</td>
                 <td><input type="text" name="email" id="email"/>
				 <span id ="emailError"></span>
				 </td>
              </tr>
              <tr>
                  
                 <td><input type="button" value= "注册" id="submitbutton"/></td>
                 <td><input type="reset" value="清空"/></td>
           
              </tr> 
          </table>   
       </from>
   </body>
</html>