JavaScript表单验证完美代码

用原生JS写一个简单的表单验证

 首先，是html部分

 
   新用户注册 
    
   基本信息 
   
 
    
    
  

 接着，为其加上CSS样式

 
 .divAll{ 
   width:800px; 
   font-family:'黑体'; 
   margin:50px auto; 
   } 
 #titles{ 
   font-weight:bold; 
   font-size:18px; 
   height:50px; 
   line-height:50px; 
   background:#FFF9F3; 
   text-align:center;  
   border:1px solid #CCC;; 
   } 
 #contents{ 
    margin-top:20px; 
    background:#FFF9F3; 
    border:1px solid #CCC;; 
    } 
  #form-itemGroup{ 
   padding:10px;  
    } 
  #form-itemGroup label{ 
    display:inline-block; 
    width:100px; 
    height:32px; 
    line-height:32px; 
    color:#666; 
    text-align:right; 
    } 
  #form-itemGroup .userName{ 
    width:200px; 
    height:40px; 
    line-height:40px; 
    border:1px solid #CCC; 
    }   
  #form-itemGroup .default{ 
    width:200px; 
    height:32px; 
    line-height:32px; 
    color:#999; 
    }  
  #form-itemGroup .error{ 
    height:32px; 
    line-height:32px; 
    color:#F00; 
    } 
  #form-itemGroup .success{ 
    height:32px; 
    line-height:32px; 
    color:#096; 
    }  
  .divBtn{ 
    margin-top:20px; 
    margin-left:200px; 
    width:100px; 
    height:32px; 
    line-height:32px; 
    background-color:#F93; 
    margin-bottom:10px; 
    color:#ffffff; 
    font-weight:bold; 
    border:none; 
    } 
 

最后是JS部分

 好了，打开浏览器测试一下吧

  填写数据，可以！

以上所述是小编给大家介绍的Javascript表单验证完美代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！