注册时自动验证是否存在重名

思路：在用户输入昵称之后，输入框失去焦点时，前端自动发送一个验证请求，在后端查询数据库，将值返回给前端，前端处理后反馈给用户

实现：本文中使用到了element、koa和mongoose

一，使用element编写注册组件结构

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="ruleForm">
      <el-form-item prop="name">
          <el-input v-model="ruleForm.name" placeholder="你的昵称">
              <i slot="prefix" class="el-icon-edit el-input__icon"></i>
          </el-input>
      </el-form-item>
  </el-form>

在el-form元素中，使用model与data进行双向绑定，使用rules进行数据验证，ref类似于dom中的id，可以使用vue的this.refs[refName]方法获取vue虚拟dom，都是固定写法，缺一不可。

子元素el-form-item中使用prop将自己与ruleForm映射，使得它的子节点el-input 可以使用双向绑定，将值传递给rules。

二，在data中编写验证函数

  data() {
        const checkRepeat = async (rule, value, callback) => {
            let {
                status,
                data: { code, msg }
            } = await this.$axios.get(`/user/checkRepeat?name=${value}`);
            if (code == 2000) {
                callback();
            } else {
                callback(new Error(msg));
            }
        };
        return {
            ruleForm: {
                name: ''
            },
            rules: {
              name: [
                 { required: true, message: '请输入昵称', trigger: 'blur' },
                 { min: 1, max: 7, message: '长度为1-7字符', trigger: 'blur' },
                 { validator: checkRepeat, trigger: 'blur' }
               ]
            }
        };
    }

首先看rules项，他是element表单组件的默认验证方法，按照从上至下的顺序执行验证，具体解释如下：

  /*为必填项，若为空显示错误 '请输入昵称'，触发时机为输入框失去焦点*/
  { required: true, message: '请输入昵称', trigger: 'blur' },

  /*长度为1-7个字符，若超出显示错误 '长度为1-7字符'，触发时机为输入框失去焦点*/
  { min: 1, max: 7, message: '长度为1-7字符', trigger: 'blur' },

   /*使用自定义验证策略checkRepeat，触发时机为输入框失去焦点*/
  { validator: checkRepeat, trigger: 'blur' }

这里checkRepeat 是个异步函数，他通过axios向后端koa中间件请求checkRepeat函数，参数值为name，请求成功回调为空，失败则显示错误，这里的value就是ruleForm.name的值，在上文中我们通过prop将ruleForm.name与rules.name.value进行了绑定。

三、在koa中编写路由中间件

let Users = require('../model/Users') //获取mongoose中定义的model
let router = new Router({ prefix: "/user" }) //添加路由前缀

router.get('/checkRepeat', async (ctx) => {
    let { name } = ctx.request.query //获取前端传来的参数值name
    let user = await Users.findOne({ name }) //使用mongoose进行数据库查询
    if (user) {  //如果存在用户，则返回4003错误
        ctx.body = {
            code: 4003,
            msg: "昵称" + name + "已被使用"
        }
    } else {  //如果不存在用户，则返回2000，表示可以注册
        ctx.body = {
            code: 2000,
            msg: "ok"
        }
    }
})

这时在前端checkRepeat 函数中，通过判断返回的code值，就可以对错误值进行自动处理

    const checkRepeat = async (rule, value, callback) => {
            let {
                status,
                data: { code, msg }
            } = await this.$axios.get(`/user/checkRepeat?name=${value}`);
            if (code == 2000) {
                callback();
            } else {
                //在callback前，可在此处将错误信息推送至页面
                callback(new Error(msg));
            }
        };

注册时自动验证是否存在重名功能完成