js表单验证(提示版)

最新推荐文章于 2022-12-02 11:24:21 发布

学java然后去打螺丝的小王

最新推荐文章于 2022-12-02 11:24:21 发布

阅读量376

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_53909398/article/details/122500755

版权

代码块


<!--表单提交--->
<!DOCTYPE html>
<html>
<head>
	<title>去除空白</title>
</head>
<body>
	<script type="text/javascript">
		 window.onload=function(){
		 	//用户名字事件:
		 	document.getElementById("username").onblur=function()
		 	{
		 		var RegExp=/^[a-zA-Z0-9_]{3,16}$/;
		 	   var user=document.getElementById("username").value
		 	   if(!RegExp.test(user)){
                   document.getElementById("innerspan").innerHTML="<font color=red>用户名格式不正确</font>"
                    	
		 	   }
		 	   document.getElementById("username").onfocus=function(){
		 	   	 if(document.getElementById("innerspan").innerHTML!=""){
		 	   	 	document.getElementById("username").value="";
		 	   	 }
		 	   	document.getElementById("innerspan").innerHTML="";
		 	   }
		 	   document.getElementById("reset").onclick=function(){
		 	   		document.getElementById("innerspan").innerHTML="";
		 	   }
		 	}
		 	//用户密码事件
		  	document.getElementById("password").onblur=function()
		 	 {    
		 		//正则表达式
		 		var RegExp=/^[a-zA-Z0-9_]{3,16}$/;
		 	   var password=document.getElementById("password").value
		 	   if(!RegExp.test(password)){
                   document.getElementById("innerspan").innerHTML="<font color=red>用户密码格式不正确</font>"
                    	
		 	   }
		 	   document.getElementById("password").onfocus=function(){
		 	   	 if(document.getElementById("innerspan").innerHTML!=""){
		 	   	 	   	document.getElementById("password").value="";
		 	   	 }
		 	   	document.getElementById("innerspan").innerHTML="";
		 	   }
		 	   document.getElementById("reset").onclick=function(){
		 	   		document.getElementById("innerspan").innerHTML="";
		 	   }
		 	}
            //确认密码
           document.getElementById("dbpassword").onblur=function(){
           	  //获取原始密码
              var  password=document.getElementById("password").value;
              //获取确认密码
              var  dbpassword=document.getElementById("dbpassword").value;
              //验证
              if(password!=dbpassword){
                    document.getElementById("innerspan").innerHTML="<font color=red>用户密码不一致</font>" 
              }
              //清理原先的值 获取焦点事件
                document.getElementById("dbpassword").onfocus=function(){
                if(document.getElementById("innerspan").innerHTML!=""){
                document.getElementById("dbpassword").value="";
                }	
		 	   	document.getElementById("innerspan").innerHTML="";
           }
           //清楚span提示 点击事件
           document.getElementById("reset").onclick=function(){
		 	   		document.getElementById("innerspan").innerHTML="";
		 	   }
                 
		 }
         //邮箱验证
          document.getElementById("email").onblur=function(){
             //获取邮箱
              var email=document.getElementById("email").value;
              //正则表达c
              var RegExp=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
              if(!RegExp.test(email)){
                  document.getElementById("innerspan").innerHTML="<font color=red>用户邮箱格式不对</font>" 
              }
              document.getElementById("email").onfocus=function(){
              	if(document.getElementById("innerspan").innerHTML!=""){
              		document.getElementById("email").value="";
              	}
              	document.getElementById("innerspan").innerHTML="";
              }
               document.getElementById("reset").onclick=function(){
		 	   		document.getElementById("innerspan").innerHTML="";
		 	   }
          
          }
          //注册事件，提交表单
          document.getElementById("button").onclick=function(){
          	 //触发所有框的blur事件
          	  username.blur();
          	  username.focus();
          	  
          	  password.blur();
          	  password.focus();

          	  dbpassword.blur();
          	  dbpassword.focus();

          	  email.blur();
          	  email.focus();
          	  if(document.getElementById("innerspan").innerHTML==""){
          	 	//提交表单
               document.getElementById("userform").submit();
          	
          	  }
          }
 
		}
	</script>
	<!--form表单-->
<form action="http://8080//asss" method="post" id=userform>
	<table>
		<tr>
			<td>用户姓名:</td>
			<td><input type="text" id=username></td>
		</tr>
		<tr>
			<td>用户密码:</td>
			<td><input type="password" id=password></td>
		</tr>
		<tr>
			<td>验证密码:</td>
			<td><input type="password" id=dbpassword></td>
		</tr>
		<tr>
			<td>用户邮箱:</td>
			<td><input type="test" id=email></td>
		</tr>
		<tr>
			<td>
				<input type="button" value="提交" id=button>
				<input type="reset" value="重置" id=reset >
			</td>
		</tr>
	</table>
</form>
  <span id=innerspan></span>
</body>
</html>

运行结果:

用户名密码邮箱不对就会提示，全部对了就可以提交

学java然后去打螺丝的小王

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js表单验证(提示版)

代码块<!DOCTYPE html><html><head> <title>去除空白</title></head><body> <script type="text/javascript"> window.onload=function(){ //用户名字事件: document.getElementById("username").
复制链接

扫一扫