原生js制作表單驗證的方法是什么

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

表單驗證是web前端最常見的功能之一，也屬于前端開發的基本功。自己完成一個表單驗證的開發，也有助于加深對字符串處理和正則表達式的理解。

基本的表單驗證包括如：字母驗證、數字驗證、字母和數字驗證、漢字驗證、密碼驗證、日期驗證、手機驗證、郵箱驗證，密碼驗證等。

現在就來完成這些驗證代碼的編寫，先來看字母是怎么驗證的。先編寫需要的html代碼，創建一個id為formContainer的表單元素，在里面加入需要驗證英文字母的文本框和按鈕，文本框后面需要一個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>

開發的時候，一步一步分析功能再去實現，可以保持清晰的思路。

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

var eFormContainer = document.getElementById('formContainer');var eVerifyEn = document.getElementById('verifyEn');

 2. 給表單元素綁定提交事件，用于點擊提交按鈕時，進行驗證。

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

本實例要求當通過驗證時，彈出提示通過驗證；如果驗證沒有通過時，光標定位到文本框，并在文本框后顯示驗證失敗的提示。接下來看下在提交事件函數中，具體怎么樣做。

 3. 先在函數中聲明相關變量并獲取文本框的值。bPass變量用于判斷是否可通過驗證；sPrompt變量是提示文字；sValue變量是文本框的值。如下所示：

eFormContainer.addEventListener('submit',function(event){ var bPass = false; var sPrompt = ''; var sValue = eVerifyEn.value;});

 4. 不允許文本框為空。判斷sValue是不是空字符串，如果是則在文本框后顯示提示，并且激活文本框，還需要阻止后續操作和默認行為，代碼如下：

eFormContainer.addEventListener('submit',function(){ /* ... */  if(sValue.trim()==''){  //修改提示文字  sPrompt = '英文字母不能為空!';  //光標定位到字母文本框  eVerifyEn.focus();  //在文本框后顯示提示文字  //獲取文本框父元素  let eParent = eVerifyEn.parentElement;  //獲取存放提示的span元素  let eSpan = eParent.getElementsByTagName('span')[0];  //在span元素中添加提示  eSpan.innerHTML = sPrompt;  //阻止表單提交  event.preventDefault();  //阻止后續代碼的執行  return; } });

5. 判斷輸入的值是否符合規則，即只有英文字母沒有其他字符。在這里聲明一個正則表達式，用于判斷是否都是英文字母。如下所示：

eFormContainer.addEventListener('submit',function(){ /* ... */  //聲明正則，并判斷字符串是否都是英文字母 let reg = /^[a-zA-Z]+$/; bPass = reg.test(sValue); });

6. 根據正則判斷結果，執行通過或阻止提交。

eFormContainer.addEventListener('submit',function(){ /* ... */  if(bPass){  //通過驗證彈出提示  alert('通過驗證'); }else{  //修改提示文字  sPrompt = '只能輸入英文字母!';  //光標定位到字母文本框  eVerifyEn.focus();  //在文本框后顯示提示文字  //獲取文本框父元素  let eParent = eVerifyEn.parentElement;  //獲取存放提示的span元素  let eSpan = eParent.getElementsByTagName('span')[0];  //在span元素中添加提示  eSpan.innerHTML = sPrompt;  //阻止表單提交  event.preventDefault(); } });

7. 在文本框輸入內容的時候，應該要刪除后面的提示，如下所示：

//在eFormContainer元素上綁定input事件，把所有文本框的input事件都委托給eFormContainer元素， // 這樣做的好處就是不需要給每一個文本框都添加事件。 eFormContainer.addEventListener('input',function(event){ //獲取當前文本框 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'); // 獲取驗證字母文本框 var eVerifyEn = document.getElementById('verifyEn'); // 給表單元素綁定提交事件 eFormContainer.addEventListener('submit',function(){  // 聲明bPass變量，用于判斷是否通過驗證  var bPass = false;  // 聲明sPrompt變量，用于提示文字  var sPrompt = '';  // 獲取字母文本框的值，保證其不等于空，再判斷值中是否包含非英文字母，代碼如下：  var sValue = eVerifyEn.value;  //保證其不等于空  if(sValue.trim()==''){  //修改提示文字  sPrompt = '英文字母不能為空!';  //光標定位到字母文本框  eVerifyEn.focus();  //在文本框后顯示提示文字  //獲取文本框父元素  let eParent = eVerifyEn.parentElement;  //獲取存放提示的span元素  let eSpan = eParent.getElementsByTagName('span')[0];  //在span元素中添加提示  eSpan.innerHTML = sPrompt;  //阻止表單提交  event.preventDefault();  //阻止后續代碼的執行  return;  }  //聲明正則，并判斷字符串是否都是英文字母  let reg = /^[a-zA-Z]+$/;  bPass = reg.test(sValue);  if(bPass){  //通過驗證彈出提示  alert('通過驗證');  }else{  //修改提示文字  sPrompt = '只能輸入英文字母!';  //光標定位到字母文本框  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){  //獲取當前文本框  let eInput = event.target;  //獲取文本框父元素  let eParent = eInput.parentElement;  //獲取存放提示的span元素  let eSpan = eParent.getElementsByTagName('span')[0];  //清空提示  eSpan.innerHTML = ''; }); } fnFormVerify();

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