一css代码.

<style type="text/css">
  body{margin:0;padding: 0;}
  
  .login {position:absolute;
  	      margin:150px auto;  	    
  	     top:-30px;
  	     left:105px;
  	      width: 400px;  	  
  	      border:1px solid white;
  	      background: #7EE2B5;
  	      border-radius: 10px;  	     
  	      transform: rotate(-15deg);
  	   }
  	    .login2 {
  	      position:relative;
  	      margin:100px auto;
  	      padding:50px 20px;
  	      width: 650px;
  	      height: 500px;
  	      border:1px solid white;
  	      background: #DDEEDE;
  	      border-radius: 10px;
  	      transform: rotate(-5deg);
  	   }
  	   .login1 {
  	   	  position:absolute;
  	      margin:0 auto;
  	      top:-10px;
  	      left:25px;  	 
  	      width: 600px;
  	      height: 500px;
  	      border:1px solid white;
  	      border-radius: 10px;
  	      background: #DDEEE3;
  	      transform: rotate(20deg);
  	   }
  .login legend {
  	      font-weight: bold;
  	      color:green;
  	      text-align: center;
  	  }
  .login label{
  	display:inline-block;
  	width:130px;
  	text-align: right;
  }
  #btn {
  	height: 30px;
  	width:100px;
  	padding: 5px;
  	border:0;
  	background-color: #00dddd;
  	font-weight: bold;
  	cursor: pointer;
  	border-radius: 10px;
  	margin-left: 140px;
  }
  input{
  	    height: 30px;
  	    width: 170px;
  	    border-radius: 6px;
  	}
 
  input:focus{
  		 border-color: #66afe9;
         outline: 0;       
         box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
  }
  .borderRed{border: 2px solid red;}
  img{display: none;
      border-radius: 11px;}
  strong{

  	width: 200px;
  	height: 30px;
  	color:#000;
  	border:1px solid red;
    display: inline-block;
  	text-align: center;  	
  	border-radius: 5px 15px;
  	border-left:none;
  	box-shadow: inset 0 1px 1px red,0 1px 1px red;
  }

 
</style>

二.html代码

<body>
	<div class="login2">
	<div class="login1">
	  <div class="login"
    <form name="form" action="jshuanfu.html" method="get" id="form1"  onsubmit="return check()">
      <legend>注册系统</legend>
      <p><label for="name">用户名: </label>
      <input type="text" id="name" onblur="checkName()" > 
      <img src="" width="30px" height="30px"></p>
      <p><label for="password">密码: </label>
      <input type="password" id="password" onblur="checkPassw1()"required>
      <img src="" width="30px" height="30px"></p>
      <p><label for="R_password">确认密码: </label>
      <input type="password" id="R_password"  onblur="checkPassw2()"required>
      <img src="" width="30px" height="30px">
      <span id="biaoqian" style="position: absolute;"></span>
      </p>
      <p><label for="email">电子邮箱: </label>
      <input type="text" id="email" onblur="checkEmail()"required>
      <img src="" width="30px" height="30px"></p>    
      <p><input type="submit" value="Register" id="btn"></p>    
    </form>
  </div>
</div>
</div>

三。js代码

