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

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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

  • js防止表單重復提交的兩種方法

    js防止表單重復提交的兩種方法

    第一種：用flag標識，下面的代碼設(shè)置checkSubmitFlg標志；第二種：在onsubmit事件中設(shè)置，在第一次提交后使提交按鈕失效，感興趣的朋友可以了解下
    2013-09-09
  • javascript管中窺豹 形參與實參淺析

    javascript管中窺豹 形參與實參淺析

    本想從語言的角度來分析，無奈功力不夠，只能粗淺的嘗試一下，于是稱之管中窺豹，還望大牛指正
    2011-12-12
  • 判斷用戶是否在線的代碼

    判斷用戶是否在線的代碼

    判斷用戶是否在線的代碼，需要的朋友可以參考下。
    2011-03-03
  • JS觸摸與手勢事件詳解

    JS觸摸與手勢事件詳解

    這篇文章主要為大家詳細介紹了JS觸摸與手勢事件的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-05-05
  • js遮罩效果制作彈出注冊界面效果

    js遮罩效果制作彈出注冊界面效果

    這篇文章主要為大家詳細介紹了js遮罩效果制作彈出注冊界面效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-01-01
  • Javascript類型系統(tǒng)之String字符串類型詳解

    Javascript類型系統(tǒng)之String字符串類型詳解

    這篇文章主要介紹了Javascript類型系統(tǒng)之String字符串類型詳解的相關(guān)資料,需要的朋友可以參考下
    2016-06-06
  • 前端React?Nextjs中的TS類型過濾實用技巧

    前端React?Nextjs中的TS類型過濾實用技巧

    今天就來介紹一個在其它開源庫中見到的既花里胡哨，又實用的TS類型——TS類型過濾，你會發(fā)現(xiàn)這些?TS騷操作真的很重要，因為它能很好地幫助你做靜態(tài)類型校驗
    2022-04-04
  • IE6下javasc#ipt:void(0) 無效的解決方法

    IE6下javasc#ipt:void(0) 無效的解決方法

    本篇文章主要是對IE6下javasc#ipt:void(0) 無效的解決方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
    2013-12-12
  • JS模擬按鈕點擊功能的方法

    JS模擬按鈕點擊功能的方法

    這篇文章主要介紹了JS模擬按鈕點擊功能的方法,結(jié)合實例形式分析了JavaScript模擬點擊按鈕事件的實現(xiàn)技巧,并附帶了JavaScript模擬點擊鏈接的實現(xiàn)方法,需要的朋友可以參考下
    2015-12-12

    • 最新評論