elementUI中表单校验的清空校验以及手动校验

最新推荐文章于 2024-05-06 09:50:00 发布
最新推荐文章于 2024-05-06 09:50:00 发布
阅读量1k 收藏 9
点赞数 11
分类专栏： elementUI技巧 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20086467/article/details/135951316
版权

this.$refs.表单.clearValidate(),这个可以传入字符串或者字符串数组，字符串对应的是我们自定义的rule里面的属性名，rule的属性名对应的是el-form-item的prop。这个api目前遇到的场景是el-radio切换时v-if展示不同的表单内容，但是当有校验提示的时候会被带到不该在的地方。

如上所示，这里就可以用clearValidate来清空提示文字。

强啊啊强
关注
  • 11
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
10-14
主要介绍了vue+ElementUI 关闭对话框清空验证,清除form表单的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
iview form清除校验状态的实现
10-16
主要介绍了iview form清除校验状态的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-ui表单校验、重置表单与移除表单项的校验结果
u010007013的博客
10-22 9174
1.element-ui的表单校验使用validate方法。参数为一个回调函数，该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。 示例代码如下： <el-form ref="dynamicValidateForm" :model="uploadObject"> <el-form-item label="名字" pr...
element ui重置表单和清除表单验证
m0_64707449的博客
02-02 2583
element ui重置表单和清除表单验证
vue+elementUi——form表单校验提示清除(技能提升)
热门推荐
yehaocheng520的博客
08-10 1万+
今天在写后台管理系统时，用到了表单校验，为了能够校验必填项和类型等，需要用到表单中的 rule校验规则。最终效果如下： 由于在此页面上，禁用和删除两个功能基本类似，因此我是共用的一个弹窗展示。 所以导致，在禁用页面表单校验完成后，再进入删除页面时，在没有点击提交按钮时，就直接进行了表单校验，提示了校验报错信息。这样并不影响使用，但是页面美观度会差很多。 因此需要在进入此弹窗页面时，清除表单校验。 clearValidate的用法 我从网上找到的校验方法是：this.$refs[formName].cle
elementui form表单验证清除
qq_42423991的博客
01-17 1662
全部清除： this.$nextTick(() => { this.$refs['ruleForm'].clearValidate()// 清除表单验证 }) 清除指定的验证： this.$nextTick(() => { this.$refs['ruleForm'].clearValidate(['time'])// 清除单独的表单验证 }) ...
elementUI清空表单校验及清空表单内容信息
qq_63026743的博客
12-21 1295
通过调用对整个表单进行重置，将所有字段值重置为初始值并移除校验结果调用移除表单项的校验结果。
Element ui 表单动态去掉某一项的校验
m0_50864962的博客
03-22 3633
// 方式一 this.$refs.ruleForm.clearValidate('input2') // 方式二 this.$refs.ruleForm.fields.map(i => { if (i.prop === 'input2') { i.clearValidate() } })
element清除表单校验
weixin_46021847的博客
10-19 1468
//关闭表单时调用次方法 this.$refs[formName].resetFields();
element中form校验中清除校验不通过的提示语
weixin_45547638的博客
01-25 916
clearValidate(‘festivalTime’)//清除校验错误信息。实际开发中 有些校验提示因为种种原因不隐藏 这时候如何让提示信息隐藏呢？这里可以指定清除prop中设置的数据festivalTime。可以使用系统自带的方法 clearValidate。//这里清除所有校验提示信息。
vue+elementui 对话框取消 表单验证重置示例
12-30
最近在写增删改查，在新增的时候要弹出对话框填写form表单信息，发现对话框右上角的小X和右下角的取消不是一个事件，我想在点击它们两个的时候都可以重置表单，最终解决，如下。 vue： :title=titleName...
【element-ui】form表单初始化页面如何取消自动校验rules
小墨鱼的前端问题录
08-02 2441
【代码】【element-ui】form表单初始化页面如何取消自动校验rules。
clearValidate()和resetFields()表单校验的用法和区别
zuo_zuo_blog的博客
09-26 8312
1.整个表单的校验移除 <Form ref="form" rule={this.rules}> <FormItem prop="name" label="姓名"> <Input/> </FormItem> <FormItem prop="age" label="年龄"> <Input/> </...
前端基础学习-移除部分表单校验
小夭的博客
06-12 1434
在有的情况下，我们需要选择性对表单移除部分校验 我们可以看到element-ui上有一个方法 但具体操作方法需要根据情况而定 我们可以先看下这次的效果 当我们选择选项一时，选项二的表单被置灰，这时我们只对选项一的表单进行校验，而不对选项二的表单进行校验，所以这里我们需要移除表单二的校验（如果不移除，这里仍然会对prop 的属性进行校验） 移除选项二校验 移除选项一校验 首先是表单的页面代码，在切换el-radio时会切换部分el-input的disabled 这里绑定的校验内容都是最基础的校验，ru
Element-ui 移除表单校验 clearValidate和resetFields
莫不静好
07-06 6734
一、clearValidate 移除表单校验 初始化 一般用于添加 form 表单修改时，点击“确定”按钮，提示 “金额不能为空” rules: { oneUpAmount: [ { required: true, trigger: 'blur', message:'金额不能为空'}, { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确额格式,可保
elementUI关闭Dialog时清除表单校验
yy_demo的博客
07-20 1152
elementUI关闭Dialog的同时清除表单校验，再次打开的时候表单校验重置
element ui Dialog 对话框关闭后——清除表单的效验方法（更简便写法）
lyq1948的博客
06-28 1379
主要代码：在关闭弹窗时 有个组件的关闭的回调 @close='cancel' 调用这 cancel方法就可以实现 关闭的同时清除表单效验。
Elementui的el-footer标签使用报错
最新发布
c_studer_的博客
05-06 147
​ 警告信息表示 Vue 不识别。el-footer的报错信息。在组件中进行引入和暴露。
vue elementui 动态追加下拉框、输入框
Z18834071903的博客
04-26 1434
vue elementui 动态追加下拉框、输入框
el-dialog中的x这么清空校验
05-16
如果您使用的是 Element UI 中的 el-dialog 组件，并想在关闭弹窗时清空表单校验，可以通过以下两种方式实现： 1. 使用 $refs 获取表单组件，然后手动调用 clearValidate() 方法进行清空。 ```html <template> <el-dialog :visible.sync="dialogVisible" title="Dialog Title" @close="handleClose"> <el-form ref="form" :model="form" :rules="rules"> <!-- 表单内容 --> </el-form> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, form: { // 表单数据 }, rules: { // 表单校验规则 } }; }, methods: { handleClose() { // 关闭弹窗时清空表单校验 this.$refs.form.clearValidate(); } } }; </script> ``` 2. 在 el-dialog 组件中使用 destroyOnClose 属性，这个属性可以控制在关闭弹窗时是否销毁 el-dialog 内部的组件，包括表单组件，这样就可以清空表单校验。 ```html <template> <el-dialog :visible.sync="dialogVisible" title="Dialog Title" :destroy-on-close="true"> <el-form :model="form" :rules="rules"> <!-- 表单内容 --> </el-form> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, form: { // 表单数据 }, rules: { // 表单校验规则 } }; } }; </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值