表單驗(yàn)證是web前端最常見的功能之一，也屬于前端開發(fā)的基本功。自己完成一個(gè)表單驗(yàn)證的開發(fā)，也有助于加深對字符串處理和正則表達(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)在就來完成這些驗(yàn)證代碼的編寫，先來看字母是怎么驗(yàn)證的。先編寫需要的html代碼，創(chuàng)建一個(gè)id為formContainer的表單元素，在里面加入需要驗(yàn)證英文字母的文本框和按鈕，文本框后面需要一個(gè)span元素存放提示文字。如下所示：

<form action='' 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>開發(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)通過驗(yàn)證時(shí)，彈出提示通過驗(yàn)證；如果驗(yàn)證沒有通過時(shí)，光標(biāo)定位到文本框，并在文本框后顯示驗(yàn)證失敗的提示。接下來看下在提交事件函數(shù)中，具體怎么樣做。

3. 先在函數(shù)中聲明相關(guān)變量并獲取文本框的值。bPass變量用于判斷是否可通過驗(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ī)則，即只有英文字母沒有其他字符。在這里聲明一個(gè)正則表達(dá)式，用于判斷是否都是英文字母。如下所示：

eFormContainer.addEventListener(’submit’,function(){ /* ... */ //聲明正則，并判斷字符串是否都是英文字母 let reg = /^[a-zA-Z]+$/; bPass = reg.test(sValue); });6. 根據(jù)正則判斷結(jié)果，執(zhí)行通過或阻止提交。

eFormContainer.addEventListener(’submit’,function(){ /* ... */ if(bPass){ //通過驗(yàn)證彈出提示 alert(’通過驗(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變量，用于判斷是否通過驗(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){ //通過驗(yàn)證彈出提示 alert(’通過驗(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)證都這么寫的話，會(huì)很繁瑣，而且代碼也會(huì)比較多。所以需要封裝一個(gè)字符串驗(yàn)證的函數(shù)，返回驗(yàn)證結(jié)果。在提交的時(shí)候再每一個(gè)文本框依次調(diào)用。

添加html元素如下：

<form action='' 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變量，用于判斷是否通過驗(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){ //通過驗(yàn)證彈出提示 alert(’通過驗(yàn)證’); event.preventDefault(); //實(shí)際工作不能有此行，在這里是為了阻止表單默認(rèn)行為。 }else{ //阻止表單提交 event.preventDefault(); } });

還有一個(gè)問題需要解決，在文本框輸入內(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 = ’’;});

寫到這里，一個(gè)完整的表單驗(yàn)證頁面基本完成了；本實(shí)例教程采用的是submit提交表單事件，而現(xiàn)在的實(shí)際開發(fā)中，已經(jīng)很少這樣直接提交表單了。特此說明，以免誤導(dǎo)讀者。

以上就是原生js 實(shí)現(xiàn)表單驗(yàn)證功能的詳細(xì)內(nèi)容，更多關(guān)于js 表單驗(yàn)證的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！