<script> 
  	 var ele = { //存放各个input字段obj
  	  form1:document.getElementById("form1"),
      name: document.getElementById("name"),
      password: document.getElementById("password"),
      R_password: document.getElementById("R_password"),
      email: document.getElementById("email"),
      imgs:document.getElementsByTagName("img"),
      bioaiqan:document.getElementById("bioaiqan"),
      btn:document.getElementById("btn")
    };
  //验证name
  function checkName(){  
    var name=ele.name.value;
    if(name != ""){ // 不为空则正确,当然也可以ajax异步获取服务器判断用户名不重复则正确
      ele.name.className="";//移除class
      ele.imgs[0].setAttribute("src","img/right.jpg"); //对应图标
      ele.imgs[0].style.display = "inline"; //显示    
      return true;
    }
    else{ //name不符合    	
      ele.name.className="borderRed";//添加class
      ele.imgs[0].setAttribute("src","img/wrong.jpg"); //对应图标
      ele.imgs[0].style.display = "inline"; //显示          
     return false;
    }
  }
  //验证密码
  function checkPassw1(){ 
  	 var passw1=ele.password.value;
  	if(passw1){
  		ele.password.className="";  		 	
  		ele.imgs[1].setAttribute("src","img/right.jpg");
        ele.imgs[1].style.display = "inline";       
  	}
  	else{
  		ele.password.className="borderRed";  		 	
  		ele.imgs[1].setAttribute("src","img/wrong.jpg");
        ele.imgs[1].style.display = "inline"; 
        
  	}  	
    
  }
  function checkPassw2(){
  	 var  passw1=ele.password.value;
  	 var  passw2=ele.R_password.value; 
  	 if(passw2){
  	 	 if(passw1!=passw2) { 
  	    	ele.password.className="borderRed";  		 	
  		    ele.imgs[2].setAttribute("src","img/wrong.jpg");
            ele.imgs[2].style.display = "inline"; 
                biaoqian.innerHTML='<strong class="tips_false">您两次输入的密码不一样</strong>';
               return false;

            } 
         else {
            ele.R_password.className=""; 
        	ele.imgs[2].setAttribute("src","img/right.jpg");
            ele.imgs[2].style.display = "inline"; 
            biaoqian.innerHTML="";
       return true;
            }

  	 } 
  	 
    
  }
  function checkEmail(){  
  	var email=ele. email.value;
  //验证邮箱
    var pattern = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; 
    if(!pattern.test(email)){ //email格式不正确
     ele.email.className="borderRed";     
     ele.imgs[3].setAttribute("src","img/wrong.jpg");
     ele.imgs[3].style.display = "inline";     
      return false;
    }
    else{ //格式正确
    	ele.email.className="";    	
      ele.imgs[3].setAttribute("src","img/right.jpg");
      ele.imgs[3].style.display = "inline";
     return true;
    }
  }
  //通过type="submit"方式提交表单时,浏览器会在请求发送给服务器之前触发submit事件,这样我们就有机会验证表单数据,如下:
   //html代码form标签中写<form onsubmit="return check();" ...>
   //然后在js文件中定义好check()函数 
 function check(){ //表单提交则验证开始   
   
       if(checkName()&&checkPassw2()&&checkEmail()){
    	  	 alert(" 注册成功");  //注册成功
            return true; 
    	  }
    	  else{
    	  	alert("请正确的填写完信息!");
    	    return false;
    	  }
    }

 另一种方式,给表单添加注册事件,来使用event.preventDefault(),方式来阻止表单默认行为
  /* ele.form1.onsubmit=function(event){
	     	var event = event || window.event; 	    
	    	if(checkName()&&checkPassw2()&&checkEmail()){
    	  	 alert(" 注册成功");  //注册成功
            return true; 
    	  }
    	  else{
    	  	alert("请正确的填写完信息!");
                if (event.preventDefault) {
                 	event.preventDefault(); 
               } 
              else {
	               event.returnValue = false;  
             } 
    	  }
               
             }   */
                
  
  </script>

四。效果图:

  wKioL1cQPF3DLI9UAABVINM2ST8158.jpg,正确填完表单之后,点击注册,如下图:

wKiom1cQO9STgG5BAABEL7ykAb4179.jpg注册成功,点击确定按钮后,表单进行提交。

若是信息填错:如下:

wKioL1cQPNDhYEDYAABjgxe4ENA028.jpg这时,点击注册按钮,或者回车响应,会有如下图:

wKioL1cQPQSzPTJ-AABQGS5nuk4384.jpg点击确定按钮,表单不会提交,会让用户正确填完信息后再提交。