清除ElementUI的el-input标签的校验——使用validate方法-区别之resetFields()-移除校验结果并重置字段值 & clearValidate()-移除校验结果
1、在el-form上方写属性 ref=“form”
<el-form ref="form" :model="form" :rules="rules" label-width="90px"> 2、写清空代码，这里的form一定要和ref的值一致
this.$nextTick(() => {
// 表单数据置空 并且移除校验 this.$refs['form'].resetFields(); }) 1、详解-resetFields()与clearValidate()
resetFields()与clearValidate()的区别
1、介绍
2、区别
相同点：二者都能移除表单校验
不同点：resetFields()会对整个表单进行重置，将所有的字段重置为初始值
clearValidate() 只会移除表单校验，而且可以只对部分字段进行移除校验
3、使用场景
resetFields()会移除表单校验并初始化表单，一般用于新增
clearValidate()移除全部或部分表单校验，一般用于修改、编制
4、两者用法基本一致
this.$refs.form.resetFields();
this.$refs[‘form’].resetFields();
this.$refs.form.clearValidate();
this.$refs[‘form’].clearValidate();
this.$refs.form.clearValidate(“a”);
this.$refs.form.clearValidate([“b”,“c”]);
5、注意事项
1、resetFields()会重置字段值，而在vue中大量用到的数据的绑定，很可能出现同一个数据绑定在多处的情况，如果滥用resetFields很可能造成界面上出现莫名的bug
// 下图为项目中的bug
左边的树和右边的表单用了绑定了相同的数据，
点击左边树的每个节点可以在右边进行编辑，右边点击保存，会对数据进行校验，
左边树结构每次点击不同节点都要重置校验，
误用了resetFields，会造成-去重置仓库》大楼数据为空》再次左边树结构的数据消失，变为空白。
2、添加和修改公用一个弹窗，点击添加弹窗后，
如果没移除表单校验的话，再点击修改弹窗时校验就会被记住，
所以需要移除校验，但在清空表单校验时会报如下错误：
解决方案：
this.$nextTick(()=>{
this.$refs.form.resetFields(); }) 2、整个表单的校验移除
<Form ref="form" rule={this.rules}> <FormItem prop="name" label="姓名"> <Input/> </FormItem> <FormItem prop="age" label="年龄"> <Input/> </FormItem> </Form> js
// 根据判断条件, 移除所有表单项的校验 if (/*条件*/) {
this.$refs['form'].clearValidate(); } // 但是有时候只需要移除其中的某一项校验, 如只移除姓名的校验: if (/*条件*/) {
this.$refs['form'].clearValidate(['name']); } 3、vue3.0中的应用
1、结构
<el-form :model="form" label-width="auto" ref="ruleForm" :rules="rules" class="wrap-294 ml-34" > </el-form> 2、方法
setup(props, {
emit }) {
const funMethods = {
agreeChange:function(val){
// console.log(val,"hhhhhhhhh"); if(val=2){
ruleForm.value.clearValidate(); //2、注意vue3.0写法 } }, }, return {
state, ...toRefs(state), ruleForm, ...funMethods }; } 显示效果-不带* 去除必选项
4、vue2.0中的应用-element-ui中的表单校验
相关文章：
Form 表单(Element官网)：
https://element.eleme.cn/#/zh-CN/component/form#form-biao-dan
实例1
表单代码
<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'); }) 实例2
1、element-ui的表单校验使用validate方法。
<el-form ref="dynamicValidateForm" :model="uploadObject"> <el-form-item label="名字" prop="name" rules="[ { required: true, message: '请输入名字', trigger: 'blur' } ]"> <el-input v-model.trim="uploadObject.name"> </el-input> </el-form-item> </el-form-item> 方法
this.$refs.dynamicValidateForm.validate((valid,obj) => {
if(!valid){
return false; }else{
...... } }) 2、如果想移除表单的校验结果，可以调用clearValidate方法。参数为待移除的表单项的 prop 属性或者 prop 组成的数组，如不传参数则移除整个表单的校验结果。
this.$refs.dynamicValidateForm.clearValidate(); 3、如果想重置表单，则可以调用resetFields方法，对整个表单进行重置，将表单的所有字段重置为初始值同时移除表单的校验结果。
this.$refs.dynamicValidateForm.resetFields(); clearValidate`方法。参数为待移除的表单项的 prop 属性或者 prop 组成的数组，如不传参数则移除整个表单的校验结果。
this.$refs.dynamicValidateForm.clearValidate(); 3、如果想重置表单，则可以调用resetFields方法，对整个表单进行重置，将表单的所有字段重置为初始值同时移除表单的校验结果。
this.$refs.dynamicValidateForm.resetFields(); 版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/rfx/10876.html