前言

validator用于做复杂的验证，当其他简单的验证规则无法满足要求时，就要用到这个方法了。

官方网站：https://github.com/yiminghe/async-validator

NPMJS.COM：https://www.npmjs.com/package/async-validator

注意：Element UI使用的async-validator版本非常低，并没有asyncValidator函数，不过validator函数也足够用了。

参数

validator的参数有：(rule, value, callback, source, options)，前三个比较重要。

• rule：指向该条规则对象。

• value：新的值，用于参与运算、对比。

• callback：执行回调，使用方法是：callback('...');。

  • 如果不传参：表示验证通过，一般不必专门强调。

  • 如果传入值：字符串会作为错误提示，但是显示优先级低于外层的message。比如callback('嘻嘻嘻');跟message: '哈哈哈'同时存在，则会提示哈哈哈。

• source：是一个对象，结构类似{completionTime: "2020-08-09"}，也就是键值对。因为跟value的值一致，所以source可以不用。

• options：额外配置项

  • first {Boolean值}：true则表示第一个未通过校验的字段发生错误就调用 callback，即不再继续校验剩余字段

  • firstFields {Boolean/StringArray值}：多条校验规则的配置

    • Boolean：每个字段的第一个规则发生错误就调用 callback，即不再继续校验该字段的剩余规则

    • StringArray：指定字段的第一个规则发生错误就调用 callback

  • suppressWarning {Boolean}：是否禁止无效值的内部警告

案例1

现在有2个输入框，前一个是“开工时间”，后一个是“完工时间”，完工时间应晚于开工时间。

        startTime: [
          { required: true, message: "开工时间不能为空", trigger: "blur" },
          { type: 'date', validator: (rule, value, callback, source, options) => {
            if (new Date(value).getTime() >= new Date(this.form.completionTime).getTime()) {
              callback('');
            }
          }, message: "开工时间应早于竣工时间", trigger: "blur" },
        ],
        completionTime: [
          { required: true, message: "竣工时间不能为空", trigger: "blur" },
          { type: 'date', validator: (rule, value, callback, source, options) => {
            if (new Date(value).getTime() <= new Date(this.form.startTime).getTime()) {
              callback('');
            }
          }, message: "竣工时间应晚于开工时间", trigger: "blur" },
        ],

案例2

现在我进一步要求，如果开工时间等于竣工时间，则提示“开工时间与竣工时间不能同一天”。

这个案例用于展示多个回调，此时应该删除message：

        startTime: [
          { required: true, message: "开工时间不能为空", trigger: "blur" },
          { type: 'date', validator: (rule, value, callback, source, options) => {
            if (new Date(value).getTime() > new Date(this.form.completionTime).getTime()) {
              callback('开工时间应早于竣工时间');
            } else if (new Date(value).getTime() === new Date(this.form.completionTime).getTime()) {
              callback('开工时间与竣工时间不能同一天');
            }
          }, trigger: "blur" },
        ],
        completionTime: [
          { required: true, message: "竣工时间不能为空", trigger: "blur" },
          { type: 'date', validator: (rule, value, callback, source, options) => {
            if (new Date(value).getTime() < new Date(this.form.startTime).getTime()) {
              callback('竣工时间应晚于开工时间');
            } else if (new Date(value).getTime() === new Date(this.form.completionTime).getTime()) {
              callback('开工时间与竣工时间不能同一天');
            }
          }, trigger: "blur" },
        ],

案例3

这次考虑Promises异步。如果返回一个Promise对象，则其中必须有reject或callback抛出错误值，才会在界面上报错：

        completionTime: [
          { required: true, message: "竣工时间不能为空", trigger: "blur" },
          { required: true, 
            validator: (rule, value, callback) => {
              return new Promise((resolve, reject) => {
                setTimeout(() => {
                  reject('test'); // 或者写 callback('test') 也可以实现报错
                }, 2000);
              });
            },
            trigger: "blur"
          },
        ],

案例4

这次考虑非Promises异步。比如就一个setTimeout，此种情况必须用callback抛出错误：

        completionTime: [
          { required: true, message: "竣工时间不能为空", trigger: "blur" },
          { required: true, 
            validator: (rule, value, callback) => {
              setTimeout(() => {
                callback('test');
              }, 2000);
            },
            trigger: "blur"
          },
        ],

案例5

有楼号、房间号，房间号必须以楼号开头，中间必须有0。

        floor: [
          { required: true, message: '楼层不能为空', trigger: 'blur' },
          { validator: (rule, value, callback, source, options) => {
            if (value[0] === '0') {
              callback('首位不得为0');
            } else if (value > 99) {
              callback('楼层不得超过99');
            } else if (this.form.roomNumber && !new RegExp('^' + value).test(this.form.roomNumber)) {
              callback('房间号前需加楼层，例如：' + value + '02');
            } else {
              callback();
            }

          }, trigger: "blur" },
        ],
        roomNumber: [
          { required: true, message: '房间号不能为空', trigger: 'blur' },
          { validator: (rule, value, callback, source, options) => {
            if (!this.form.floor) {
              callback('请先填写楼层');
            } else if (value.length > 4) {
              callback('房间号最多4位');
            } else if (!new RegExp('^' + this.form.floor).test(value)) {
              callback('房间号前需加楼层，例如：' + this.form.floor + '02');
            } else if (value.slice(-2, -1)[0] !== '0') {
              callback('房间号倒数第二位需是0，例如：' + this.form.floor + '02');
            } else {
              callback();
            }
          }, trigger: "blur" },
        ]