设置rules属性改变后不立即出发校验

最新推荐文章于 2024-03-05 16:23:48 发布
最新推荐文章于 2024-03-05 16:23:48 发布
阅读量656 收藏 7
点赞数 10
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/C422805/article/details/134603459
版权
需求分析：

表单中一项改变后，导致另一项的输入内容发生该变，且校验规则不同。

解决方案：

使用v-if进行输入项的切换，在watch中对改变项进行监听，当值改变的时候，表单的rules发生改变。

校验会立即触发----》

1. 在el-form上加上属性  :validatae-on-rule-change="false",

2. 在watch中，添加   this.$refs['表单名'].clearValidate()  清楚校验

一颗大橙子c
关注
  • 10
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue的form表单切换时禁用自动验证
weixin_44975002的博客
09-10 3310
主要是在el-form中添加 :validate-on-rule-change=“false” 在 自定义的验证规则里边的 trigger里添加 trigger:[‘blur’,‘change’] userrules是验证规则 userrules: { phone: [{ required: true, message: ‘请输入用户名’, trigger:[‘blur’,‘change’] },], password: [{ required: true, message: ‘请输入密码’, trigg
详解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=请输入...
设置rules 属性改变后不立即触发一次验证
weixin_42947972的博客
11-23 1552
设置rules 属性改变后不立即触发一次验证
element-ui 动态表单规则，初始化规则报红提示解决
bangbDIV的博客
04-14 6970
今天在做一个动态表单规则的需求, 但是赋值给rules规则值之后，初始化的时候，表单就会检验报红。 解决办法如下： const ruleObj = { date1: [ { required: val, message: '请选择开始日期', trigger: 'change' } ], date2: [ { required: val, message: '请选择截止日期', trigger: 'change' } ], } this.rules =
使用elelment-ui表单校验切换就自动开启了所有的校验
MissXu666的博客
10-28 1620
今天在做需求的时候遇到一个问题 输入完第一个表单，后面所有的表单就自动校验了 表单校验有一个validate-on-rule-change属性，默认是true，我们设置为false就可以了！
element 切换页面，表单rules自动校验如何关闭。
qq_38425020的博客
01-28 2762
element 官网有个属性，validate-on-rule-change，将此属性设置为false并且使用resetFields方法将form表单重置并移除校验结果。由于业务场景需要对切换元素时，rules重新赋值，此时页面会出现自动校验表单的元素，用户体验很差。
【Element Ui】 vue3中修改el-form的rules后不触发自动校验,再次修改rules时清除验证信息
最新发布
alikami的博客
03-05 1973
修改el-form的rules后不触发自动校验,再次修改rules时清除验证信息
Vue中常用rules校验规则(实例代码)
10-15
主要介绍了Vue中常用rules校验规则，本文通过实例代码个大家介绍了一些校验方法,需要的朋友可以参考下
详解HTML中table表格的frame和rules属性
12-13
table标签的frame和rules属性，可以控制边框的显示。frame属性控制着表格最外围的四条边框的可见性，而 rules 则控制着表格内部边框的可见性。frame属性可取的值及含义如下：* void – 默认值。表示不显示表格最外围...
详解element-ui 表单校验 Rules 配置 常用黑科技
10-15
- `required`：如果`required`属性设置为`true`，表示字段为必填项。例如，`{required: true, message: '此字段为必填项', trigger: 'blur'}`会在失去焦点时检查输入是否为空。 - `pattern`：`pattern`规则用于...
elementPlus学习（持续更新）
ArmadaDK的博客
06-29 1640
谁能想到element还要学啊，昨天写表单，发现自己完全不太懂表单的校验，有没有人和我一样在大学做项目表单从来不校验的，毕竟只有自己用，能展示就行。所以决定今天仔细看一下elementui的一些不熟悉的内容。
el-form自定义规则后表单验证validate不生效的问题
weixin_61570458的博客
09-21 3015
错误示范
element ui表单验证失效原因分析
qq_50276105的博客
11-04 3544
title: [{ required: true, message: "请输入标题", trigger: 'blur' }],rules 中 每个校验对象 都有一项 trigger 是检验触发的方式,对。2、prop中的内容是v-model绑定的表单对应的值。、日期选择器 el-date-picker。
$forceUpdate()； 后,rules 验证失效的解决方法
qq_41737172的博客
09-28 1845
<el-form-item label="所属项目 " prop="application"> <el-select v-model="form.pTypes" placeholder="所属项目" @change="selectApplice($event)"> <el-option v-for="item in applicationList" :key="item.value" :label="item.la
form表单校验可能出现的问题及解决方案
C422805的博客
08-11 2490
基于elementUi的el-form的校验表单校验目的: 在防止用户犯错的前提下,尽可能让用户更早地发现并纠正问题.以上几种情况是目前项目中可能遇到的情况最多的.针对以上问题一一给出解决方案。
vue表单验证rules国际化处理不能及时更新
friend_ship的博客
11-25 2876
有两种方式可以解决表单验证更新问题 第一种：通过computed属性 以基础表单为例，代码如下： <template> <div> <el-form :model="form" :rules="rules" ref="form"> <el-form-item :label="$t('form.Name')" prop="name"> <el-input v-model
Vue 自定义rule不生效问题
Remain_Slience的博客
11-26 2132
Vue 自定义rule不生效问题
el-form动态检验无法生效问题（已解决）
A_9888的博客
09-12 1373
要对el-form里面的字段动态生成校验规则，测试了一系列的骚操作也无法生效，要么是require视图生效了，校验规则还是不生效;
记录一次form表单验证不生效问题
yangyanqin2545的博客
01-26 1441
记录一次form表单验证不生效问题 1、问题描述 当输入图中姓名之后，点击生成自动生成按钮，用户名校验一直都不消失 2、代码片段 contactFormRef.value.clearValidate(contactRules['loginName'])//clearValidate的参数为需要去除的rules中prop的属性名 3、解决方法 loginName: [ { required: true, message: '请输入用户名', trigger: 'change' },
rules校验状态不及时
07-27
根据引用\[1\]和引用\[2\]的内容，当我们切换语言时，form表单的错误提示可能不能及时更新。为了解决这个问题，可以使用行内校验法，并在校验之前使用this.$refs.form.resetFields()来清空表单验证信息。具体的代码示例如下： ```javascript export default { data() { return { form: { name: '' } } }, computed: { rules() { const rules = { name: \[ { required: true, message: this.$i18n.t('PleaseInputName'), trigger: 'blur' } \] } // 清空表单验证信息 this.$nextTick(() => { this.$refs\['form'\].resetFields(); }) return rules; } } } ``` 根据引用\[3\]的内容，还有一个关于动态循环表单二次编辑的问题。BUG1是在用户保存过条件后，第二次从父组件取值时二次编辑时，选择下拉框内容不会回显。解决这个问题的方法是通过数据强制渲染后，可以修复BUG1，但会触发另一个校验不通过的问题。观察data数据确实有值，但校验不通过，无法保存。具体的解决方案需要根据具体情况进行分析和调试。 #### 引用[.reference_title] - *1* [antd中，国际化切换是，form表单错误提示不及时更新问题](https://blog.csdn.net/weixin_44759289/article/details/124735948)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue表单验证rules国际化处理不能及时更新](https://blog.csdn.net/friend_ship/article/details/110137730)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [elementUI动态循环表单下拉框选中无效及强制刷新数据后有值校验不通过](https://blog.csdn.net/ouch_XTF/article/details/124727489)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值