欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript表單驗(yàn)證完美代碼

 更新時(shí)間:2017年03月02日 09:29:33   作者:ChauncyWu  
用原生JS寫一個(gè)簡單的表單驗(yàn)證功能,代碼分為html部分和js部分,代碼簡單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下

用原生JS寫一個(gè)簡單的表單驗(yàn)證

 首先,是html部分

<div class="divAll"> 
   <div id="titles">新用戶注冊(cè)</div> 
   <div id="contents"> 
   <h3>基本信息</h3> 
   <hr width="95%" color="#f2f2f2"/> 
   <form action="#" onSubmit="return checkForm()"> 
    <div id="form-itemGroup"> 
      <label for="userName">用戶名:</label> 
      <input type="text" id="userName" class="userName" onBlur="checkUserName()" oninput="checkUserName()"> 
      <span class="default" id="nameErr">請(qǐng)輸入至少3位的用戶名</span> 
    </div> 
    <div id="form-itemGroup"> 
      <label for="userPasword">密碼:</label> 
      <input type="password" id="userPasword" class="userName" onBlur="checkPassword()" oninput="checkPassword()"> 
      <span class="default" id="passwordErr">請(qǐng)輸入4到8位的密碼</span> 
    </div> 
    <div id="form-itemGroup"> 
      <label for="userConfirmPasword">確認(rèn)密碼:</label> 
      <input type="password" id="userConfirmPasword" class="userName" onBlur="ConfirmPassword()" oninput="ConfirmPassword()"> 
      <span class="default" id="conPasswordErr">請(qǐng)?jiān)佥斎胍槐槊艽a</span> 
    </div> 
    <div id="form-itemGroup"> 
      <label for="userPhone">手機(jī)號(hào)碼:</label> 
      <input type="text" id="userPhone" class="userName" onBlur="checkPhone()" oninput="checkPhone()"> 
      <span class="default" id="phoneErr">請(qǐng)輸入11位手機(jī)號(hào)碼</span> 
    </div> 
    <div> 
     <button type="submit" class="divBtn">注冊(cè)</button> 
    </div> 
   </form> 
   </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; 
  } 
  //驗(yàn)證用戶名   
  function checkUserName(){ 
  var username = document.getElementById('userName'); 
  var errname = document.getElementById('nameErr'); 
  var pattern = /^\w{3,}$/;  //用戶名格式正則表達(dá)式:用戶名要至少三位 
  if(username.value.length == 0){ 
    errname.innerHTML="用戶名不能為空" 
    errname.className="error" 
    return false; 
    } 
  if(!pattern.test(username.value)){ 
    errname.innerHTML="用戶名不合規(guī)范" 
    errname.className="error" 
    return false; 
    } 
   else{ 
     errname.innerHTML="OK" 
     errname.className="success"; 
     return true; 
     } 
  } 
  //驗(yàn)證密碼   
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="密碼不合規(guī)范" 
    errPasswd.className="error" 
    return false; 
    } 
   else{ 
     errPasswd.innerHTML="OK" 
     errPasswd.className="success"; 
     return true; 
     } 
  } 
  //確認(rèn)密碼 
  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; 
     }    
  } 
//驗(yàn)證手機(jī)號(hào) 
  function checkPhone(){ 
  var userphone = document.getElementById('userPhone'); 
  var phonrErr = document.getElementById('phoneErr'); 
  var pattern = /^1[34578]\d{9}$/; //驗(yàn)證手機(jī)號(hào)正則表達(dá)式 
  if(!pattern.test(userphone.value)){ 
    phonrErr.innerHTML="手機(jī)號(hào)碼不合規(guī)范" 
    phonrErr.className="error" 
    return false; 
    } 
   else{ 
     phonrErr.innerHTML="OK" 
     phonrErr.className="success"; 
     return true; 
     } 
  } 
</script> 

 好了,打開瀏覽器測試一下吧

  填寫數(shù)據(jù),可以!

