2. 程式人生 > 程式設計 >原生js 實現表單驗證功能

原生js 實現表單驗證功能

阿新 • • 發佈：2021-02-10

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

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

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

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

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 實現表單驗證功能

隨後我們還需要完成數字驗證、字母和數字驗證、漢字驗證、密碼驗證、日期驗證、手機驗證、郵箱驗證，密碼等。如果每一次驗證都這麼寫的話，會很繁瑣，而且程式碼也會比較多。所以需要封裝一個字串驗證的函式，返回驗證結果。在提交的時候再每一個文字框依次呼叫。

新增html元素如下：

<form action="" class="form_Box" id="formContainer">
 <dl>
 <dt>英文字母：</dt>
 <dd><input type="text" id="verifyEn"><span></span></dd>
 <dt>英文和數字：</dt>
 <dd><input type="text" id="verifyEnNum"><span></span></dd>
 <dt>數字：</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>手機：</dt>
 <dd><input type="text" id="verifyPhone"><span></span></dd>
 <dt>密碼：</dt>
 <dd><input type="password" id="verifyPwd"><span></span></dd>
 <dt>確認密碼：</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');
 // 獲取驗證字母文字框
 var eVerifyEn = document.getElementById('verifyEn');
 // 獲取英文和數字文字框
 var eVerifyEnNum = document.getElementById('verifyEnNum');
 // 獲取數字文字框
 var eVerifyNum = document.getElementById('verifyNum');
 // 獲取漢字文字框
 var eVerifyCn = document.getElementById('verifyCn');
 // 獲取日期文字框
 var eVerifyDate = document.getElementById('verifyDate');
 // 獲取郵箱文字框
 var eVerifyEmail = document.getElementById('verifyEmail');
 // 獲取手機文字框
 var eVerifyPhone = document.getElementById('verifyPhone');
 // 獲取密碼文字框
 var eVerifyPwd = document.getElementById('verifyPwd');
 // 獲取確認密碼文字框
 var eVerifyForPwd = document.getElementById('verifyForPwd');

2.封裝一個驗證函式，傳入三個引數：elem為文字框元素，reg為正則表示式，text為提示關鍵字。如下所示：

function fnVerify(elem,reg,text){
 //獲取文字框輸入的字元
 var sValue = elem.value;
 //獲取文字框父元素
 let eParent = elem.parentElement;
 //獲取存放提示的span元素
 let eSpan = eParent.getElementsByTagName('span')[0];

 //判斷文字框字元是否為空
 if(sValue.trim()==''){
 //游標定位到文字框
 elem.focus();
 //在文字框後顯示提示文字
 eSpan.innerHTML = text + '不能為空!';
 //返回false
 return false;
 }

 // 判斷字串是否符合規則
 if(reg.test(sValue)){
 //如果符合，返回true
 return true;
 }else{
 //游標定位到文字框
 elem.focus();
 //在文字框後顯示提示文字
 eSpan.innerHTML = text + '格式不正確!';
 //不符合則返回false
 return false;
 }
}

3.在表單元素上繫結提交事件，如下所示：

eFormContainer.addEventListener('submit',function(event){
 // 宣告bPass變數，用於判斷是否通過驗證
 var bPass = false;
 
 //逐個驗證文字框格式
 bPass = fnVerify(eVerifyEn,/^[a-zA-Z]+$/,'英文字母') &&
   fnVerify(eVerifyEnNum,/^[a-zA-Z0-9]*$/,'英文和數字') &&
   fnVerify(eVerifyNum,/^\d*$/,'數字') &&
   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})$/,'手機') &&
   fnVerify(eVerifyPwd,/^[\w!@#$%^&*?\(\)]{6,16}$/,'密碼');

 //確認密碼要與密碼一致，單獨加一個驗證
 if(eVerifyPwd.value !== eVerifyForPwd.value){
 //獲取確認密碼父元素
 let eParent = eVerifyForPwd.parentElement;
 //獲取提示span元素
 let eSpan = eParent.getElementsByTagName('span')[0];
 //提示錯誤
 eSpan.innerHTML = '確認密碼要和密碼保持一致';
 //啟用確認密碼輸入框
 eVerifyForPwd.focus();
 //阻止後續操作
 bPass = false;
 }

 if(bPass){
 //通過驗證彈出提示
 alert('通過驗證');
 event.preventDefault(); //實際工作不能有此行，在這裡是為了阻止表單預設行為。
 }else{
 //阻止表單提交
 event.preventDefault();
 }
 
});

