Partage complet de code pour l'implémentation JavaScript de la validation de formulaire

Utilisez du JS natif pour écrire une fonction simple de validation de formulaire Le code est divisé en partie html et partie js. Le code est simple et facile à comprendre, très bon et. a une valeur de référence. C'est nécessaire Pour référence, amis

Écrivez une vérification de formulaire simple en utilisant du JS natif

Tout d'abord, la partie html

<p class="pAll"> 
   <p id="titles">新用户注册</p> 
   <p id="contents"> 
   <h3>基本信息</h3> 
   <hr width="95%" color="#f2f2f2"/> 
   <form action="#" onSubmit="return checkForm()"> 
    <p id="form-itemGroup"> 
      <label for="userName">用户名：</label> 
      <input type="text" id="userName" class="userName" onBlur="checkUserName()" oninput="checkUserName()"> 
      <span class="default" id="nameErr">请输入至少3位的用户名</span> 
    </p> 
    <p id="form-itemGroup"> 
      <label for="userPasword">密码：</label> 
      <input type="password" id="userPasword" class="userName" onBlur="checkPassword()" oninput="checkPassword()"> 
      <span class="default" id="passwordErr">请输入4到8位的密码</span> 
    </p> 
    <p id="form-itemGroup"> 
      <label for="userConfirmPasword">确认密码：</label> 
      <input type="password" id="userConfirmPasword" class="userName" onBlur="ConfirmPassword()" oninput="ConfirmPassword()"> 
      <span class="default" id="conPasswordErr">请再输入一遍密码</span> 
    </p> 
    <p id="form-itemGroup"> 
      <label for="userPhone">手机号码：</label> 
      <input type="text" id="userPhone" class="userName" onBlur="checkPhone()" oninput="checkPhone()"> 
      <span class="default" id="phoneErr">请输入11位手机号码</span> 
    </p> 
    <p> 
     <button type="submit" class="pBtn">注册</button> 
    </p> 
   </form> 
   </p> 
 </p>

Ensuite, ajoutez des styles CSS. à cela

<style type="text/css"> 
 .pAll{ 
   width:800px; 
   font-family:&#39;黑体&#39;; 
   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; 
    }  
  .pBtn{ 
    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>

Le dernier est la partie 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(&#39;userName&#39;); 
  var errname = document.getElementById(&#39;nameErr&#39;); 
  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(&#39;userPasword&#39;); 
  var errPasswd = document.getElementById(&#39;passwordErr&#39;); 
  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(&#39;userPasword&#39;); 
  var userConPassword = document.getElementById(&#39;userConfirmPasword&#39;); 
  var errConPasswd = document.getElementById(&#39;conPasswordErr&#39;); 
  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(&#39;userPhone&#39;); 
  var phonrErr = document.getElementById(&#39;phoneErr&#39;); 
  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>

Bon, ouvrez le navigateur et testez-le

Remplissez dans les données, OK !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!