Complete code sharing for JavaScript implementation of form validation

Use nativeJSWrite a simple form verification function. The code is divided into html part and js part. The code is simple and easy to understand, very good, and has reference value. It is needed For reference, friends

Write a simple form verification using native JS

First, the html part

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

Then, add CSS styles to it

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

Finally the JS part

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

Okay, open the browser and test it

Fill in the data, okay!

The above is the detailed content of Complete code sharing for JavaScript implementation of form validation. For more information, please follow other related articles on the PHP Chinese website!