JavaScriptフォーム検証パーフェクトコード

元のJSで簡単なフォーム検証機能を書きます.コードはhtml部分とjs部分に分けられています.コードは分かりやすくて、とてもいいです.参考になる価値があります.必要な友達は参考にして、元のJSで簡単なフォーム検証を書きます.
まず、html部分です.

<div class="divAll"> 
   <div id="titles">     div> 
   <div id="contents"> 
   
    
 
   
"95%" color="#f2f2f2"/> 
   
"#" onSubmit="return checkForm()"> 
    <div id="form-itemGroup"> 
      for="userName">   ： 
      "text" id="userName" class="userName" onBlur="checkUserName()" oninput="checkUserName()"> 
      class="default" id="nameErr">     3      
    div> 
    <div id="form-itemGroup"> 
      for="userPasword">  ： 
      "password" id="userPasword" class="userName" onBlur="checkPassword()" oninput="checkPassword()"> 
      class="default" id="passwordErr">   4 8     
    div> 
    <div id="form-itemGroup"> 
      for="userConfirmPasword">    ： 
      "password" id="userConfirmPasword" class="userName" onBlur="ConfirmPassword()" oninput="ConfirmPassword()"> 
      class="default" id="conPasswordErr">         
    div> 
    <div id="form-itemGroup"> 
      for="userPhone">    ： 
      "text" id="userPhone" class="userName" onBlur="checkPhone()" oninput="checkPhone()"> 
      class="default" id="phoneErr">   11      
    div> 
    <div> 
     "submit" class="divBtn">   
    div> 
   
 
   div> 
 div> 

次に、CSSスタイルを追加します.

<style type="text/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; 
    } 
style> 

最後はJSです

<script type="text/javascript"> 
 function checkForm(){ 
  var nametip = checkUserName(); 
  var passtip = checkPassword();  
  var conpasstip = ConfirmPassword(); 
  var phonetip = checkPhone(); 
  return nametip && passtip && conpasstip && phonetip; 
  } 
  //        
  function checkUserName(){ 
  var username = document.getElementById('userName'); 
  var errname = document.getElementById('nameErr'); 
  var pattern = /^\w{3,}$/;  //          ：         
  if(username.value.length == 0){ 
    errname.innerHTML="       " 
    errname.className="error" 
    return false; 
    } 
  if(!pattern.test(username.value)){ 
    errname.innerHTML="       " 
    errname.className="error" 
    return false; 
    } 
   else{ 
     errname.innerHTML="OK" 
     errname.className="success"; 
     return true; 
     } 
  } 
  //       
function checkPassword(){ 
  var userpasswd = document.getElementById('userPasword'); 
  var errPasswd = document.getElementById('passwordErr'); 
  var pattern = /^\w{4,8}$/; //    4-8  
  if(!pattern.test(userpasswd.value)){ 
    errPasswd.innerHTML="      " 
    errPasswd.className="error" 
    return false; 
    } 
   else{ 
     errPasswd.innerHTML="OK" 
     errPasswd.className="success"; 
     return true; 
     } 
  } 
  //     
  function ConfirmPassword(){ 
  var userpasswd = document.getElementById('userPasword'); 
  var userConPassword = document.getElementById('userConfirmPasword'); 
  var errConPasswd = document.getElementById('conPasswordErr'); 
  if((userpasswd.value)!=(userConPassword.value) || userConPassword.value.length == 0){ 
    errConPasswd.innerHTML="       " 
    errConPasswd.className="error" 
    return false; 
    } 
   else{ 
     errConPasswd.innerHTML="OK" 
     errConPasswd.className="success"; 
     return true; 
     }    
  } 
//      
  function checkPhone(){ 
  var userphone = document.getElementById('userPhone'); 
  var phonrErr = document.getElementById('phoneErr'); 
  var pattern = /^1[34578]\d{9}$/; //           
  if(!pattern.test(userphone.value)){ 
    phonrErr.innerHTML="        " 
    phonrErr.className="error" 
    return false; 
    } 
   else{ 
     phonrErr.innerHTML="OK" 
     phonrErr.className="success"; 
     return true; 
     } 
  } 
script> 

はい、ブラウザを開けてテストしてみます.
データを記入してください.ok!
転載:http://www.jb51.net/article/107188.htm