validate.js 是一個方便用於表單驗證的 JavaScript 函式庫，透過 validate.js 你可以更簡單且完整的處理表單驗證的問題，那就來介紹吧！

安裝

瀏覽器 / CDN

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

npm / node.js

$ npm install --save validate.js

var validate = require("validate.js");

更多安裝方式可以參考：https://validatejs.org/#installing

格式

在 validate.js 中驗證的語法格式基本上是如同下面這樣的格式寫法：

<attribute>: {
  <validator name>: <validator options>
}

這邊舉一個例子，舉例：

email: {
  presence: true, // Email 是必填欄位
  email: true // 需要符合 Email 格式
},

attribute

<attribute> 的部分會對應 input 的 name 來設置，舉例：

<input id="email" class="form-control" type="email" placeholder="Email" name="email">

這邊的 name 是 email，那對應驗證的 attribute 就是 email。

validator name

可以被驗證的種類基本上會分為幾個類別，其中一個最常用的驗證為決定欄位是否為必填：

presence: true

date

確認是否為有效的日期格式，會使用到的參數只有 dateOnly: true 這個，可以和 datetime 共同設定使用。

datetime

除了和 date 一樣會驗證是否為有效的日期格式，latest 則是結合前一篇介紹的 moment.js 來計算輸入的日期是否滿 18 歲，如果沒有滿 18 歲則會出現錯誤訊息：

"birthDate": {
  datetime: {
    dateOnly: true,
    latest: moment.utc().subtract(18, 'years'),
    message: "^You need to be atleast 18 years old"
  }
}

Email

驗證 email 格式是否為正確的。

"Email": {
  email: true,
}

Equality

可用於驗證一個屬性是否等於另一個屬性。常用在確認密碼的時候。只需要使用其名稱作為驗證程序的選項或通過給出選項屬性來指定是哪個屬性要驗證。

"confirm-password": {  
  equality: {
    attribute: "password", // 要比對的屬性 
    message: "^The passwords does not match", 
  }
}

Exclusion

對於要限制某些值時可以使用，它會檢查選項的值是否有不包含在 whthin 陣列中，類似黑名單的概念，只要在 exclusion 的 within 中都會驗證失敗。

"country": {
  exclusion: {
    within: ["SE"],
    message: "^Sorry, this service is for Sweden only",
  }
},

Inclusion

對於要限制某些值時可以使用，它會檢查選項的值是否有包含在 whthin 陣列中，包含在 whthin 中才可以通過驗證。

"country": {
  inclusion: {
    within: ["SE"],
    message: "^Sorry, this service is for Sweden only",
  }
},

Format

驗證輸入值的格式，pattern 設定主要都是填寫正規表示式，而 flags 是指要比對的方式，例如：

• g：全域比對
• i：忽略大小寫

"username": {
  format: {
    pattern: "[a-z0-9]+", // 只能包含數字或英文字
    flags: "i", // 忽略大小寫
    message: "can only contain a-z and 0-9",
  }
},

Length

規定輸入值長度，通常會是規定密碼必須大於多少個字

"password": {
  length: {
    minimum: 5, // 輸入值不能短於此值
    maximum: 20, // 輸入值不能長於此值
  }
},

Numericality

設定只能填入數字，不能填入其他型態的內容，例如：有幾個小孩

numericality: {
  onlyInteger: true, // 只能是整數
  greaterThanOrEqualTo: 0, // 只能大於等於零
}

URL

設定網址是否能填入本地端網域

"website": {
  url: {
    allowLocal: true,
  }
}

以上就是 validate.js 提供驗證的參數，透過這些參數就可以簡單又快速的驗證表單

Utilities

除了針對類別的驗證，對於一些基本又實用的設定也可以透過 validate.js 來驗證，這邊就舉幾個例子來說明一下：

contains

validate.contains(collection, value)

確認輸入值是否包含在陣列中，舉例：

validate.contains({}, "foo");// => false
validate.contains({foo: "bar"}, "foo");// => true
validate.contains([1, 2, 3], 4);// => false
validate.contains([1, 2, 3], 3);// => true

isBoolean

validate.isBoolean(value)

確認輸入值是否為布林值

validate.isBoolean("true");// => false
validate.isBoolean(true);// => true

isDate

validate.isDate(value)

確認輸入值是否為日期格式

validate.isDate(new Date());// => true
validate.isDate(null);// => false
validate.isDate({});// => false

isEmpty

validate.isEmpty(value)

確認輸入值是否為空值，舉例如下：

validate.isEmpty({});// => true
validate.isEmpty(null);// => true
validate.isEmpty("");// => true
validate.isEmpty("   ");// => true
validate.isEmpty("foo");// => false
validate.isEmpty({foo: "bar"});// => false

更多實用參數可以看這邊：https://validatejs.org/#utilities

驗證功能

了解可以設定的參數以後，就可以了解一下 validate.js 的驗證模式，分為：Async validation、Single value validation、Nested validation、Default options、Error formatting，這邊就講兩個例子： Single value validation、Nested validation

Single value validation：單值驗證

有時候只想針對表單中的某些單一值來驗證，可以簡寫成：

validate.single("foo", {presence: true, email: true});
// => ["is not a valid email"]

Nested validation：巢狀驗證

通常驗證輸入時，不見得只會用單一種驗證類型，這時候就可以使用巢狀驗證，舉例：

var constraints = {
  "addresses.shipping": {
    presence: true
  },
  "addresses.shipping.street": {
    format: {
      // Must be numbers followed by a name
      pattern: "^[0-9]+ .+$",
      message: "^The street for the shipping address must be a valid street name"
    }
  }
};

validate({}, constraints);
// => {"addresses.shipping": ["Addresses shipping can't be blank"]}

更多驗證功能：https://validatejs.org/#validate

最後來做個例子：

用 validate.js 就可以快速的做出表單驗證。程式碼：https://codepen.io/TzuHui/pen/aQNPga

現在多數的網站都會需要登入或是註冊，也就是說現在在表單驗證這一塊的實作已經越來越多，因此學會表單驗證在做網頁時也是很重要的一環，然而現在表單驗證的函式庫越來越多，類似功能的還有 Validator.js、Valid.js 等等，大家也可以來練習看看。