# Validate.js 表單驗證套件

###### tags: `javascript` `Validate.js` `表單驗證` `js套件`

## [Validate.js](https://validatejs.org/#validate-js) 介紹
### 載入 CDN：

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

### Constraints （約束條件）：

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

### 官網範例：
* [範例樣式](https://validatejs.org/examples.html)

var constraints = {
  username: {
    presence: true,
    exclusion: {
      within: ["nicklas"],
      message: "'%{value}' is not allowed"
    }
  },
  password: {
    presence: true,
    length: {
      minimum: 6,
      message: "must be at least 6 characters"
    }
  }
};

validate({password: "bad"}, constraints);
// => {
//   "username": ["Username can't be blank"],
//   "password": ["Password must be at least 6 characters"]
// }

* validate function

validate(attributes, constraints, [options])

## 小練習（[CodePen 連結](https://codepen.io/Zoechiueh/pen/BawzOYw?editors=0010)）
### 寫法一
* validate(); 執行，直接帶入物件參數（缺點是參數多會很大坨）

<form id="myForm">
    <input type="text" class="username" name="username">
    <input type="password" name="password">
</form>

var constraints = {
  username: {
    presence: true,
    exclusion: {
      within: ["nicklas"],
      message: "'%{value}' is not allowed"
    }
  },
  password: {
    presence: true,
    length: {
      minimum: 6,
      message: "must be at least 6 characters"
    }
  }
};

// validate(); 執行
// 回傳錯誤訊息
const errors = validate({password: "bad333", username:"123"}, constraints);
console.log(errors);

### 寫法二
* 綁元素的 DOM，去取得 name 名稱

<form id="myForm">
    <input type="text" class="username" name="username">
    <input type="password" name="password">
</form>

const form = document.querySelector('#myForm');

const constraints = {
  usename: {
    presence: true,
  },
  password: {
    presence: true,  
  }
}

const errors = validate(form, constraints);
console.log(errors);

### 改成中文呈現的寫法：
* 元素 DOM 的 name，也要改成 attribute 對應的中文

<form id="myForm">
    <input type="text" class="username" name="使用者名稱">
    <input type="password" name="使用者密碼">
</form>

const form = document.querySelector('#myForm');

const constraints = {
  "使用者名稱": {
    presence: {
      message: "必填"
    }
  },
  "使用者密碼": {
    presence: {
      message: "必填"
    }
  }
}
const errors = validate(form, constraints);
console.log(errors);

## 常使用的 Validators
* email 信箱
* length 長度（名稱最多幾個字、密碼最多或最少幾個字）
* numericality 數量（大於0 小於10)
* presence 必填
* url 網址 （連結、圖片）

## 實作範例
* [助教範例](https://codepen.io/AliceChiang/pen/MWbBzKo?editors=1011)
* [中文寫法](https://codepen.io/Zoechiueh/pen/GRMjpNe?editors=1010)