vue rule 动态校验规则

最新推荐文章于 2024-04-26 15:13:51 发布
最新推荐文章于 2024-04-26 15:13:51 发布
阅读量2.6k 收藏
点赞数
分类专栏： Vuejs 文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42066070/article/details/125088672
版权

 

需求分析

单选切换的时候，下面的表单是法人代表跟经办人姓名的校验是动态变化的。

解决方案

静态界面代码

<el-form
        ref="legalUserForm"
        :rules="legalUserRules"
        :inline="true"
        :model="legalUserInfo"
        label-width="200px"
      >
        <el-form-item label="申请人身份：" key="radio" prop="radio">
          <div class="radioGroup">
            <el-radio v-model.trim="custContactInfo.radio" label="1"
              >产权人</el-radio
            >
            <el-radio v-model.trim="custContactInfo.radio" label="2"
了解本专栏 订阅专栏 解锁全文 超级会员免费看
sunyin.liu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
vue elementui el-form rules动态验证的实例代码详解
10-16
在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下
vue中用element-ui给动态添加的表单增加校验规则
子非鱼焉非我所愿的博客
04-20 1684
注意：v-for遍历生成的表单的ref拿到的是一个数组，this.$refs.personnelInformationForm[i]拿到的就是具体的各个表单的ref的对应结构了，准备个变量flag来控制通过校验与否，且要注意在这个函数最上面要把这个变量赋值回初始值，否则当前检验规则不通过下次再保存永远不通过！
Vue rules动态控制是否校验
最新发布
weixin_48907405的博客
04-26 321
{ required: false, message: "请选择用户离职时间", trigger: "blur" },可以使用变量来控制动态是否校验。
vue 根据下拉框动态切换form的rule
weixin_30681121的博客
09-28 2216
taskCategorySelect (val) { // 任务类别下拉选择 if ( val == 5 ) { this.cameraORgateway = false; // true不可以使用 = 不可以使用 this.cameraORgatewayCP = true; this.rules.gatewayCode = [{ required: true,...
vue：element-ui表单动态验证规则
coinisi_li的博客
01-22 3971
实现当是否发送消息选择是时，业务类型字段必填。
vue elementui el-form rules动态验证
热门推荐
CoderYin的博客
04-15 2万+
vue elementui el-form rules动态验证 一、介绍 简介：在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。 图片介绍： 1、在用户选择单选或多选时会有A,B,C,D,E五个选项 2、在用户选择简答题时只会题干，答案以及解析选项（主要是通过v...
vue为动态生成的表单添加验证
siriva的博客
11-29 619
目前我这边遇到一个需求就是需要渲染一个不定项的列表，每条数据字段名字相同，且需要为每条数据添加必填验证。 export default { data() { return { form:{ paramList:[] }, rules: { rule: [ {required: true, message: '必填项'...
vue2：elementUI中Form 表单在特定情况下做动态rules添加删除
weixin_63515766的博客
01-17 5790
vue2：elementUI中Form 表单在特定情况下做动态rules添加删除 使用this.$set()和this.$delete()
Vue 动态表单验证
0D
08-01 999
核心操作：FormItem 的 :prop 需要与控件的 v-model 有一致的路径。 由于验证完成后需要判断值是否为空，那这个时候需要有个地方可以映射到这个值，此时:prop这个这个值对应的就是key 在固定表单需求中，通过指定 :prop，:rules 即可等到验证功能，但是对于动态生成的表单，业务逻辑来说，也就是需要动态生成 :prop 与 :rules。比如说： <Form :model="formItem" :rules="rules"> <FormItem :pr
vue表单自定义校验规则介绍
10-18
Vue提供了多种方式来处理表单验证，其中自定义校验规则是一个灵活且强大的功能，允许开发者根据具体需求定制验证逻辑。在本篇文章中，我们将深入探讨如何在Vue中实现表单的自定义校验规则。 首先，让我们看一个简单...
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
Vue 基于element-ui 组件，el-form与el-table结合使用实现动态表单验证，支持添加和删除操作；支持身份证号码验证、手机号验证; 开箱即用，方便快速二开，节省开发成本
详解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中常用rules校验规则(实例代码)
01-19
在 vue开发中，难免遇到各种表单校验，这里整理了网络上和自己平时高频率用到的一些校验方法。如果错误欢迎指出，后期不断补充更新。 1、是否合法IP地址 export function validateIP(rule, value,callback) { if...
Vue快速实现通用表单验证的方法
10-15
对于更复杂的表单验证场景，可以考虑使用现有的验证库，如`VeeValidate`或`vue-form-validation`，它们提供了丰富的验证规则和更高级的用法，如异步验证、自定义验证等。 总之，Vue.js 提供了灵活的机制来实现表单...
自带气泡提示的vue校验插件（vue-verify-pop）
12-09
本教程大家分享了自带气泡提示的vue校验插件，供大家参考，具体内容如下 安装 npm install vue-verify-pop 使用 VUE版本：1.x 必须在vue-cli生成的webpack模板环境中使用 ...// 增加校验规则 verify.addRule('myRul
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法_el-form-item 必填项校验
2301_79055101的博客
04-15 1265
required: true, message: ‘请输入’, trigger: ‘blur’
vue 中表单自定义校验规则
aichixiangcaia的博客
10-26 1067
1.给表单元素绑定:rules和:model 2.定义简单校验规则 在data里面定义rules属性 3,给每一个需要验证的表单项绑定简单校验规则 prop(prop 千万不要写在el-input中) 4.由于简单的校验规则不满足实际需求,所以需要自定义校验规则 //自定义校验 标识名称 const validName = (rule, value, callback) => { // 添加时的校验： 名字不能取子元素的名字 let existNam.
「Vue 实用技巧」策略模式实现动态表单验证
前端下午茶
08-26 1208
策略模式 （Strategy Pattern）又称政策模式，其定义一系列的算法，把它们一个个封装起来，并且使它们可以互相替换。封装的策略算法一般是独立的，策略模式根据输入来调整采用哪个算法。关键是策略的实现和使用分离。 注意： 本文可能用到一些编码技巧比如 IIFE（Immediately Invoked Function Expression, 立即调用函数表达式），ES6 的语法 le...
vue中iview组件实现表单数据的动态校验
这个人很懒，什么都没有留下
11-03 1103
vue实现表单数据的动态校验
vue3 动态表单校验规则
06-07
在 Vue3 中，可以使用 `v-model` 和 `watch` 以及 `computed` 来实现动态表单校验规则。以下是一个简单的例子： 1. 在组件中定义一个对象，用于存储表单数据和校验规则： ``` <template> <form> <input v-model="formData.name"> <span v-if="errors.name">{{ errors.name }}</span> </form> </template> <script> import { defineComponent, reactive, watch } from 'vue'; export default defineComponent({ setup() { const formData = reactive({ name: '', }); const rules = reactive({ name: [ { required: true, message: '请输入姓名', trigger: 'blur', }, { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur', }, ], }); const errors = reactive({}); watch(formData, () => { const validator = new Promise((resolve, reject) => { const errors = {}; for (const key in rules) { const rule = rules[key]; const value = formData[key]; for (const r of rule) { if (r.required && !value) { errors[key] = r.message; reject(errors); return; } if (r.min && value.length < r.min) { errors[key] = r.message; reject(errors); return; } if (r.max && value.length > r.max) { errors[key] = r.message; reject(errors); return; } } } resolve(); }); validator .then(() => { errors.name = ''; }) .catch((errors) => { errors.name = errors.name; }); }); return { formData, errors, }; }, }); </script> ``` 2. 在模板中使用 `v-model` 绑定表单数据，使用 `v-if` 显示错误信息。 3. 在 `watch` 中监听表单数据的变化，并根据校验规则进行校验，将错误信息存储到 `errors` 对象中。 4. 使用 `reactive` 创建响应式对象，以便在模板中动态显示错误信息。 这是一个基本的例子，你可以根据需要对其进行扩展和优化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sunyin.liu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值