首页 > 其他分享 >clearValidate()和resetFields()表单校验的用法和区别

clearValidate()和resetFields()表单校验的用法和区别

时间:2023-12-26 11:33:33浏览次数:48  
标签:form resetFields refs 校验 表单 移除 clearValidate

目标:实现表单重置和清除验证

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

相关文章

  • 在Go中解析HTTP请求中的表单数据
    想象一下,你收到了一封神秘的信件,信上写着:“在HTTP请求的表单数据中,隐藏着一座宝藏,等待勇敢的冒险者前来寻找。”你知道,这封信正是冲着你来的!今天,我们将使用Go语言作为我们的寻宝地图,一起去探索如何解析HTTP请求中的表单数据!首先,为了解析HTTP请求中的表单数据,我们需要从请求中获取......
  • HTML学习第四天:掌握表单与验证
    在今天的HTML学习中,我深入了解了表单元素和表单验证。早上,我开始学习各种表单元素,如文本框、单选框、复选框等。这些元素是构建交互式网页的关键。通过使用<input>标签和不同的类型属性,我可以创建各种类型的输入字段。这让我能够更好地控制用户输入,并确保用户能够按照我的要求提供......
  • 可拖拽表单都有哪些特点?
    可拖拽表单拥有传统表单没有的优势和特点,在当前快节奏的现代化社会和职场中,拥有了非常多新老客户朋友的支持和青睐,成为助力企业实现流程化办公的有力武器。那么,可拖拽表单都有什么特点和优势?可以用在哪些领域里?带着这些问题,我们一起来探寻答案吧。在众多服务商中,有这么一家服务商......
  • AntDesignBlazor示例——Modal表单
    本示例是AntDesignBlazor的入门示例,在学习的同时分享出来,以供新手参考。示例代码仓库:https://gitee.com/known/BlazorDemo1.学习目标创建Modal表单编辑数据创建Table操作列2.创建Modal表单1)新增按钮和Modal组件打开天气页面Weather.razor文件,按照如下步骤添加新增按钮......
  • 讯睿收集在线表单
    一现在服务安装全局表单二前段调用如下{phpextract(dr_get_form_post_value('zxbm'))}<!--<p>调试信息:{$debug}</p>--><for......
  • 解决layui表单中按钮自动提交的问题
    原文链接:https://blog.csdn.net/Mirror_r/article/details/80968696layui表单中的按钮会自动提交,这是一个很麻烦的事情。这几天项目中多次用到表单按钮,仔细研究了下,找到了解决办法:1、如果不需要放在表单中的按钮,最好不要放在表单中,不在layui的form中的按钮就不会进行自动提......
  • delphi - 调整表单大小,同时保持纵横比
    https://www.coder.work/article/5928583在Form1的 OnCanResize事件添加以下处理程序似乎对我来说效果很好:procedureTForm2.FormCanResize(Sender:TObject;varNewWidth,NewHeight:Integer;varResize:Boolean);varAspectRatio:double;beginAspectRatio:=......
  • 哪里有拖拽表单设计器?
    用什么样的方式方法可以提高办公协作效率?很多客户朋友了解到拖拽表单设计器是一种可以满足日益递增业务需求的平台,都在询问哪里有拖拽表单设计器?在新的发展形式下,低代码技术平台是助力实现流程化办公的得力助手,其核心功能表单设计器也能快速提升90%办公协作效率,创造可观价值。什......
  • QFormLayout表单布局
    一、概述新建一个简单的登录表单布局QFormLayout。如下: 二、代码示例#include"FormLayoutExampleWindow.h"FormLayoutExampleWindow::FormLayoutExampleWindow(QWidget*parent):QWidget(parent){this->setWindowTitle("Form表单");//表单布局......
  • vue3 + vant4 :form表单中,搭配 Popup 和 Field 实现vant-picker组件,设置默认值及默认选
    环境:vue3,vant4背景:Picker作为用于辅助表单填写,搭配Popup和Field。页面需要给picker设置默认值,city为温州,但是在popup弹出时,picker没有选中温州这个选项,还时停留在杭州。解决方案:看了很多解决方案,设置default-indexset,ColumnIndex。都尝试了,还是不行。而且这些方法,其实在v......