<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();
},
}
}
For the first query, the verification rules can intercept, which is normal. After resetting, click the query again, and the verification rules are invalid. At this time, the valid value printed on the console is still true! ! ! what? After I reset, shouldn't it be false?
I checked the information on the whole network, and it basically said that the fields in the prop and the fields in the form object in the data are the same. Don't panic, I carefully printed the selectDate before and after the reset. It turned out that before I reset, selectDate was an empty string. After selection, it was an array with a length of 2. As shown in the figure, after I reset, selectDate has changed
! ! ! ! The incriminating evidence is as follows:
It seems that the verification of element is still a bit imperfect. In desperation, check it yourself
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" },
],
},
}
}
You all know about custom verification, don’t be too verbose, let’s look at the code. In the final analysis, after the reset, the data of selectDate escaped and completely escaped the control, so a custom verification is required