目标:实现表单重置和清除验证
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.r e f s [ f o r m ] . c l e a r V a l i d a t e ( ) 方 式 不 识 别 。 需 要 使 用 : t h i s . refs[form].clearValidate() 方式不识别。需要使用: 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'); })
表单方法(Element官网说明):
标签:form,resetFields,refs,校验,表单,移除,clearValidate From: https://www.cnblogs.com/houxianzhou/p/17927783.html