技術標籤：Vue前端vue.js

  <el-form
      ref="form"
      :model="form"
      size="medium"
      label-width="120px"
      :rules="rules"
    >
     <el-form-item label="業務起止日期" prop="selectDate">
        <el-date-picker
 

           v-model="form.selectDate"
           type="daterange"
           range-separator="至"
           start-placeholder="開始日期"
           end-placeholder="結束日期"
         >
         </el-date-picker>
       </el-form-item>
       <
 
el-form-item>
            <el-button
              type="cyan"
              icon="el-icon-search"
              @click="handleQuery('form')"
              >搜尋</el-button
            >
            <el-button icon="el-icon-refresh" @click="
 
resetForm('form')"
              >重置</el-button
            >
           
          </el-form-item>
     </el-form>

export default {
  name: "AccountFlow",
  components: {},
  data() {
   return {
	form: {
       selectDate: "",
     },
     rules: {
        selectDate: [
          { required: true, message: '請選擇日期', trigger: "change" },
        ],
      },
    }
   }
  methods:{
    handleQuery(formName) {
      // console.log(this.currentPage);
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          console.log(this.form);
        } else {
          console.log("error submit!!");
          console.log(this.form);
          return false;
        }
      });
    },
    /** 重置按鈕操作 */
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  }
}

第一次查詢，校驗規則能攔截，是正常的，重置之後，再點選查詢，校驗規則失效了，此時控制檯打印出來的valid竟然還是true！！！what？我重置以後，不應該是false嗎？
查了全網的資料，基本都是說prop中的欄位和data中表單物件中的欄位一致云云，自查了一遍沒毛病啊，還是報錯，我這個無語。別慌，我仔細列印了重置前和重置後的selectDate，原來我重置前，selectDate是空串，選擇後是個長度為2的陣列，如圖
等我重置以後，selectDate偷天換日了！！！！罪證如下：

看來element的校驗還是有點不完善啊。無奈之下，自己校驗吧

 data() {
 	var validateDate = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("請選擇時間範圍"));
      } else if(value.length == 1 && !value[0]){
         callback(new Error("請選擇正確的時間範圍"));
      }else{
        callback();
      }
    };
   return {
	form: {
       selectDate: "",
     },
    rules: {
    	selectDate: [
	       { validator: validateDate, trigger: "change" },
		  ],
	   },
    }
   }

自定義校驗，都知道吧，不囉嗦了，看程式碼吧。歸根結底，是重置以後，selectDate的資料跳脫了，完全逃離了掌控，需要自定義校驗呢