Egg项目做请求字段验证-egg-validate-plus

开篇

近期在倒腾Github上一个已经开源的项目，其技术栈为egg+sequelize+mysql+react，最重要的是还有配套视频，是一个很好的全栈练习，下面也给大家分享一下。

Instagram 开源项目 ts版

作者：zhoushaw

项目介绍：地址

开源代码：代码

Instagram 开源项目 js版

作者：旅梦开发团

项目介绍内附视频地址：地址

开源代码：代码

好吧还没有进入今天的主题

egg-validate-plus

该插件是为前端请求字段做验证用的，那么为什么要用它呢，这里展示一下插件作者文档里的说明

• 为什么要自己造轮子？ 其实 egg 官方有一个egg-validate插件，非常的优秀。但是我觉得有几个不满意的地方：

  • 不能使用自定义错误提示

  • 类型校验兼容性差

  • 非必填校验兼容性差

• 提供哪些更好的体验？

  • 使用自定义错误提示

  • 提供更多的类型校验

  • 兼容更多非必填校验场景

具体的安装配置文档这里不再详细说明（见文档），这里只为常用的使用方法做一个较全面的展示，也算是一个例子吧。

安装配置请参照文档

rules中规则的编写，参见 async-validator中验证规则的编写

代码组织结构

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

添加signIn.js规则

'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: '密码最少包含一个大小写字母、数字并且为8-16位' }); // 验证不通过
      },
    },
  ],
};

module.exports = rule;

controller中login.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 }); // 第一个参数对应于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,
    };
  },
};

结尾

后期把自己仿的项目也会放上来，采用技术栈为

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

egg-react-instagram
其中七牛云域名已过期