原生js 實(shí)現(xiàn)表單驗(yàn)證功能
更新時(shí)間：2021年02月08日 09:05:33 作者：蔣偉平
這篇文章主要介紹了原生js如何實(shí)現(xiàn)表單驗(yàn)證功能，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
表單驗(yàn)證是web前端最常見(jiàn)的功能之一，也屬于前端開(kāi)發(fā)的基本功。自己完成一個(gè)表單驗(yàn)證的開(kāi)發(fā)，也有助于加深對(duì)字符串處理和正則表達(dá)式的理解。
基本的表單驗(yàn)證包括如：字母驗(yàn)證、數(shù)字驗(yàn)證、字母和數(shù)字驗(yàn)證、漢字驗(yàn)證、密碼驗(yàn)證、日期驗(yàn)證、手機(jī)驗(yàn)證、郵箱驗(yàn)證，密碼驗(yàn)證等。
現(xiàn)在就來(lái)完成這些驗(yàn)證代碼的編寫(xiě)，先來(lái)看字母是怎么驗(yàn)證的。先編寫(xiě)需要的html代碼，創(chuàng)建一個(gè)id為formContainer的表單元素，在里面加入需要驗(yàn)證英文字母的文本框和按鈕，文本框后面需要一個(gè)span元素存放提示文字。如下所示：
<form action="" class="form_Box" id="formContainer"> <dl> <dt>英文字母：</dt> <dd><input type="text" id="verifyEn"><span></span></dd> <dd> <input type="submit" value="提交" class="btn submit"> <input type="reset" value="重置" class="btn reset"> </dd> </dl> </form>
開(kāi)發(fā)的時(shí)候，一步一步分析功能再去實(shí)現(xiàn)，可以保持清晰的思路。
1. 獲取表單元素及文本框元素，如下所示：
var eFormContainer = document.getElementById('formContainer');
var eVerifyEn = document.getElementById('verifyEn');
2. 給表單元素綁定提交事件，用于點(diǎn)擊提交按鈕時(shí)，進(jìn)行驗(yàn)證。
eFormContainer.addEventListener('submit',function(event){
});
本實(shí)例要求當(dāng)通過(guò)驗(yàn)證時(shí)，彈出提示通過(guò)驗(yàn)證；如果驗(yàn)證沒(méi)有通過(guò)時(shí)，光標(biāo)定位到文本框，并在文本框后顯示驗(yàn)證失敗的提示。接下來(lái)看下在提交事件函數(shù)中，具體怎么樣做。
3. 先在函數(shù)中聲明相關(guān)變量并獲取文本框的值。bPass變量用于判斷是否可通過(guò)驗(yàn)證；sPrompt變量是提示文字；sValue變量是文本框的值。如下所示：
eFormContainer.addEventListener('submit',function(event){
var bPass = false;
var sPrompt = '';
var sValue = eVerifyEn.value;
});
4. 不允許文本框?yàn)榭?。判斷sValue是不是空字符串，如果是則在文本框后顯示提示，并且激活文本框，還需要阻止后續(xù)操作和默認(rèn)行為，代碼如下：
eFormContainer.addEventListener('submit',function(){
/* ... */
if(sValue.trim()==''){
//修改提示文字
sPrompt = '英文字母不能為空!';
//光標(biāo)定位到字母文本框
eVerifyEn.focus();
//在文本框后顯示提示文字
//獲取文本框父元素
let eParent = eVerifyEn.parentElement;
//獲取存放提示的span元素
let eSpan = eParent.getElementsByTagName('span')[0];
//在span元素中添加提示
eSpan.innerHTML = sPrompt;
//阻止表單提交
event.preventDefault();
//阻止后續(xù)代碼的執(zhí)行
return;
}
});
5. 判斷輸入的值是否符合規(guī)則，即只有英文字母沒(méi)有其他字符。在這里聲明一個(gè)正則表達(dá)式，用于判斷是否都是英文字母。如下所示：
eFormContainer.addEventListener('submit',function(){
/* ... */
//聲明正則，并判斷字符串是否都是英文字母
let reg = /^[a-zA-Z]+$/;
bPass = reg.test(sValue);
});
6. 根據(jù)正則判斷結(jié)果，執(zhí)行通過(guò)或阻止提交。
eFormContainer.addEventListener('submit',function(){
/* ... */
if(bPass){
//通過(guò)驗(yàn)證彈出提示
alert('通過(guò)驗(yàn)證');
}else{
//修改提示文字
sPrompt = '只能輸入英文字母!';
//光標(biāo)定位到字母文本框
eVerifyEn.focus();
//在文本框后顯示提示文字
//獲取文本框父元素
let eParent = eVerifyEn.parentElement;
//獲取存放提示的span元素
let eSpan = eParent.getElementsByTagName('span')[0];
//在span元素中添加提示
eSpan.innerHTML = sPrompt;
//阻止表單提交
event.preventDefault();
}
});
7. 在文本框輸入內(nèi)容的時(shí)候，應(yīng)該要?jiǎng)h除后面的提示，如下所示：
//在eFormContainer元素上綁定input事件，把所有文本框的input事件都委托給eFormContainer元素，
// 這樣做的好處就是不需要給每一個(gè)文本框都添加事件。
eFormContainer.addEventListener('input',function(event){
//獲取當(dāng)前文本框
let eInput = event.target;
//獲取文本框父元素
let eParent = eInput.parentElement;
//獲取存放提示的span元素
let eSpan = eParent.getElementsByTagName('span')[0];
//清空提示
eSpan.innerHTML = '';
});
此時(shí)的完整javascript代碼如下：
function fnFormVerify(){
// 獲取表單元素
var eFormContainer = document.getElementById('formContainer');
// 獲取驗(yàn)證字母文本框
var eVerifyEn = document.getElementById('verifyEn');
// 給表單元素綁定提交事件
eFormContainer.addEventListener('submit',function(){
// 聲明bPass變量，用于判斷是否通過(guò)驗(yàn)證
var bPass = false;
// 聲明sPrompt變量，用于提示文字
var sPrompt = '';
// 獲取字母文本框的值，保證其不等于空，再判斷值中是否包含非英文字母，代碼如下：
var sValue = eVerifyEn.value;
//保證其不等于空
if(sValue.trim()==''){
//修改提示文字
sPrompt = '英文字母不能為空!';
//光標(biāo)定位到字母文本框
eVerifyEn.focus();
//在文本框后顯示提示文字
//獲取文本框父元素
let eParent = eVerifyEn.parentElement;
//獲取存放提示的span元素
let eSpan = eParent.getElementsByTagName('span')[0];
//在span元素中添加提示
eSpan.innerHTML = sPrompt;
//阻止表單提交
event.preventDefault();
//阻止后續(xù)代碼的執(zhí)行
return;
}
//聲明正則，并判斷字符串是否都是英文字母
let reg = /^[a-zA-Z]+$/;
bPass = reg.test(sValue);
if(bPass){
//通過(guò)驗(yàn)證彈出提示
alert('通過(guò)驗(yàn)證');
}else{
//修改提示文字
sPrompt = '只能輸入英文字母!';
//光標(biāo)定位到字母文本框
eVerifyEn.focus();
//在文本框后顯示提示文字
//獲取文本框父元素
let eParent = eVerifyEn.parentElement;
//獲取存放提示的span元素
let eSpan = eParent.getElementsByTagName('span')[0];
//在span元素中添加提示
eSpan.innerHTML = sPrompt;
//阻止表單提交
event.preventDefault();
}
});
//在eFormContainer元素上綁定input事件，把所有文本框的input事件都委托給eFormContainer元素，
// 這樣做的好處就是不需要給每一個(gè)文本框都添加事件。
eFormContainer.addEventListener('input',function(event){
//獲取當(dāng)前文本框
let eInput = event.target;
//獲取文本框父元素
let eParent = eInput.parentElement;
//獲取存放提示的span元素
let eSpan = eParent.getElementsByTagName('span')[0];
//清空提示
eSpan.innerHTML = '';
});
}
fnFormVerify();
此時(shí)效果如圖所示：
隨后我們還需要完成數(shù)字驗(yàn)證、字母和數(shù)字驗(yàn)證、漢字驗(yàn)證、密碼驗(yàn)證、日期驗(yàn)證、手機(jī)驗(yàn)證、郵箱驗(yàn)證，密碼等。如果每一次驗(yàn)證都這么寫(xiě)的話(huà)，會(huì)很繁瑣，而且代碼也會(huì)比較多。所以需要封裝一個(gè)字符串驗(yàn)證的函數(shù)，返回驗(yàn)證結(jié)果。在提交的時(shí)候再每一個(gè)文本框依次調(diào)用。
添加html元素如下：
<form action="" class="form_Box" id="formContainer"> <dl> <dt>英文字母：</dt> <dd><input type="text" id="verifyEn"><span></span></dd> <dt>英文和數(shù)字：</dt> <dd><input type="text" id="verifyEnNum"><span></span></dd> <dt>數(shù)字：</dt> <dd><input type="text" id="verifyNum"><span></span></dd> <dt>漢字：</dt> <dd><input type="text" id="verifyCn"><span></span></dd> <dt>日期：</dt> <dd><input type="text" id="verifyDate"><span></span></dd> <dt>郵箱：</dt> <dd><input type="text" id="verifyEmail"><span></span></dd> <dt>手機(jī)：</dt> <dd><input type="text" id="verifyPhone"><span></span></dd> <dt>密碼：</dt> <dd><input type="password" id="verifyPwd"><span></span></dd> <dt>確認(rèn)密碼：</dt> <dd><input type="password" id="verifyForPwd"><span></span></dd> <dt></dt> <dd> <input type="submit" value="提交" class="btn submit"> <input type="reset" value="重置" class="btn reset"> </dd> </dl> </form>
再修改js代碼：
1. 獲取表單元素和所有文本框，如下所示：
// 獲取表單元素
var eFormContainer = document.getElementById('formContainer');
// 獲取驗(yàn)證字母文本框
var eVerifyEn = document.getElementById('verifyEn');
// 獲取英文和數(shù)字文本框
var eVerifyEnNum = document.getElementById('verifyEnNum');
// 獲取數(shù)字文本框
var eVerifyNum = document.getElementById('verifyNum');
// 獲取漢字文本框
var eVerifyCn = document.getElementById('verifyCn');
// 獲取日期文本框
var eVerifyDate = document.getElementById('verifyDate');
// 獲取郵箱文本框
var eVerifyEmail = document.getElementById('verifyEmail');
// 獲取手機(jī)文本框
var eVerifyPhone = document.getElementById('verifyPhone');
// 獲取密碼文本框
var eVerifyPwd = document.getElementById('verifyPwd');
// 獲取確認(rèn)密碼文本框
var eVerifyForPwd = document.getElementById('verifyForPwd');
2.封裝一個(gè)驗(yàn)證函數(shù)，傳入三個(gè)參數(shù)：elem為文本框元素，reg為正則表達(dá)式，text為提示關(guān)鍵字。如下所示：
function fnVerify(elem,reg,text){
//獲取文本框輸入的字符
var sValue = elem.value;
//獲取文本框父元素
let eParent = elem.parentElement;
//獲取存放提示的span元素
let eSpan = eParent.getElementsByTagName('span')[0];
//判斷文本框字符是否為空
if(sValue.trim()==''){
//光標(biāo)定位到文本框
elem.focus();
//在文本框后顯示提示文字
eSpan.innerHTML = text + '不能為空!';
//返回false
return false;
}
// 判斷字符串是否符合規(guī)則
if(reg.test(sValue)){
//如果符合，返回true
return true;
}else{
//光標(biāo)定位到文本框
elem.focus();
//在文本框后顯示提示文字
eSpan.innerHTML = text + '格式不正確!';
//不符合則返回false
return false;
}
}
3.在表單元素上綁定提交事件，如下所示：
eFormContainer.addEventListener('submit',function(event){
// 聲明bPass變量，用于判斷是否通過(guò)驗(yàn)證
var bPass = false;
//逐個(gè)驗(yàn)證文本框格式
bPass = fnVerify(eVerifyEn,/^[a-zA-Z]+$/,'英文字母') &&
fnVerify(eVerifyEnNum,/^[a-zA-Z0-9]*$/,'英文和數(shù)字') &&
fnVerify(eVerifyNum,/^\d*$/,'數(shù)字') &&
fnVerify(eVerifyCn,/^[\u0391-\uFFE5]+$/,'漢字') &&
fnVerify(eVerifyDate,/^(\d{2}|\d{4})-\d{1,2}-\d{1,2}$/,'日期') &&
fnVerify(eVerifyEmail,/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/,'郵箱') &&
fnVerify(eVerifyPhone,/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/,'手機(jī)') &&
fnVerify(eVerifyPwd,/^[\w!@#$%^&*?\(\)]{6,16}$/,'密碼');
//確認(rèn)密碼要與密碼一致，單獨(dú)加一個(gè)驗(yàn)證
if(eVerifyPwd.value !== eVerifyForPwd.value){
//獲取確認(rèn)密碼父元素
let eParent = eVerifyForPwd.parentElement;
//獲取提示span元素
let eSpan = eParent.getElementsByTagName('span')[0];
//提示錯(cuò)誤
eSpan.innerHTML = '確認(rèn)密碼要和密碼保持一致';
//激活確認(rèn)密碼輸入框
eVerifyForPwd.focus();
//阻止后續(xù)操作
bPass = false;
}
if(bPass){
//通過(guò)驗(yàn)證彈出提示
alert('通過(guò)驗(yàn)證');
event.preventDefault(); //實(shí)際工作不能有此行，在這里是為了阻止表單默認(rèn)行為。
}else{
//阻止表單提交
event.preventDefault();
}
});
還有一個(gè)問(wèn)題需要解決，在文本框輸入內(nèi)容的時(shí)候，都應(yīng)該刪除后面的提示，不然輸入正確還提示錯(cuò)誤這不正常。
4. 在eFormContainer元素上綁定input事件，用于輸入時(shí)刪除提示文字。
eFormContainer.addEventListener('input',function(event){
//獲取當(dāng)前文本框
let eInput = event.target;
//獲取文本框父元素
let eParent = eInput.parentElement;
//獲取存放提示的span元素
let eSpan = eParent.getElementsByTagName('span')[0];
//清空提示
eSpan.innerHTML = '';
});
寫(xiě)到這里，一個(gè)完整的表單驗(yàn)證頁(yè)面基本完成了；本實(shí)例教程采用的是submit提交表單事件，而現(xiàn)在的實(shí)際開(kāi)發(fā)中，已經(jīng)很少這樣直接提交表單了。特此說(shuō)明，以免誤導(dǎo)讀者。
以上就是原生js 實(shí)現(xiàn)表單驗(yàn)證功能的詳細(xì)內(nèi)容，更多關(guān)于js 表單驗(yàn)證的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要幫助大家理解javascript中DOM事件，解決了DOM事件的兼容性，DOM事件的冒泡，以及DOM事件的重用，感興趣的小伙伴們可以參考一下2015-12-12
Highcharts 非常實(shí)用的Javascript統(tǒng)計(jì)圖demo示例
官網(wǎng)實(shí)例中給出了各式各樣的demo，可以參照document修改自己需要的即可，本文實(shí)現(xiàn)的是一個(gè)學(xué)生成績(jī)走勢(shì)demo，有需求的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
這篇文章主要介紹了p5.js入門(mén)教程之鼠標(biāo)交互的示例,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
js實(shí)現(xiàn)移動(dòng)端圖片滑塊驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)移動(dòng)端圖片滑塊驗(yàn)證功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
JavaScript詳解類(lèi)數(shù)組與可迭代對(duì)象的實(shí)現(xiàn)原理
這篇文章主要介紹了JavaScript詳解類(lèi)數(shù)組與可迭代對(duì)象的實(shí)現(xiàn)原理，ES6中引入了迭代器與可迭代對(duì)象的概念，并且提供了對(duì)可迭代對(duì)象的相關(guān)支持，如for...of循環(huán)，Map(iterable)構(gòu)造器，展開(kāi)語(yǔ)法...等。讓我們對(duì)數(shù)組外的數(shù)據(jù)集合的遍歷操作也得到極大簡(jiǎn)化2022-06-06
ES6 Promise對(duì)象概念及用法實(shí)例詳解
這篇文章主要介紹了ES6 Promise對(duì)象概念及用法,結(jié)合實(shí)例形式詳細(xì)分析了ES6中Promise對(duì)象的概念、原理、創(chuàng)建、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-10-10
取鍵盤(pán)鍵位ASCII碼的網(wǎng)頁(yè)...2007-07-07
JavaScript實(shí)現(xiàn)時(shí)間范圍效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)時(shí)間范圍效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
關(guān)于Javascript作用域鏈的八點(diǎn)總結(jié)
其實(shí)吧，關(guān)于作用域鏈相關(guān)的文章我也看了不少，但是我一直也沒(méi)能做一個(gè)詳細(xì)的總結(jié)，今天把我看到的一些東西，結(jié)合自己的想法，總結(jié)成以下8個(gè)點(diǎn)2013-12-12
這篇文章主要為大家詳細(xì)介紹了移動(dòng)端js觸摸事件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09