如何快速在一个系统的所有页面添加表单验证？

最近忙于实现一个主打查询功能的单页面后台管理系统，其中有二十多个页面有共有的查询条件以及表单验证，这些表单验证有数字验证、车牌验证、拦截特殊字符验证等。

实现步骤如下：
1、首先建立一个mixin.js文件
（1） 在文件中声明queryParam对象，并列举出这二十几个页面涉及的属性值。因为属性值共享，会出现冗余且为空的属性值，可以采用filterObj(param)方法:

export const filterObj = obj => {
  if (!(typeof obj === 'object')) {
    return
  }
  for (var key in obj) {
    if (obj.hasOwnProperty(key) && (obj[key] == null || obj[key] === undefined || obj[key] === '')) {
      delete obj[key]
    }
  }
  return obj
}

值得注意的是，queryParam的声明需要列举出所有的对象属性，否则容易出现重置后无法输入，或者输入互相干预的现象。

（2）声明rules: { userId: [{ validator: this.validateNumber, trigger: ‘blur’ }] } 对象
（3）在methods方法中，增加：

validateNumber(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        var number = /^[0-9]+$/g
        if (!(number.test(value))) {
          callback(new Error('该项必须为数字类型'))
        } else {
          callback()
        }
      }
    },

2、在需要表单验证的页面引入mixins文件，并声明mixins:[mixins]
在每个页面中只需要在el-form表单中加入 ref=“queryParam” :model=“queryParam” :rules=“rules”
以及需要验证的表单项加入，prop属性，即可实现页面的表单验证。