Vue自定义校验 callback ()简单使用

我这里做了一个日期不能为空的自定义验证，注意的是：

callback ()，错误提示写在callback (new Error())里面，校验通过，则直接调用callback (),不明白的可以看代码里注释的地方。

prop表示哪些字段使用校验规则，这个属性必须是表单的model属性绑定的数据对象的属性，（比如params要校验的是range字段,那么prop名称一定是range）。

<Form :label-width="100" :rules="ruleValidate" :model="params">
         <FormItem label="时间："  prop="range">
              <DatePicker v-model="params.range"
                          type="datetimerange" format="yyyy-MM-dd"
                          style="width: 245px">
              </DatePicker>
         </FormItem>
</Form>

 export default {
   data() {
   const validateTime = (rule, value, callback) => {
  if (value.filter(item => item).length < 2) {
    callback(new Error('时间不能为空！'));
  } else {
    callback();
  }
  // function callback(error) {
  //   if (error) {
  //     console.error(error.message);
  //   } else {
  //     console.log('校验通过');
  //   }
  // }
};
  return {
    params: {
    range: [],
  },
  ruleValidate: {
    time: [
      { required: true, validator: validateTime, trigger: 'change' },
    ],
  }, 
   }
  }
 }
 

如果不是自定义校验，可以将ruleValidate改成：

 ruleValidate: {
      time: [
      {required: true, message: "时间不能为空！", trigger: 'change'},
      ],
    }, 

required：表示是否输入值，如为true，表示必须输入值，如为false，表示可为空。

message：提示消息，在校验不通过时提示此消息。

trigger：触发方式，取值为blur/change，blue表示失去焦点，一般在input组件中使用；change为值改变，一般在选择框中使用。