以上所述是小編給大家介紹的JavaScript表單驗(yàn)證完美代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • JavaScript判斷是否為數(shù)組的3種方法及效率比較

    JavaScript判斷是否為數(shù)組的3種方法及效率比較

    這篇文章主要介紹了JavaScript判斷是否為數(shù)組的3種方法及效率比較,本文直接給出運(yùn)行效果和實(shí)現(xiàn)代碼,需要的朋友可以參考下
    2015-04-04
  • javascript實(shí)現(xiàn)簡單的進(jìn)度條

    javascript實(shí)現(xiàn)簡單的進(jìn)度條

    本文給大家分享2個(gè)javascript實(shí)現(xiàn)簡單的進(jìn)度條,一個(gè)是個(gè)人制作一個(gè)是網(wǎng)友實(shí)現(xiàn)的,都很不錯(cuò),這里推薦給大家。
    2015-07-07
  • 詳解JavaScript如何實(shí)現(xiàn)異步并發(fā)任務(wù)控制器

    詳解JavaScript如何實(shí)現(xiàn)異步并發(fā)任務(wù)控制器

    實(shí)現(xiàn)一個(gè)控制并發(fā)數(shù)的任務(wù)隊(duì)列?、實(shí)現(xiàn)一個(gè)異步并發(fā)任務(wù)控制器,這已經(jīng)是非常經(jīng)典的手寫題目了,因?yàn)槠渲猩婕?異步?和?并發(fā)?的內(nèi)容,所以本文就來講講到底如何實(shí)現(xiàn)呢
    2023-05-05
  • js實(shí)現(xiàn)卡片式項(xiàng)目管理界面UI設(shè)計(jì)效果

    js實(shí)現(xiàn)卡片式項(xiàng)目管理界面UI設(shè)計(jì)效果

    這篇文章主要介紹了js實(shí)現(xiàn)卡片式項(xiàng)目管理界面UI設(shè)計(jì)效果,該UI設(shè)計(jì)中,將各個(gè)項(xiàng)目以卡片的方式堆疊排列在屏幕上,當(dāng)點(diǎn)擊了其中的某個(gè)項(xiàng)目的時(shí)候,該項(xiàng)目圖片會(huì)全屏放大,向下滾動(dòng)鼠標(biāo)可以看到該項(xiàng)目的介紹信息,需要的朋友可以參考下
    2015-12-12
  • 微信小程序搭建(mpvue+mpvue-weui+fly.js)的詳細(xì)步驟

    微信小程序搭建(mpvue+mpvue-weui+fly.js)的詳細(xì)步驟

    這篇文章主要介紹了微信小程序搭建(mpvue+mpvue-weui+fly.js)的詳細(xì)步驟,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-09-09
  • 通過js修改input、select默認(rèn)字體顏色

    通過js修改input、select默認(rèn)字體顏色

    這篇文章主要介紹了通過js修改input、select默認(rèn)字體顏色,需要的朋友可以參考下
    2017-04-04
  • JS實(shí)現(xiàn)導(dǎo)出Excel的五種方法詳解【附源碼下載】

    JS實(shí)現(xiàn)導(dǎo)出Excel的五種方法詳解【附源碼下載】

    這篇文章主要介紹了JS實(shí)現(xiàn)導(dǎo)出Excel的五種方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了基于table表格導(dǎo)出Excel文件的相關(guān)操作技巧,并附源碼供讀者下載參考,需要的朋友可以參考下
    2018-03-03
  • 詳解JavaScript如何利用異步解密回調(diào)地獄

    詳解JavaScript如何利用異步解密回調(diào)地獄

    為了更好地處理這些異步操作,JavaScript?引入了異步編程的概念,這篇文章主要來和大家詳細(xì)聊聊JavaScript中異步的相關(guān)應(yīng)用,希望對(duì)大家有所幫助
    2024-02-02
  • javaScript 刪除確認(rèn)實(shí)現(xiàn)方法小結(jié)

    javaScript 刪除確認(rèn)實(shí)現(xiàn)方法小結(jié)

    因?yàn)閷?duì)于內(nèi)容的刪除是件很重要的事,所以一般的系統(tǒng)中,都需要?jiǎng)h除確認(rèn)一下,以免誤刪,具體的方法如下,大家可以參考下。
    2009-12-12
  • 微信小程序如何處理token過期問題

    微信小程序如何處理token過期問題

    最近再做個(gè)項(xiàng)目,需要檢查token過期,跳轉(zhuǎn)到登錄頁面,要求用戶重新登錄,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10

最新評(píng)論