Egg項目做請求字段驗證-egg-validate-plus

開篇

近期在倒騰Github上一個已經(jīng)開源的項目，其技術(shù)棧為egg+sequelize+mysql+react，最重要的是還有配套視頻，是一個很好的全棧練習(xí)，下面也給大家分享一下。愛掏網(wǎng) - it200.com

Instagram 開源項目 ts版

作者：zhoushaw

項目介紹：地址

開源代碼：代碼

Instagram 開源項目 js版

作者：旅夢開發(fā)團

項目介紹內(nèi)附視頻地址：地址

開源代碼：代碼

好吧還沒有進入今天的主題

egg-validate-plus

該插件是為前端請求字段做驗證用的，那么為什么要用它呢，這里展示一下插件作者文檔里的說明

• 為什么要自己造輪子？ 其實 egg 官方有一個egg-validate插件，非常的優(yōu)秀。愛掏網(wǎng) - it200.com但是我覺得有幾個不滿意的地方：
  • 不能使用自定義錯誤提示
  • 類型校驗兼容性差
  • 非必填校驗兼容性差
• 提供哪些更好的體驗？
  • 使用自定義錯誤提示
  • 提供更多的類型校驗
  • 兼容更多非必填校驗場景

具體的安裝配置文檔這里不再詳細說明（見文檔），這里只為常用的使用方法做一個較全面的展示，也算是一個例子吧。愛掏網(wǎng) - it200.com

?安裝配置請參照文檔

rules中規(guī)則的編寫，參見 async-validator中驗證規(guī)則的編寫

?代碼組織結(jié)構(gòu)

--app
----controller
------login.js
----rules
------login
--------signIn.js

添加signIn.js規(guī)則

'use strict';

const rule = {
  email: [
    { required: true, message: '郵箱不能為空' },
    { type: 'email', message: '郵箱格式不正確' },
  ],
  password: [
    { required: true, message: '密碼不能為空' },
    { type: 'string', message: '密碼字段需要是字符串' },
    {
      // eslint-disable-next-line no-unused-vars
      validator(rule, value, callback, source, options) {
        const pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
        if (pattern.test(value)) {
          callback(); // 驗證通過
          return;
        }
        callback({ message: '密碼最少包含一個大小寫字母、數(shù)字并且為8-16位' }); // 驗證不通過
      },
    },
  ],
};

module.exports = rule;

?controller中l(wèi)ogin.js使用

'use strict';

const Controller = require('egg').Controller;

class LoginController extends Controller {
  async loginIn() {
    const { ctx, app } = this;
    const { email, password } = ctx.request.body;

    const validateResult = await ctx.validate('login.signIn', { email, password }); // 第一個參數(shù)對應(yīng)于rules目錄下目錄或文件
    if (!validateResult) {
      return;
    }

    const loginInfo = await ctx.service.user.login({ password, email });
    // 省略部分代碼
    ctx.returnBody(200, '登錄成功', loginInfo.userId); // returnBody方法是基于context的擴展
  }
}

module.exports = LoginController;

context.js擴展

'use strict';

module.exports = {
  returnBody(status, message, data = null) {
    this.status = status;
    this.body = {
      message,
      data,
      flag: true,
    };
  },
};

結(jié)尾

后期把自己仿的項目也會放上來，采用技術(shù)棧為

create-react-app + less + mobx + flyio + egg + sequelize + mysql