共計(jì) 3920 個字符，預(yù)計(jì)需要花費(fèi) 10 分鐘才能閱讀完成。

這篇文章將為大家詳細(xì)講解有關(guān)原生 js 制作表單驗(yàn)證的方法是什么，文章內(nèi)容質(zhì)量較高，因此丸趣 TV 小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

表單驗(yàn)證是 web 前端最常見的功能之一，也屬于前端開發(fā)的基本功。自己完成一個表單驗(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)建一個 id 為 formContainer 的表單元素，在里面加入需要驗(yàn)證英文字母的文本框和按鈕，文本框后面需要一個 span 元素存放提示文字。如下所示：

form action=  id= formContainer   dl   dt 英文字母：/dt   dd input type= text  id= verifyEn span /span /dd   dd   input type= submit  value= 提交     input type= reset  value= 重置     /dd   /dl   /form

開發(fā)的時候，一步一步分析功能再去實(shí)現(xiàn)，可以保持清晰的思路。

1. 獲取表單元素及文本框元素，如下所示：

var eFormContainer = document.getElementById(formContainer var eVerifyEn = document.getElementById( verifyEn

 2. 給表單元素綁定提交事件，用于點(diǎn)擊提交按鈕時，進(jìn)行驗(yàn)證。

eFormContainer.addEventListener(submit ,function(event){ });

本實(shí)例要求當(dāng)通過驗(yàn)證時，彈出提示通過驗(yàn)證；如果驗(yàn)證沒有通過時，光標(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ī)則，即只有英文字母沒有其他字符。在這里聲明一個正則表達(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)容的時候，應(yīng)該要刪除后面的提示，如下所示：

// 在 eFormContainer 元素上綁定 input 事件，把所有文本框的 input 事件都委托給 eFormContainer 元素， //  這樣做的好處就是不需要給每一個文本框都添加事件。 eFormContainer.addEventListener(input ,function(event){ // 獲取當(dāng)前文本框  let eInput = event.target; // 獲取文本框父元素  let eParent = eInput.parentElement; // 獲取存放提示的 span 元素  let eSpan = eParent.getElementsByTagName( span)[0]; // 清空提示  eSpan.innerHTML =   });

此時的完整 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 元素， //  這樣做的好處就是不需要給每一個文本框都添加事件。 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();

關(guān)于原生 js 制作表單驗(yàn)證的方法是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。