CC曬月光

　　使用D2Crud，新增日期(開始日期、結束日期)時要驗證使用者輸入的是否是有效日期(結束日期不得大於開始日期)

　　參考資料

　　https://d2admin.fairyever.com/#/demo/d2-crud/demo22

　　內建的addrules只能寫blur檢查有沒有內容，所以這邊要寫自定義驗證方法。

　　實作上卡住的點主要是要拿各個component的值不太容易。

　　addRules的部分：

enddate: [{ required: true, message: ""请输入内容"", trigger: 'blur' },

                { validator: twocheckpass, trigger: 'blur' }]

　　twocheckpass是自定義變數。

　　很妙的是這個變數竟然定義在data的下面return的外面……

export default {

  data() {

    var chechenddate = (rule, value, callback) => {

      let date1 = this.$refs.d2Crud.$refs.form.fields[2].fieldValue

      let date2 = value

      let D1 = new Date(date1.split('-'))

      let D2 = new Date(date2.split('-'))

      if (D1 > D2) {

        callback('結束日期須大於開始日期!!');

      } else {

        callback();

      }

    };

    return {

      ...

    }

 

以上這樣就完成日期驗證了。

主要比較困難的就是我這樣寫只驗證結束日期，那麼該如何取到另外一個key(開始日期)？

我用的是 this.$refs.d2Crud.$refs.form.fields[2].fieldValue，這一串是教學寫的，大致看得懂但我肯定，我肯定寫不出來。

　　fileds多少是數你驗證的是表單的第幾個component(記得從0開始，fields[2]是表單第三個component，我這個是在addTemplate裡面，要新增資料時做的驗證)

　　value接的是被驗證component的值，也就是結束日期。

　　接下來的D1、D2是因為拿回來的值是個string，由於前端限制value-format=yyyy-MM-dd(注意MM大寫)，後端也是回傳這個格式，所以只要用split()切割’-‘之後就可以得到一個裝了年月日三個數字的陣列。

　　接著再用Date把陣列變成日期格式去比大小，如果開始日期D1比D2大，那一定就是你亂填~~~~！

　　提示錯誤訊息一波！

　　這些可以先在console.log練習一下，可能會比較好理解。