vue+elementUI动态清除或修改rules表单校验

已于 2022-09-23 10:10:00 修改
阅读量4.9k 收藏 8
点赞数
文章标签： elementui vue.js javascript 前端 正则表达式
于 2022-09-15 16:10:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/handsome_man__/article/details/126873521
版权

1.清除整个表单校验，假设表单用ref绑定名称为form

this.$refs.form.clearValidate()

2.清除单个表单元素校验
(1)如果绑定的是对象，列如v-model=‘obj.one’,清除代码如下

this.$refs.form.clearValidate('obj.one')

(2)如果绑定的不是对象，列如v-model=‘one’,清除代码如下

this.$refs.form.clearValidate('one')

3.修改表单校验，假设表单绑定了校验规则数组rules
(1)修改整个表单校验比较简单，直接this.rules=[…]就可以了
(2)prop绑定的是对象的话，修改校验规则代码如下

this.rules['obj.one']=[...]

(2)prop绑定的不是对象的话，修改校验规则代码如下

this.rules.one=[...]
handsome_man__
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解vue如何使用rules对表单字段进行校验
12-29
1、在代码中，添加属性：:rule <Form ref=loginForm :model=form :rules=rules @keydown.enter.native=handleSubmit class=form-con> <Input v-model=form.phone prefix=md-person placeholder=请输入您的手机号 size=large class=login-form-input :maxlength=11>
vue+elementui 对话框取消 表单验证重置示例
12-30
最近在写增删改查，在新增的时候要弹出对话框填写form表单信息，发现对话框右上角的小X和右下角的取消不是一个事件，我想在点击它们两个的时候都可以重置表单，最终解决，如下。 vue： <el dialog :title=titleName[dialogStatus] :visible.sync dialogFormVisible @close=closeDialog :close-on-click-modal> <el model=form rules=rules ref=form> ... </el> <div slo
vue+element表单通过disabled属性动态改变rules属性
有术无道止于术，有道无术尚有可为。
10-08 1829
vue+element表单通过disabled属性动态改变rules属性
vue elementUI 表单校验功能之数组多层嵌套
10-16
主要介绍了vue elementUI 表单校验（数组多层嵌套）功能的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
Vue rules动态控制是否校验
最新发布
weixin_48907405的博客
04-26 286
{ required: false, message: "请选择用户离职时间", trigger: "blur" },可以使用变量来控制动态是否校验。
vue elementui el-form rules动态验证的实例代码详解
10-16
在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下
elementUI关闭Dialog时清除表单校验
yy_demo的博客
07-20 1235
elementUI关闭Dialog的同时清除表单校验，再次打开的时候表单校验重置
vue+element动态校验、自定义校验规则、实时校验
01-06 1582
vue+element动态校验、自定义校验规则、实时校验
elementui清除表单个别表单项验证
qq_45030898的博客
09-07 3830
elementui清除表单个别表单项验证
vue中iview组件实现表单数据的动态校验
aaa123aaasqw的博客
05-11 1322
【代码】vue中iview组件实现表单数据的动态校验。
element清除表单校验
weixin_44283589的博客
11-12 1528
let _this = this; setTimeout(() => { _this.$refs["ruleForm"].clearValidate(); }, 30);
ElementUI 动态添加表单校验规则
u014265398的博客
05-25 1366
学习目标： 学习ElementUI 动态添加表单校验规则 学习内容： <template> <div id="app"> <el-form v-model='data' inline :rules="rules" ref='form'> <el-form-item label='审批人' prop='user'> <el-input v-model='data.user' placeholder='审批人'></el-
vue中清除表单的校验规则
weixin_44091629的博客
03-25 1890
当触发表单校验时，dialog关闭再打开仍会有校验规则的红字提示。
element-ui的rules自定义触发指定验证
liu_131421的博客
05-05 1695
在element-ui的rules验证中 我们可以自定义校验规则但是有的时候会根据某种类型去修改另一个输入框的校验逻辑，比如说根据类型的不同判断时间校验应该小于某个时间或者大于某个时间。这样我们就可以通过选择类型的不同去触发时间的校验，根据类型值得不同走不同的逻辑判断。
【Element Ui】 vue3中修改el-form的rules后不触发自动校验,再次修改rules时清除验证信息
alikami的博客
03-05 1380
修改el-form的rules后不触发自动校验,再次修改rules时清除验证信息
elementUI清除表单校验
Dream_Haunting的博客
05-27 1629
elementUI清除表单校验 elementUI官网 this.$refs[formName].clearValidate();
【element-ui】form表单动态修改rules校验项
小墨鱼的前端问题录
09-21 2239
增加rules校验项。删除rules校验项。
element ui el-dialog关闭窗口清空表单验证
林太白
07-04 5591
❤ element ui中 el-dialog关闭窗口清空表单验证
vue中用element-ui给动态添加的表单增加校验规则
子非鱼焉非我所愿的博客
04-20 1671
注意：v-for遍历生成的表单的ref拿到的是一个数组，this.$refs.personnelInformationForm[i]拿到的就是具体的各个表单的ref的对应结构了，准备个变量flag来控制通过校验与否，且要注意在这个函数最上面要把这个变量赋值回初始值，否则当前检验规则不通过下次再保存永远不通过！
vue3 elementui plus 表单重置所有方式
04-08
您好，针对您的问题，可以使用以下方式重置Vue3 Element UI Plus表单： 1. 使用Element UI Plus的 $refs 属性获取表单对象，通过调用 resetFields() 方法重置表单，示例代码如下： <template> <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="demo-form-styl"> <!-- 表单内容 --> </el-form> <el-button type="primary" @click="resetForm">重置表单</el-button> </template> <script> export default { data() { return { form: { // 表单数据 }, rules: { // 校验规则 } } }, methods: { resetForm() { // 重置表单 this.$refs.form.resetFields(); } } } </script> 2. 直接将表单对象中的数据逐一设置为初始值。需要注意的是，如果表单中的某个字段是绑定了计算属性的，可能需要更改该计算属性的值，才能达到重置的效果。 希望能够帮到您！如果您有其他问题，请随时提出。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值