# 🏅 Day 29 - validator 驗證

可以使用 [validator](https://www.npmjs.com/package/validator) 驗證表單資料

以下介紹幾個方法，詳細可再參考[文件說明](https://www.npmjs.com/package/validator#validators)查看所有可使用的方法

#### 驗證是否為信箱
`validator.isEmail()`

console.log(validator.isEmail('[e-mail]')); // true
console.log(validator.isEmail('123'));         // false

#### 驗證長度
`validator.isLength()`

// 驗證字串長度是否至少有 3 碼以上
console.log(validator.isLength('12345', { min: 3 }));  // true

// 驗證字串長度是否最多 6 碼
console.log(validator.isLength('1234567', { max: 6 }));  // false

### 參考資源

- [validator 方法](https://github.com/validatorjs/validator.js#validators)

題目
---
參考最終作業設計稿「註冊（錯誤訊息）」頁面，使用 validator 加入自訂的驗證，讓使用者註冊帳號時，可以先驗證資料確保符合正確格式

依照註解加入下方驗證資料格式需求，並搭配 `appError()` 自訂錯誤訊息，調整程式碼 `...` 的部分

`routes/users.js`

router.post('/sign_up', handleErrorAsync(async (req, res, next) => {
  let { name, email, password } = req.body;
  
  // 加入驗證，確保使用者註冊資料符合格式
  // 三個欄位皆必填
  if (!name || !email || !password) {
    return next(appError(400, '請確保所有欄位皆填寫', next));
  }
  
  // 暱稱 name 長度需至少 2 個字元以上
  ...
  
  // 信箱 email 格式正確
  ...
  
  // 密碼 password 長度至少 8 碼以上
  ...
  
  const newUser = await User.create({
    email,
    password,
    name
  });
  
  res.status(200).json({
    status: 'success',
    data: newUser
  });
  
}));

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

router.post('/sign_up', handleErrorAsync(async (req, res, next) => {
  let { name, email, password } = req.body;

  // 加入驗證，確保使用者註冊資料符合格式
  // 三個欄位皆必填
  if (!name || !email || !password) {
    return next(appError(400, '請確保所有欄位皆填寫', next));
  }

  // 暱稱 name 長度需至少 2 個字元以上
  if (!validator.isLength(name, { min: 2 })) {
    return next(appError(400, '暱稱需至少 2 個字元以上', next));
  }
  
  // 信箱 email 格式正確
  if (!validator.isEmail(email)) {
    return next(appError(400, 'Email 格式錯誤', next));
  }
  
  // 密碼 password 長度至少 8 碼以上
  if (!validator.isLength(password, { min: 8 })) {
    return next(appError(400, '密碼需至少 8 碼以上', next));
  }
  
  const newUser = await User.create({
    email,
    password,
    name
  });

  res.status(200).json({
    status: 'success',
    data: newUser
  });

}));

-->

回報區
---
<!--
將答案貼至下方表格內，格式：
| Discord 暱稱 | [CodePen](連結) |
-->

| Discord | CodePen ／ 答案 |
|:-------------:|:-----------------:|
| Tau | [CodePen](https://codepen.io/Tau-Hsu/pen/NPWxoyq?editors=0010) |
| bian_yang_mofa | [CodePen](https://codepen.io/cssf998811/pen/VYweRwO?editors=0010) |
| poyi | [CodePen](https://codepen.io/poyi-the-flexboxer/pen/bNGEyLN?editors=1010) |
| adengg | [CodePen](https://codepen.io/Osases/pen/MYWyWRP?editors=0010) |
|janetlai|[CodePen](https://codepen.io/eiddkqxz-the-builder/pen/VYwaWvN)|
|helena|[CodePen](https://codepen.io/helena27/pen/mydPMQX)|
|daffytseng|[CodePen](https://codepen.io/Daffy-Tseng/pen/GgRZQOP)|
|hannahpun|[CodePen](https://codepen.io/hannahpun/pen/qEBNrQZ)|
|JC|[CodePen](https://codepen.io/lifetimingwhisper/pen/XJWjayw)|
|HarryKuo|[CodePen](https://codepen.io/harry_kuo/pen/wBvoqMG?editors=0010)|
|sui_hsilan|[CodePen](https://codepen.io/suihsilan/pen/NPWpqZB?editors=0010)|
|ZoeKang|[CodePen](https://codepen.io/byehywmx-the-animator/pen/ByaZXpO?editors=0010)|
| hsin yu |[CodePen](https://codepen.io/tina2793778/pen/yyLoLYK)|