還有一個問題需要解決，在文字框輸入內容的時候，都應該刪除後面的提示，不然輸入正確還提示錯誤這不正常。

4. 在eFormContainer元素上繫結input事件，用於輸入時刪除提示文字。

eFormContainer.addEventListener('input',function(event){
 //獲取當前文字框
 let eInput = event.target;
 //獲取文字框父元素
 let eParent = eInput.parentElement;
 //獲取存放提示的span元素
 let eSpan = eParent.getElementsByTagName('span')[0];
 //清空提示
 eSpan.innerHTML = '';
});

寫到這裡，一個完整的表單驗證頁面基本完成了；本例項教程採用的是submit提交表單事件，而現在的實際開發中，已經很少這樣直接提交表單了。特此說明，以免誤導讀者。

以上就是原生js 實現表單驗證功能的詳細內容，更多關於js 表單驗證的資料請關注我們其它相關文章！

相關推薦

原生js 實現表單驗證功能

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

原生js實現表單的正則驗證（驗證通過後才可提交）

實現瞭如下功能： 1.使用者名稱：onfouc顯示msg規則；onkeyup計算字元，其中中文為兩個字元；onblur，驗證是否通過

JS簡單表單驗證功能完整示例

本文例項講述了JS簡單表單驗證功能。分享給大家供大家參考，具體如下： 簡單js表單驗證demo

原生js實現密碼強度驗證功能

我們在填寫表單的時候，特別是輸入密碼的時候，經常看到實時顯示密碼強度的效果，那麼這種效果如何通過我們的原生js實現呢？

JavaScript實現表單驗證功能

本文例項為大家分享了JavaScript實現表單驗證功能的具體程式碼，供大家參考，具體內容如下

vue實現表單驗證功能

本篇主要講述如何基於NUXT的validate方法實現表單的驗證。 將驗證方法封裝後，使用的時候只需像:rules=\"filter_rules({required:true,type:\'mobile\'})\"這麼一行程式碼便可在頁面中實現驗證了。

jQuery實現表單驗證功能

表單驗證例項 / 包含使用者名稱、密碼、住址、郵箱驗證 如下圖 別忘了引入jQuery框架！！！

JS使用正則表示式實現常用的表單驗證功能分析

本文例項講述了JS使用正則表示式實現常用的表單驗證功能。分享給大家供大家參考，具體如下：

jQuery實現高度靈活的表單驗證功能示例【無UI】

本文例項講述了jQuery實現高度靈活的表單驗證功能。分享給大家供大家參考，具體如下：

js實現表單校驗功能

本文例項為大家分享了實現表單校驗功能的具體程式碼，供大家參考，具體內容如下

vue實現表單驗證小功能

本文例項為大家分享了實現表單驗證的具體程式碼，供大家參考，具體內容如下

JS實現滑動拼圖驗證功能完整示例

本文例項講述了JS實現滑動拼圖驗證功能。分享給大家供大家參考，具體如下：

JS實現表單中點選小眼睛顯示隱藏密碼框中的密碼

領導交個一個任務，要求在表單中點選小眼睛顯示隱藏密碼框中的密碼！在一些網站中經常會用到這樣的功能，今天小編就給大家分享我的實現思路及程式碼

vue使用element-ui實現表單驗證

本文例項為大家分享了vue使用element-ui實現表單驗證的具體程式碼，供大家參考，具體內容如下

表單 驗證_純CSS實現表單驗證

技術標籤：表單 驗證 首發：krissarea.gitee.io(https://krissarea.gitee.io/blog/css/others/css-form-validation.html)作者：陳大魚頭(https://juejin.im/user/576b433bd342d30057aaa1e9/posts)github：KRI

微信小程式實現表單驗證

微信小程式的表單驗證，供大家參考，具體內容如下 需要用到一個外掛WxValidat.js

jQuery實現表單驗證

使用jquery實現表單驗證，供大家參考，具體內容如下 register.html <!DOCTYPE html>

vue實現表單驗證規則

vue實現表單驗證規則 技術概述 在使用者輸入輸入資料時，經常要新增表單驗證規則，對於比較複雜的驗證規則在官方文件中沒有明確的表述。

原生js實現購物車邏輯和功能

本文例項為大家分享了實現購物車邏輯和功能的具體程式碼，供大家參考，具體內容如下

[JS設計模式]：策略模式及應用-獎金、表單驗證的實現（5）

介紹 策略模式的意義是定義一系列的演算法，把它們一個個封裝起來，並且使它們可相互替換。此模式讓演算法的變化不會影響到使用演算法的客戶。