验证注册信息

最新推荐文章于 2023-06-17 23:47:09 发布

河上街

最新推荐文章于 2023-06-17 23:47:09 发布

阅读量463

点赞数 1

本文链接：https://blog.csdn.net/liujucai/article/details/82118304

版权

验证邮箱格式正则表达式： /^[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()">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户名：<input  id="user"  type="text "   name="name"  onblur="nameid()" onfocus="users()" /><div id="tip4" ></div><br /><br />


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码：<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 />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Email：<input type="text" name="email"  value="输入邮箱" id="backemail"  onblur="return YZemail()"  onfocus="deletes()"/><div id="tip1"></div>
<br /><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;个人描述:<textarea name="deal"></textarea><br /><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别：<input type="radio"  name="xingbie" value="boy"/>男
     <input type="radio" name="xingbie" value="girl"/>女<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
兴趣爱好：
<input type="checkbox" value="打篮球" name="aihao" />打篮球
<input type="checkbox" value="踢足球" name="aihao" />踢足球
<input type="checkbox" value="听音乐" name="aihao" />听音乐<br/>
<hr />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="submit" >提交</button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="reset">重置</button>
</form>
</fieldset>
</body>
</html>