验证注册信息

Myth丶恋晨 2022-05-15 08:36 198阅读 0赞

验证邮箱格式 正则表达式： /^\[a-zA-Z0-9\_-\]+@\[a-zA-Z0-9\_-\]+(\\.\[a-zA-Z0-9\_-\]+)+$/g

display:inline;display:inline 的作用是设置对象做为行内元素显示，inline是内联对象的默认值（ps:内联对象就是不自动产生换行的元素，比如span） 而我们一般用的div是块级元素，默认display属性是block, 但将div的display设置为inline的话，则多个div可以像span一样显示在一行了。

indexOf(' @ ') 获取@的下标。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    .green{ border:1px solid #0F0;}
    .black{ border:1px solid  #000;}
    .red{ border:1px solid   #F00;}
    div{display:inline;}
    </style>
    <script type="text/javascript">
    function YZemail(){
      var email=document.getElementsByName("email").item(0).value;
      var backemail=document.getElementById("backemail");
      var tip1=document.getElementById("tip1");
      var regex=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/g; //正则表达式
      if(regex.test(email)){
    	    tip1.innerHTML="";
        backemail.className="black";
      return true;
      }
       tip1.innerHTML="邮箱格式不正确";
    	 backemail.className="red";
    	return false; 
    }
    function deletes(){
    	var email=document.getElementById("backemail");
    	email.className="green";
         if(email.value=="输入邮箱"){
    		 email.value="";
    		 }
    }
    
    //用户名
    function users(){
    	var userlabel=document.getElementById("user");
    	   userlabel.className="green";
    }
    function nameid(){
    	 var div1 =document.getElementById("tip4");
    	  var text=document.getElementsByName("name").item(0).value;
    	  var user=document.getElementById("user");
    	  if(text.length<4){
            user.className="red";
    		 div1.innerHTML="请输入4-20位字符";
    		 return false;
    	  }
    	  if(4<=text.length){
    		  user.className="black";
    		   div1.innerHTML="";
    		  return true;
    		   }
    }
    //密码
    function pwdadd(){
    	var userpwd=document.getElementById("password1");
    	  userpwd.className="green";
    }
    function pwdcat(){
    	 var div1 =document.getElementById("tip3");
    	  var text=document.getElementsByName("pwd1").item(0).value;
    	  var user=document.getElementById("password1");
    	  if(text.length<4){
            user.className="red";
    		 div1.innerHTML="请输入4-20位密码"
    		 return false;
    	  }
    	  if(4<=text.length){
    		  
    		  user.className="black";
    		   div1.innerHTML="";
    		  return true;
    		   }
    }
    
    function twicepwdadd(){
    	var userpwd=document.getElementById("password2");
    	  userpwd.className="green";
    }
    function  twicepwd(){
    	 var div1 =document.getElementById("tip2");
    	  var text1=document.getElementsByName("pwd1").item(0).value;
    	    var text2=document.getElementsByName("pwd2").item(0).value;
    		  var user=document.getElementById("password2");
    		if(text1==text2){
    			 user.className="black";
    			  div1.innerHTML="";
    			 return true;
    		}else{
    			 user.className="red";
    		 div1.innerHTML="两次密码输入不一致";
    		 return false;
    		}
    }
    
    function  sex(){
    	var sex=document.getElementsByName("xingbie");
    	var xingbie="";
    	for(var i=0;i<sex.length;i++){
    		if(sex.item(i).checked==true){
    		 xingbie=sex.item(i).value;
    		 return true;
    		 }
    		 }
    	if(xingbie==""){
    		alert("请选择性别");
    	    return false;	
    	}
    }
    
    function  hobby(){
    	var hobby=document.getElementsByName("aihao");
    	var aihao="";
    	for(var i=0;i<hobby.length;i++){
    		if(hobby.item(i).checked==true){
    		aihao=hobby.item(i).value;
    		 return true;
    		 }
    		 }
    	if(aihao==""){
    		alert("请选择爱好");
    	    return false;	
    	}
    }
    
    function dealsubmit(){
    	
    	if(nameid()==false ||pwdcat()==false|| twicepwd()==false||YZemail()==false|| sex()==false||hobby()==false){
    		return false;
    	}else{
    		return true;
    	}
    }
    </script>
    </head>
    
    <body>
    <fieldset style=" border:2px solid #966;">
    <legend style="font-size:24px;">博客网注册</legend>
    <form action="tt.html" method="post"  style="  margin:40px 100px;"  onsubmit="return dealsubmit()">
              用户名：<input  id="user"  type="text "   name="name"  onblur="nameid()" onfocus="users()" /><div id="tip4" ></div><br /><br />
    
    
                 密码：<input  type="password"  id="password1"  name="pwd1"  onfocus="pwdadd()"  onblur="pwdcat()"/><div id="tip3" ></div><br/><br />
    再次输入密码：<input type="password"  id="password2"  name="pwd2"  onblur="twicepwd()" onfocus="twicepwdadd()" /><div id="tip2" ></div><br/><br />
    
                Email：<input type="text" name="email"  value="输入邮箱" id="backemail"  onblur="return YZemail()"  onfocus="deletes()"/><div id="tip1"></div>
    <br /><br />
             个人描述:<textarea name="deal"></textarea><br /><br />
                  性别：<input type="radio"  name="xingbie" value="boy"/>男
         <input type="radio" name="xingbie" value="girl"/>女<br /><br />       
    兴趣爱好：
    <input type="checkbox" value="打篮球" name="aihao" />打篮球
    <input type="checkbox" value="踢足球" name="aihao" />踢足球
    <input type="checkbox" value="听音乐" name="aihao" />听音乐<br/>
    <hr />
               <button type="submit" >提交</button>
             <button type="reset">重置</button>
    </form>
    </fieldset>
    </body>
    </html>

![70][]

![70 1][]

[70]: /images/20220515/120edbe3696941b08d36f36fb3b40195.png
[70 1]: /images/20220515/f57e1747c1c34786aad1df1dd8350c70.png