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

已于 2022-09-23 10:10:00 修改
阅读量5k 收藏 9
点赞数
文章标签： 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
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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实现表单校验功能
10-16
在Vue.js框架中，结合Element UI库开发前端应用时，表单校验是一个常见的需求，用于确保用户输入的数据满足特定的格式和规范。Vue+Element的表单校验功能提供了便利且灵活的方法来验证用户输入，减少错误并提高用户...
ElementUI 动态添加表单校验规则
u014265398的博客
05-25 1376
学习目标： 学习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 elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法_el-form-item 必填项校验
最新发布
2301_79055101的博客
04-15 1431
required: true, message: ‘请输入’, trigger: ‘blur’
vue中动态添加删除表单，加入校验
weixin_42255542的博客
08-22 377
vue中动态添加删除表单，加入校验
【element-ui】form表单动态修改rules校验项
小墨鱼的前端问题录
09-21 2425
增加rules校验项。删除rules校验项。
【element-ui】form表单初始化页面如何取消自动校验rules
小墨鱼的前端问题录
08-02 2958
【代码】【element-ui】form表单初始化页面如何取消自动校验rules。
vue+element 表单动态改变rules属性
编写博客，学习交流
12-29 3715
1.required(是否必填) 修改el-form-item标签中的prop属性和required属性 /* isRequired 为 是否必填变量 xxx 为 需要进行校验的字段名 */ <el-form-item label="哈哈" :prop="isRequired ? '' : 'xxx'" :required="!isRequired "></el-form-item> 2.修改单个字段的校验规则 修改el-form-item标签中的rules属性 举
vue element-ui的form表单校验总结，动态校验、自定义校验（用正则校验手机号码、数字、url、中文）
TangMonk的博客
09-14 2640
data() {return {//在rules属性填写相关字段的校验规则rules: {{ required: true, message: "必填" },{ min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }],email:[{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'change' }],//自定义校验name:[
vue+element动态校验、自定义校验规则、实时校验
01-06 1610
vue+element动态校验、自定义校验规则、实时校验
vue elementUI 表单校验功能之数组多层嵌套
10-16
本文将深入探讨如何在 Vue Element UI 中实现针对这种数据结构的表单校验。 在 Vue Element UI 中，`el-form` 和 `el-form-item` 组件用于创建表单和表单项，并且通过 `v-model` 和 `prop` 属性进行数据绑定和验证...
vue elementui el-form rules动态验证的实例代码详解
10-16
在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下
VUE element-ui之el-form复杂表单的校验，可动态添加删除
qq_37485170的博客
11-02 3737
项目场景：一些大型的项目中，不仅仅是简单的form表单校验，可能会有一些复杂的表单校验，入如下图所示，带新增删除功能，同时删除新增的表单也需要做校验： 关键点：data中数据如下： form表单格式如下： methods部分如下:
【vue】element-ui的form数组表单验证（循环表单验证）
热门推荐
qq_39576711的博客
03-30 1万+
基于vue2.0的element-ui的form表单验证比较简单，但是有些同学可能对于数组类型的表单验证无从下手，这里我基于一个我自己项目中的例子，展示一下怎么进行数组的表单验证。 项目截图： 上代码,为了让大家看起来比较清晰，我删掉了无关的代码： <template> <div class="create_send"> <el-form ref="refForm" :model="formData" :rules="rules"> <el-
vue中清除表单的校验规则
weixin_44091629的博客
03-25 1937
当触发表单校验时，dialog关闭再打开仍会有校验规则的红字提示。
解决Element-UI清空表单及验证不生效的问题
HaiJaine的博客
05-03 2581
在使用Element-UI重置表单的方式时，一定要记住，表单中的prop属性不要漏掉。在查看方法使用时，并未提到prop这个属性，但继续往下阅读文档，就会发现，这个属性是必须的。注意prop属性值需要与model中的值一致。在这一句话中，需要与表单中的ref一致，且不能去其他的ref重名。
elementui清除表单个别表单项验证
qq_45030898的博客
09-07 3891
elementui清除表单个别表单项验证
elementUi中表单验证清空
qq_45155769的博客
06-14 1977
elementUi中表单验证清空
elementUI关闭Dialog时清除表单校验
yy_demo的博客
07-20 1346
elementUI关闭Dialog的同时清除表单校验，再次打开的时候表单校验重置
vue3 elementui多个表单校验
09-02
在Vue3中，可以使用Element UI实现多个表单校验。 首先，我们需要安装Element UI库，并在Vue组件中引入所需的表单组件。 ```bash npm install element-plus ``` 然后，在Vue组件中引入Element UI库和所需的表单组件。 ```vue <template> <el-form ref="form" :model="formData" :rules="formRules"> <el-form-item label="姓名" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model="formData.age"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="validateForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { ref } from 'vue'; import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'; export default { components: { ElForm, ElFormItem, ElInput, ElButton, }, setup() { const formData = ref({ name: '', age: '', }); const formRules = ref({ name: [ { required: true, message: '请输入姓名', trigger: 'blur' }, ], age: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '年龄必须是数字', trigger: 'blur' }, { min: 18, max: 100, message: '年龄必须在18到100之间', trigger: 'blur' }, ], }); const validateForm = () => { // 触发表单校验 ref.$refs.form.validate((valid) => { if (valid) { // 表单校验通过，可以进行提交操作 console.log('表单校验通过'); } else { // 表单校验失败，无法提交 console.log('表单校验失败'); } }); }; return { formData, formRules, validateForm, }; }, }; </script> ``` 上述代码中，使用了`ElForm`、`ElFormItem`、`ElInput`和`ElButton`这些Element UI的表单组件来实现多个表单校验。这里定义了两个表单项"姓名"和"年龄"，分别设置了校验规则。通过点击提交按钮时，调用`validateForm`方法来触发表单校验，并根据校验结果进行相应的操作。 以上就是在Vue3中使用Element UI实现多个表单校验的方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值