腳本之家服務器常用軟件

快捷導航

JavaScript表單即時驗證驗證不成功不能提交

更新時間：2017年08月31日 16:04:55 作者：yongh701

這篇文章主要為大家詳細介紹了JavaScript表單即時驗證，驗證不成功不能提交，具有一定的參考價值，感興趣的小伙伴們可以參考一下

不能再讓表單在提交按鈕之后才被驗證了！你輸入的任何信息表單都會即時反應！
這個JavaScript的關(guān)鍵是onChange()事件，使用onKeyUp()事件完成是不行的，人家沒有輸入完畢，你就說人家不對，多不友好啊╮(╯▽╰)╭

一、基本目標

一個表單認證頁，如果輸入的用戶名超過10位則會立即在輸入框旁邊彈出提示：

如果密碼少于6位，而且兩次輸入密碼不一致同樣彈出提示，

如果你沒有勾選閱讀條款的復選框，同樣會彈出提示

知道你所有的項目滿足設(shè)定的條件之前，提交按鈕無效。

滿足設(shè)定條件，表單通過get的方法提交。

二、制作過程

整個頁面的代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>formcheck</title> 
  <script type="text/javascript"> 
function checkusrn() { 
 var check = false; 
 var username = document.getElementById("username").value; 
 if (username.length > 10) { 
  document.getElementById("checktext1").innerHTML = " × 不要多于10位"; 
  check = false; 
 } else { 
  document.getElementById("checktext1").innerHTML = " √"; 
  check = true; 
 } 
 return check; 
} 
 
function checkpwd() { 
 var check = false; 
 var password = document.getElementById("password").value; 
 if (password.length < 6) { 
  document.getElementById("checktext2").innerHTML = " × 不要少于6位"; 
  check = false; 
 } else { 
  document.getElementById("checktext2").innerHTML = " √"; 
  check = true; 
 } 
 return check; 
} 
function checkpwdc() { 
 var check = false; 
 var password = document.getElementById("password").value; 
 var pwdc = document.getElementById("pwdc").value; 
 if (password != pwdc) { 
  document.getElementById("checktext3").innerHTML = " × 兩次輸入密碼不一致"; 
  check = false; 
 } else { 
  document.getElementById("checktext3").innerHTML = " √"; 
  check = true; 
 } 
 return check; 
} 
function checkcb() { 
 var check = false 
 
 if (!document.getElementsByName("checkbox")[0].checked) { 
  document.getElementById("checktext4").innerHTML = " × 請同意我們的條款才可以繼續(xù)申請"; 
  check = false; 
 } else { 
  document.getElementById("checktext4").innerHTML = ""; 
  check = true; 
 
 } 
 return check; 
 
} 
function check() { 
 var check = checkusrn() && checkpwd() && checkpwdc() && checkcb(); 
 return check; 
 
} 
</script> 
 </head> 
 
 <body> 
  <form action="success.html" method="get" onsubmit="return check()"> 
   <fieldset> 
    <legend> 
     表單驗證小例子 
    </legend> 
    <h3> 
     請輸入信息 
    </h3> 
    <label> 
     用戶名： 
    </label> 
    <input type="text" id="username" name="username" 
     onchange="checkusrn()" /> 
    <span id="checktext1"></span> 
    <br /> 
    <label> 
     密碼： 
    </label> 
    <input type="password" id="password" name="password" 
     onchange="checkpwd()" /> 
    <span id="checktext2"></span> 
    <br /> 
    <label> 
     確認密碼： 
    </label> 
    <input type="password" id="pwdc" name="pwdc" onchange="checkpwdc()" /> 
    <span id="checktext3"></span> 
    <br /> 
    <input type="checkbox" name="checkbox" onchange="checkcb()" /> 
    <label> 
     我已經(jīng)閱讀了XX條款并不能同意得更多 
    </label> 
    <span id="checktext4"></span> 
    <br /> 
    <br /> 
    <input type="submit" value="走！" /> 
   </fieldset> 
  </form> 
 </body> 
</html>

下面一個一個函數(shù)進行說明：

1.先完成html頁面的表單部分，也就是整個頁面主體<body>部分

