Vue-element表單 type=“daterange“首次驗證通過重置後,驗證規則失效(驗證依舊通過)
阿新 • • 發佈:2021-01-06
<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的資料跳脫了,完全逃離了掌控,需要自定義校驗呢