JavaScript表單即時(shí)驗(yàn)證 驗(yàn)證不成功不能提交
不能再讓表單在提交按鈕之后才被驗(yàn)證了！你輸入的任何信息表單都會(huì)即時(shí)反應(yīng)！
這個(gè)JavaScript的關(guān)鍵是onChange()事件，使用onKeyUp()事件完成是不行的，人家沒有輸入完畢，你就說人家不對(duì)，多不友好啊╮(╯▽╰)╭
一、基本目標(biāo)
一個(gè)表單認(rèn)證頁，如果輸入的用戶名超過10位則會(huì)立即在輸入框旁邊彈出提示：
如果密碼少于6位，而且兩次輸入密碼不一致同樣彈出提示，
如果你沒有勾選閱讀條款的復(fù)選框，同樣會(huì)彈出提示
知道你所有的項(xiàng)目滿足設(shè)定的條件之前，提交按鈕無效。
滿足設(shè)定條件，表單通過get的方法提交。
二、制作過程
整個(gè)頁面的代碼如下：
<!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 = " × 請(qǐng)同意我們的條款才可以繼續(xù)申請(qǐng)";
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>
表單驗(yàn)證小例子
</legend>
<h3>
請(qǐng)輸入信息
</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>
確認(rèn)密碼：
</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>
下面一個(gè)一個(gè)函數(shù)進(jìn)行說明：
1.先完成html頁面的表單部分，也就是整個(gè)頁面主體<body>部分
<form action="success.html" method="get" onsubmit="return check()">
<fieldset>
<legend>
表單驗(yàn)證小例子
</legend>
<h3>
請(qǐng)輸入信息
</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>
確認(rèn)密碼：
</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>
每一個(gè)表單的都分別設(shè)置了id與name，id是給上面的js函數(shù)getelementbyid使用的，name是給action的get方法使用。
onchange()是當(dāng)用戶輸入完畢，元素改變之后才js的函數(shù)調(diào)用，onkeyup是完成一個(gè)字母輸入就進(jìn)行js函數(shù)調(diào)用，那當(dāng)然選擇前者。
總表單的提交是首先要通過onsubmit()方法的判斷，如果這個(gè)onsubmit()的真值不為真，就不讓提交，一般這個(gè)值默認(rèn)為真，表單是無條件就條件，所以我們要讓其返回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;
}
三部分邏輯完全一樣，先立個(gè)判斷flag，check，看是否認(rèn)證通過，為下面的總判斷函數(shù)做準(zhǔn)備。 之所分開三個(gè)函數(shù)寫，并立起不同的flag（請(qǐng)注意每個(gè)check值只作用于每個(gè)函數(shù)內(nèi)，互不影響），傳到總的check函數(shù)。是保證不會(huì)出現(xiàn)類似還沒輸入密碼框就說密碼輸入少于6位的情況。
同時(shí)，拿值，立即改變輸入框旁邊的行內(nèi)文本<span>。
值得注意的是checkpwdc()要同時(shí)拿走上面的密碼框的輸入值，否則無法完成這次判斷。
(2)checkcb()
function checkcb() {
var check = false
if (!document.getElementsByName("checkbox")[0].checked) {
document.getElementById("checktext4").innerHTML = " × 請(qǐng)同意我們的條款才可以繼續(xù)申請(qǐng)";
check = false;
} else {
document.getElementById("checktext4").innerHTML = "";
check = true;
}
return check;
}
請(qǐng)注意復(fù)選框的判斷與文本框、密碼框的判斷是不同的，要用getelementbyname（）去拿name而不能如同上面的方法那樣拿ID
(3)總判斷函數(shù)check()
function check() {
var check = checkusrn() && checkpwd() && checkpwdc() && checkcb();
return check;
}
意思是上述所有函數(shù)必須判斷通過，此函數(shù)的返回值才是真，此乃合取式，一個(gè)為假，此式就為假。
把這個(gè)check打到總表單的onsubmit()事件的返回值中，控制表單是否能夠提交，接觸action指向的頁面。
至此，制作完畢。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)模仿桌面窗口的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)模仿桌面窗口的方法,可實(shí)現(xiàn)模仿桌面窗口的打開、關(guān)閉、移動(dòng)、縮放及最大化、最小化等功能,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了JAVA四種基本排序方法,較為詳細(xì)的總結(jié)分析了插入法、冒泡法、選擇法及Shell排序等四種常用的排序技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-07-07
當(dāng)$.get返回失敗后調(diào)用fail方法示例詳解
這篇文章主要介紹了當(dāng)$.get返回失敗后，調(diào)用fail方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-12-12
JavaScript使用位運(yùn)算符判斷奇數(shù)和偶數(shù)的方法
這篇文章主要介紹了JavaScript使用位運(yùn)算符判斷奇數(shù)和偶數(shù)的方法,涉及javascript位運(yùn)算的使用技巧,需要的朋友可以參考下2015-06-06
原生javascript實(shí)現(xiàn)連連看游戲
這篇文章主要為大家詳細(xì)介紹了原生javascript實(shí)現(xiàn)連連看游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
單例模式的定義是保證一個(gè)類僅有一個(gè)實(shí)例,下面這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)單例模式的6種方案,需要的朋友可以參考下2021-05-05
經(jīng)常用的圖片在容器中的水平垂直居中實(shí)例
經(jīng)常用的圖片在容器中的水平垂直居中實(shí)例...2007-06-06
本文是對(duì)js中apply方法的使用進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
javascript 節(jié)點(diǎn)排序?qū)崿F(xiàn)代碼
為了讓自定義選擇選擇出的節(jié)點(diǎn)集合盡可能接近原生API選出的結(jié)果，我們往往要對(duì)結(jié)果集進(jìn)行排序，此順序當(dāng)然是從上到下，從左到右的DOM樹順序。2011-01-01
IE8提示Invalid procedure call or argument 異常的解決方法
某臺(tái)機(jī)器上，訪問公司的好幾個(gè)產(chǎn)品網(wǎng)站，都拋出很多 Invalid procedure call or argument ，跟進(jìn)了下，情況最后簡化為2012-09-09