<form action="success.html" method="get" onsubmit="return check()"> 
 <fieldset> 
  <legend> 
   表單驗證小例子 
  </legend> 
  <h3> 
   請輸入信息 
  </h3> 
  <label> 
   用戶名： 
  </label> 
  <input type="text" id="username" name="username" 
   onchange="checkusrn()" /> 
  <span id="checktext1"></span> 
  <br /> 
  <label> 
   密碼： 
  </label> 
  <input type="password" id="password" name="password" 
   onchange="checkpwd()" /> 
  <span id="checktext2"></span> 
  <br /> 
  <label> 
   確認密碼： 
  </label> 
  <input type="password" id="pwdc" name="pwdc" onchange="checkpwdc()" /> 
  <span id="checktext3"></span> 
  <br /> 
  <input type="checkbox" name="checkbox" onchange="checkcb()" /> 
  <label> 
   我已經(jīng)閱讀了XX條款并不能同意得更多 
  </label> 
  <span id="checktext4"></span> 
  <br /> 
    <br /> 
  <input type="submit" value="走！" /> 
 </fieldset> 
</form>

每一個表單的都分別設(shè)置了id與name，id是給上面的js函數(shù)getelementbyid使用的，name是給action的get方法使用。
onchange()是當用戶輸入完畢，元素改變之后才js的函數(shù)調(diào)用，onkeyup是完成一個字母輸入就進行js函數(shù)調(diào)用，那當然選擇前者。

總表單的提交是首先要通過onsubmit()方法的判斷，如果這個onsubmit()的真值不為真，就不讓提交，一般這個值默認為真，表單是無條件就條件，所以我們要讓其返回check()所返回的值，看看此表單是否被允許調(diào)教

2.JS函數(shù)，也就是<head>頭的<script type="text/javascript">部分

(1)checkusrn() ,checkpwd(),checkpwdc()

function checkusrn() { 
 var check = false; 
 var username = document.getElementById("username").value; 
 if (username.length > 10) { 
  document.getElementById("checktext1").innerHTML = " × 不要多于10位"; 
  check = false; 
 } else { 
  document.getElementById("checktext1").innerHTML = " √"; 
  check = true; 
 } 
 return check; 
} 
 
function checkpwd() { 
 var check = false; 
 var password = document.getElementById("password").value; 
 if (password.length < 6) { 
  document.getElementById("checktext2").innerHTML = " × 不要少于6位"; 
  check = false; 
 } else { 
  document.getElementById("checktext2").innerHTML = " √"; 
  check = true; 
 } 
 return check; 
} 
function checkpwdc() { 
 var check = false; 
 var password = document.getElementById("password").value; 
 var pwdc = document.getElementById("pwdc").value; 
 if (password != pwdc) { 
  document.getElementById("checktext3").innerHTML = " × 兩次輸入密碼不一致"; 
  check = false; 
 } else { 
  document.getElementById("checktext3").innerHTML = " √"; 
  check = true; 
 } 
 return check; 
}

三部分邏輯完全一樣，先立個判斷flag，check，看是否認證通過，為下面的總判斷函數(shù)做準備。之所分開三個函數(shù)寫，并立起不同的flag（請注意每個check值只作用于每個函數(shù)內(nèi)，互不影響），傳到總的check函數(shù)。是保證不會出現(xiàn)類似還沒輸入密碼框就說密碼輸入少于6位的情況。

同時，拿值，立即改變輸入框旁邊的行內(nèi)文本<span>。

值得注意的是checkpwdc()要同時拿走上面的密碼框的輸入值，否則無法完成這次判斷。

(2)checkcb()

function checkcb() { 
 var check = false 
 
 if (!document.getElementsByName("checkbox")[0].checked) { 
  document.getElementById("checktext4").innerHTML = " × 請同意我們的條款才可以繼續(xù)申請"; 
  check = false; 
 } else { 
  document.getElementById("checktext4").innerHTML = ""; 
  check = true; 
 
 } 
 return check; 
 
}

請注意復選框的判斷與文本框、密碼框的判斷是不同的，要用getelementbyname（）去拿name而不能如同上面的方法那樣拿ID

(3)總判斷函數(shù)check()

function check() { 
 var check = checkusrn() && checkpwd() && checkpwdc() && checkcb(); 
 return check; 
}

意思是上述所有函數(shù)必須判斷通過，此函數(shù)的返回值才是真，此乃合取式，一個為假，此式就為假。
把這個check打到總表單的onsubmit()事件的返回值中，控制表單是否能夠提交，接觸action指向的頁面。

至此，制作完畢。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

JavaScript表單即時驗證驗證不成功不能提交

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

JavaScript表單即時驗證 驗證不成功不能提交

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

JavaScript表單即時驗證驗證不成功不能提交