实现elementUI表单的全局验证

使用ElementUi搭建框架的时候，你们应该都有考虑过怎么作全局验证，毕竟复制粘贴什么的是最烦了，这里分享下我的的解决方法。

验证规则

分析规则

通常验证规则，主要是是否必填，不为空，以及参数类型的验证。 基于这个条件，咱们开始找找思路, 单个字段的验证是这样的：

name: {
   required: 是否必填,
    validator: 自定义规则,
    message: 失败提示消息(非自定义时触发),
    trigger: 触发方式
}
复制代码

循环实现

固定的规则。当一个东西固定以后，那必然是能够重复使用的，而且能够快速生成，咱们能够用循环来实现它。 可是用循环来实现，咱们则须要一个数据规则。

定义数据规则

分析下须要的字段，大概就是如下几种，其余的能够根据自身的需求去增长：

• 验证的字段名 label
• 验证的值 value
• 验证的类型 type
• 是否必填 required
• 自定义规则 validator

那最终咱们获得的是这样一个字段配置列表:

fieldList: [
          {label: '帐号', value: 'account', type: 'input', required: true, validator: checkAccount},
          {label: '密码', value: 'password', type: 'password', required: true, validator: checkPwd},
          {label: '昵称', value: 'name', type: 'input', required: true},
          {label: '性别', value: 'sex', type: 'select', list: 'sexList', required: true},
          {label: '头像', value: 'avatar', type: 'slot', className: 'el-form-block'},
          {label: '手机号码', value: 'phone', type: 'input', validator: checkPhone},
          {label: '微信', value: 'wechat', type: 'input', validator: checkWechat},
          {label: 'QQ', value: 'qq', type: 'input', validator: checkQQ},
          {label: '邮箱', value: 'email', type: 'input', validator: checkEmail},
          {label: '描述', value: 'desc', type: 'textarea', className: 'el-form-block'},
          {label: '状态', value: 'status', type: 'select', list: 'statusList', required: true}
        ]
复制代码

form完整的字段配置建议参考：

formInfo: {
        ref: null,
        data: {
          id: '', // *惟一ID
          account: '', // *用户帐号
          password: '', // *用户密码
          name: '', // *用户昵称
          type: 2, // *用户类型: 0: 手机注册 1: 论坛注册 2: 管理平台添加
          sex: 0, // *性别: 0:男 1:女
          avatar: '', // 头像
          phone: '', // 手机号码
          wechat: '', // 微信
          qq: '', // qq
          email: '', // 邮箱
          desc: '', // 描述
          status: 1 // *状态: 0：停用，1：启用(默认为1)', // create_user: '', // 建立人 // create_time: '', // 建立时间 // update_user: '', // 修改人 // update_time: '' // 修改时间 }, fieldList: [ {label: '帐号', value: 'account', type: 'input', required: true, validator: checkAccount}, {label: '密码', value: 'password', type: 'password', required: true, validator: checkPwd}, {label: '昵称', value: 'name', type: 'input', required: true}, {label: '性别', value: 'sex', type: 'select', list: 'sexList', required: true}, {label: '头像', value: 'avatar', type: 'slot', className: 'el-form-block'}, {label: '手机号码', value: 'phone', type: 'input', validator: checkPhone}, {label: '微信', value: 'wechat', type: 'input', validator: checkWechat}, {label: 'QQ', value: 'qq', type: 'input', validator: checkQQ}, {label: '邮箱', value: 'email', type: 'input', validator: checkEmail}, {label: '描述', value: 'desc', type: 'textarea', className: 'el-form-block'}, {label: '状态', value: 'status', type: 'select', list: 'statusList', required: true} ], rules: {}, labelWidth: '120px' } 复制代码

实现验证方法

• 一: 循环字段列表，根据type判断是提示选择不能为空，仍是输入不能为空
• 二：若是字段必填，则根据是否有自定义验证去生成验证规则
• 三: 字段非必填，有自定义规则生成验证

export default (fieldList) => {
  const obj = {}
  // 循环字段列表
  for (const item of fieldList) {
    const type = item.type === 'select' ? '选择' : '输入'
    if (item.required) {
      if (item.validator) {
        obj[item.value] = {
          required: item.required,
          validator: item.validator,
          trigger: 'blur'
        }
      } else {
        obj[item.value] = {
          required: item.required,
          message: '请' + type + item.label,
          trigger: 'blur'
        }
      }
    } else if (item.validator) {
      obj[item.value] = {
        validator: item.validator,
        trigger: 'blur'
      }
    }
  }
  // formInfo.rules = obj
  return obj
}
复制代码

使用

结合上面的字段设计，我在页面上的使用是这样的，你们能够根据本身的字段设计去修改，大体实现过程是这样的, 将初始化规则挂在了全局，Vue.prototype.$initRules

// 初始化验证
    initRules () {
      const formInfo = this.formInfo
      formInfo.rules = this.$initRules(formInfo.fieldList)
    }
复制代码

怎么配置到全局

• 经过mixin配置，而后在页面中使用
• 配置为全局方法在页面中调用
• 挂在到vue实例上，经过this便可访问(以前使用的是mixin， 如今将方法挂在了this上)

最后

在项目的系统管理模块中能够看到示例代码：

项目地址

项目代码地址

若是没有本身的验证函数，这个或许能够帮到你:

从0开始，编写一个验证函数