表单验证输入框必填校验，输入框中存在值时，校验的提示还一直展示，校验如果有值则是必填项，并且输入的值是正确的；如果没有值，不校验

表单验证必填时触发方式：trigger: ‘change‘和trigger: ‘blur‘区别

change表示：绑定值被改变时触发

blur表示：在组件 Input 失去焦点时触发

在表单校验中存在两个关联的属性值

如下图gif所示

进入表单时，开始日期和结束日期都不是必填的属性，如果“开始日期”、“结束日期”的其中一个有值了，那么这两个属性都必须要有值，并且“开始日期”的时间不能大于“结束日期”，否则提示开始日期不能小于“结束日期”。如果两个输框中都没值，那么不提示校验信息，允许正常提交

直接上代码：

在选择日期的输入框中添加change事件，

注意：这个事件主要是控制输入框下的校验信息是否提示

<el-form-item label="起始日期:" prop="contract.startTime">
     <el-date-picker class="datePicker" v-model="contractForm.contract.startTime" type="date"
          value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" @change="inputTime(1)">
     </el-date-picker>
</el-form-item>
<el-form-item label="截止日期:" prop="contract.endTime">
     <el-date-picker class="datePicker" v-model="contractForm.contract.endTime" type="date" value-format="yyyy-MM-dd"
          format="yyyy-MM-dd" placeholder="选择日期" @change="inputTime(2)">
     </el-date-picker>
</el-form-item>

定义两个自定义校验方法

    const validateStartTime = (rule, value, callback) => {
        let startTime = new Date(this.contractForm.contract.startTime).getTime();
        let endTime = new Date(this.contractForm.contract.endTime).getTime();
        if (!value && endTime) {
          return callback(new Error("起始日期不能为空"));
        } 
        callback();
      };

      const validateTime = (rule, value, callback) => {
        let startTime = new Date(this.contractForm.contract.startTime).getTime();
        let endTime = new Date(this.contractForm.contract.endTime).getTime();
        if (!value && startTime) {
          return callback(new Error("截止日期不能为空"));
        }
        if (startTime && endTime && (startTime > endTime)) {
          return callback(new Error("截止日期不能小于起始日期"));
        }
        callback();
      };

rules中添加自定义的校验方法

     //校验
      rules: {
       'contract.startTime': [
          {
            required: false,
            trigger: ["blur", "change"],
            validator: validateStartTime,
          },
        ],
        'contract.endTime': [
          {
            required: false,
            trigger: ["blur", "change"],
            validator: validateTime,
          },
        ],
      },

change事件触发校验

    //change事件触发校验
    inputTime(type) {
      // 如果是开始时间，则校验“结束时间”是否有值
      if(type==1){
        this.$refs.contractForm.validateField("contract.endTime")
      } 

      // 如果是结束时间，则校验“开始时间”是否有值
      if(type==2) {
        this.$refs.contractForm.validateField("contract.startTime")
      }
    },

注意validateField方法：该方法用于校验指定的属性名称this.$refs.contractForm.validateField("contract.startTime")

contractForm：是el-form标签上ref所引用的值

如果发现问题，也希望大家多多指正，一起upup

更多校验方法查看Element-UI官网Element - The world's most popular Vue UI framework