JavaScript表單即時(shí)驗(yàn)證 驗(yàn)證不成功不能提交
不能再讓表單在提交按鈕之后才被驗(yàn)證了！你輸入的任何信息表單都會(huì)即時(shí)反應(yīng)！
這個(gè)JavaScript的關(guān)鍵是onChange()事件，使用onKeyUp()事件完成是不行的，人家沒(méi)有輸入完畢，你就說(shuō)人家不對(duì)，多不友好啊╮(╯▽╰)╭
一、基本目標(biāo)
一個(gè)表單認(rèn)證頁(yè)，如果輸入的用戶名超過(guò)10位則會(huì)立即在輸入框旁邊彈出提示：
如果密碼少于6位，而且兩次輸入密碼不一致同樣彈出提示，
如果你沒(méi)有勾選閱讀條款的復(fù)選框，同樣會(huì)彈出提示
知道你所有的項(xiàng)目滿足設(shè)定的條件之前，提交按鈕無(wú)效。
滿足設(shè)定條件，表單通過(guò)get的方法提交。
二、制作過(guò)程
整個(gè)頁(yè)面的代碼如下：
<!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)行說(shuō)明：
1.先完成html頁(yè)面的表單部分，也就是整個(gè)頁(yè)面主體<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)然選擇前者。
總表單的提交是首先要通過(guò)onsubmit()方法的判斷，如果這個(gè)onsubmit()的真值不為真，就不讓提交，一般這個(gè)值默認(rèn)為真，表單是無(wú)條件就條件，所以我們要讓其返回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)證通過(guò)，為下面的總判斷函數(shù)做準(zhǔn)備。 之所分開(kāi)三個(gè)函數(shù)寫，并立起不同的flag（請(qǐng)注意每個(gè)check值只作用于每個(gè)函數(shù)內(nèi)，互不影響），傳到總的check函數(shù)。是保證不會(huì)出現(xiàn)類似還沒(méi)輸入密碼框就說(shuō)密碼輸入少于6位的情況。
同時(shí)，拿值，立即改變輸入框旁邊的行內(nèi)文本<span>。
值得注意的是checkpwdc()要同時(shí)拿走上面的密碼框的輸入值，否則無(wú)法完成這次判斷。
(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ù)必須判斷通過(guò)，此函數(shù)的返回值才是真，此乃合取式，一個(gè)為假，此式就為假。
把這個(gè)check打到總表單的onsubmit()事件的返回值中，控制表單是否能夠提交，接觸action指向的頁(yè)面。
至此，制作完畢。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- jquery validate.js表單驗(yàn)證的基本用法入門
- js 常用正則表達(dá)式表單驗(yàn)證代碼
- JavaScript 表單驗(yàn)證正則表達(dá)式大全[推薦]
- AngularJS實(shí)現(xiàn)表單驗(yàn)證
- javascript制作的簡(jiǎn)單注冊(cè)模塊表單驗(yàn)證
- 收藏的js表單驗(yàn)證控制代碼大全
- AngularJS使用ngMessages進(jìn)行表單驗(yàn)證
- javascript表單驗(yàn)證 - Parsley.js使用和配置
- jquery表單驗(yàn)證插件（jquery.validate.js）的3種使用方式
- JavaScript 使用正則表達(dá)式進(jìn)行表單驗(yàn)證的示例代碼
相關(guān)文章
Boostrap柵格系統(tǒng)與自己額外定義的媒體查詢的沖突問(wèn)題
這篇文章主要介紹了Boostrap柵格系統(tǒng)與自己額外定義的媒體查詢的沖突問(wèn)題,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
js實(shí)現(xiàn)簡(jiǎn)單秒表走動(dòng)的時(shí)鐘特效
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單秒表走動(dòng)的時(shí)鐘特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
mpvue實(shí)現(xiàn)微信小程序快遞單號(hào)查詢代碼
這篇文章主要介紹了mpvue實(shí)現(xiàn)微信小程序快遞單號(hào)查詢，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了JavaScript的流程控制語(yǔ)句，感興趣的小伙伴們可以參考一下2015-11-11
Javascript實(shí)現(xiàn)關(guān)聯(lián)數(shù)據(jù)(Linked Data)查詢及注意細(xì)節(jié)
DBpedia對(duì)Wikipedia的數(shù)據(jù)變成Linked Data形式，使得機(jī)器也能讀懂并自由獲得這些數(shù)據(jù);本文的主要目的是利用Javascript從DBpedia中獲取我們想要的數(shù)據(jù),感興趣的朋友可以參考下，希望可以幫助到你2013-02-02
原生js實(shí)現(xiàn)簡(jiǎn)單輪播圖效果
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)簡(jiǎn)單輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
requirejs按需加載angularjs文件實(shí)例
本篇文章主要介紹了requirejs按需加載angularjs文件實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
如何在webpack項(xiàng)目中調(diào)試loader插件
最近在學(xué)習(xí)webpack，本文主要介紹了loader插件的調(diào)試方法，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
JS禁止查看網(wǎng)頁(yè)源代碼的實(shí)現(xiàn)方法
本文給大家介紹js如何禁止查看網(wǎng)頁(yè)源代碼，并給大家分享了三種查看路徑的方法，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-10-10
javascript實(shí)現(xiàn)右側(cè)彈出“分享到”窗口效果
這篇文章主要為大家介紹了javascript實(shí)現(xiàn)右側(cè)彈出“分享到”窗口效果，以一個(gè)完整的js右側(cè)彈出“分享到”窗口的實(shí)例代碼進(jìn)行分析，感興趣的小伙伴們可以參考一下2016-02-02