form表单的全局验证

elementUI表单的全局验证：

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

分析问题：

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

name: {
   required: 是否必填,
    validator: 自定义规则,
    message: 失败提示消息(非自定义时触发),
    trigger: 触发方式
    pattern: 校验的规则（正则）
    }

• 固定的规则。当一个东西固定之后，那必然是可以重复使用的，并且可以快速生成，我们可以用循环来实现它。 但是用循环来实现，我们则需要一个数据规则。
• 那最终我们得到的是定义以上数据规则
• 刚好我们封装的form表单规则相符无需重复定义（请查看《form表单API》）

代码：

/**
 * 全局form表单校验
 * @fieldList   要渲染form表单数据
 * @fieldList.label   验证的字段名
 * @fieldList.value   验证的值
 * @fieldList.type   验证的类型
 * @fieldList.required   是否必填
 * @fieldList.validator   自定义规则
 * @fieldList.pattern   正则验证
 * */

export function initRules (fieldList) {
  const obj = {};
  // 循环字段列表
  for (const item of fieldList) {
    // 定义输出的内容
    const type = item.type === 'select' || item.type === 'radio' || item.type === 'checked' || item.type === 'time' || item.type === 'date' ? '选择' : item.type === 'tag' ? '添加' : '输入';
    // 定义校验条件
    const ifType = item.type === 'select' || item.type === 'checked' || item.type === 'radio' || item.type === 'inputNumber' || item.type === 'time' || item.type === 'date' ? 'change' : 'blur';
    // 是否必填
    if (item.required) {
      if (item.validator) {
        obj[item.value] = {
          required: item.required,
          validator: item.validator,
          trigger: ifType
        }
      } else {
        obj[item.value] = []
        if(item.pattern){
          obj[item.value].push(
            { required: item.required, message: '请' + type + item.label, trigger: ifType},
            { pattern: item.pattern, message: item.message?item.message:'请' + type + '正确的' + item.label, trigger: ifType}
          )
        }else {
          obj[item.value].push({ required: item.required, message: '请' + type + item.label, trigger: ifType})
        }

      }
    }// 不是必填（是否自定义校验）
    else if (item.validator) {
      obj[item.value] = {
        validator: item.validator,
        trigger: ifType
      }
    }
  }
  return obj
}

• main.js

// 引入并注册在全局使用
import {initRules} from './util'
Vue.prototype.$initRules = initRules;

• 初始化验证（注意：要在创建前使用 created（））

  methods: {
  // 初始化验证
  	initRules () {
      const formInfo = this.formInfo
      formInfo.rules = this.$initRules(formInfo.fieldList)
    }
  }
    created() {
      this.initRules()
    },