1.整个表单的校验移除
<Form ref="form" rule={this.rules}>
<FormItem prop="name" label="姓名">
<Input/>
</FormItem>
<FormItem prop="age" label="年龄">
<Input/>
</FormItem>
</Form>
// 根据判断条件, 移除所有表单项的校验
if (/*条件*/) {
this.$refs['form'].clearValidate();
}
// 但是有时候只需要移除其中的某一项校验, 如只移除姓名的校验:
if (/*条件*/) {
this.$refs['form'].clearValidate(['name']);
}
2.resetFields和clearValidate区别
this.$refs.form.resetFields(); //移除校验结果并重置字段值
this.$refs.form.clearValidate(); //移除校验结果
// 二者都能清除验证,但是resetFields()会重置字段值,而在vue中大量用到的数据的绑定,很可能出现
// 同一个数据绑定在多处的情况,如果滥用resetFields很可能造成界面上出现莫名的bug
3.注意
有可能this.refs[form].clearValidate()方式不识别。需要使用:this.refs.form.clearValidate();
4.element-ui中的表单校验
表单代码
<el-form :label-width="120" :rules="formRules" :model="form" ref="form">
<el-form-item label="活动名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
<el-button type="info" @click="save">保存</el-button>
<el-button type="info" @click="empty">重置</el-button>
方法
// 校验规则
formRules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
}
/**
* 保存函数
*/
save() {
this.$refs[form].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
//有可能this.$refs[form].validate() 方式不识别。需要使用: this.$refs.form.validate();
})
empty() { //重置
//根据需求二选一
/**
* 移除校验结果并重置字段值
* 注:清除表单项name的校验及数值
*/
this.$refs.form.resetFields();
/**
* 移除校验结果
* 注:只清除表单项name的校验,不清楚表单项name的数值
*/
this.$refs.form.clearValidate('name');
})
自己遇到的问题,用clearValidate的时候,select框校验一直去不掉,input框可以去掉。
换成resetFields实现了。