D2Crud日期驗證

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

參考資料

內建的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練習一下，可能會比較好理解。

卡拉筆記