JS筆記 | 有 Validate.js 套件就不用自己辛苦做驗證

不知道大家第一次用原生 Javascript 做表單驗證時，是否感到麻煩？我在初學 Javascript 時，為了徹底瞭解原生 Javascript 怎麼寫，所以在練習功能時都盡量不使用套件，靠自己硬做出來，結果是做出來了，但很耗時也是真的，然後發現一個好用的表單驗證套件，真的可以省心很多！

而這個表單驗證的套件就是：

Validate.js

官方網址請點這，建議搭配官方給的文件一起看會比較清楚

那我們先來說明如何使用 Validate.js 套件吧！

我當初看到官方網址的上半部分，登愣！整個愣了，完全不知道在寫什麼，後來再往下滑看比較簡單一點的範例加上來回看了好幾次才懂 (( 汗

1. 步驟一：下載 Validate.js

使用 CDN 來載入 Validate.js 套件，將下面這行 CDN 複製至 HTML 檔案內的標籤 <body></body> 內

<script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>

2. 步驟二：建立約束條件

＊ 約束寫法

let constraints = {
  attribute : { 
     validator name : validator options 
    } 
}

constraints ( 約束名稱 )：自定義約束名稱來放約束的內容
attribute ( 屬性名稱 ) ：即要驗證的屬性。有一點要注意的是，屬性名稱為自己定義的，所以此屬性名稱要和欄位標籤的 name 屬性一樣，這樣才知道是哪個欄位要做驗證
validator name ( 驗證器名稱 ) 和 validator options ( 驗證項目 )：要去官方網址的頁籤【 Validators 】和【 Utilities 】找自己要做哪些約束，如: 必填、Email 格式、字數必須小於或大於幾位數…等約束

3. 步驟三：用 validate() 函式來驗證欄位值

＊ validate() 函式寫法

validate(attributes, constraints)

validate() 函式：這是套件已經寫好的函式，所以一定要用這個函式去驗證
constraints：就是步驟二用來放約束的內容的自定義約束名稱
attributes：放要驗證的物件或是 form 元素

以上，就大功告成囉！

如果上述還是很模糊的話，沒關係，直接看以下的範例應該會更好理解

【範例】

說明：針對「使用者名稱」這個欄位的輸入框做驗證，約束條件有兩個，分別是此欄位必填、和欄位值不可小於六個字元 PS: 輸入框欄位標籤的 name 要和約束屬性名稱一樣 ( e.g. 使用者名稱 )

程式碼：

<form action="">
  <label for="">使用者名稱</label>
  <input type="text" name="使用者名稱">
  <button>驗證我！</button>
</form>

// DOM 
const form = document.querySelector('form');
const button = document.querySelector('button');

// 建立約束條件
let constraints = {
  使用者名稱: {
    presence:{
      message: "必填"
    },
    length: {
	    minimum: 6,
      message: "最少要輸入 6 個字元"
    }
  }
}

// 用 validate() 函式來驗證欄位值
button.addEventListener('click',(e)=>{
  e.preventDefault();
  
  let errorMessage = validate(form , constraints);
  alert(errorMessage['使用者名稱']);
  console.log(errorMessage);
})

codepen：

剛好用這此的機會，把之前用原生 JS 做的表單驗證功能拿出來，再重做一次，並改用 Validate.js 套件來試試看，結果…真的是輕鬆很多呀！

參考：
https://validatejs.org/
https://shinyu0430.github.io/2022/01/09/validatejs/