Ausführliche Erklärung zum Schreiben eines Formularüberprüfungsfalls mit JavaScript (vollständiger Code)

Verwenden Sie js, um ein perfektes Codebeispiel für die Formularüberprüfung durchzuführen. Zuerst ist der HTML-Teil

<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>

CSS-Teil

<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>

js-Teil

<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>

im Browser

Verwandte Artikel:

JS-Formular-Login-Überprüfungsbeispiel

PHP-Formular-Datenvalidierungsklasse, PHP-Formularvalidierung

Ähnliche Videos:

JS-Entwicklungsüberprüfungsformular-Tutorial

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zum Schreiben eines Formularüberprüfungsfalls mit JavaScript (vollständiger Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!