原生js製作表單驗證，基本的表單驗證方法

表單驗證是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();

此時效果如圖所示：

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

添加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製作表單驗證，基本的表單驗證方法

DAPPER 事務 TRANSACTION

整理 js 日期對象的詳細功能，使用 js 日期對象獲取具體日期、昨天、今天、明天、每月天數、時間戳等，以及常用的日期時間處理方法

vue3和vue2 的區別，vue3和vu2到底哪個好呢？

Vue CLI 5 和 vite 創建 vue3.x 項目以及 Vue CLI 和 vite 的區別

使用css3和javascript開發web拾色器實例

原生js日曆選擇器，學習js面向對象開發日曆插件

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結