关于绑定不上表单验证规则的问题

已于 2022-10-19 17:52:30 修改
阅读量190 收藏
点赞数
分类专栏： vue 文章标签： elementui 前端 javascript
于 2022-10-19 17:52:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52179917/article/details/127412802
版权

1. porp的值必须和el-form-item里面绑定的v-model = '父.porp'红色字一样

2. el-from中的 :model必须和el-form-item里面绑定的v-model = ‘父.porp’ 红色字一样

3. el-from中的 :model不能写成v-model

否则就会出现如下问题：

输入了还提示你这是必选项 

穿越到未来calc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui中动态表单组件的数据绑定注意点
Lykeios的博客
12-04 2609
<el-form ref="volumeDiscountForm" :model="volumeDiscountInfo" :rules="rule3" label-width="150px" class="demo-ruleForm" ...
el-dialog搭配el-form使用遇到的问题[bug记录]
⭐
12-04 1132
el-dialog搭配el-form使用遇到的问题
Ant Design Vue Form表单验证后无法绑定数据的解决办法
baidu_36583119的博客
12-03 1818
v-model 与 v-decorator 是 冲突的，所以 v-decorator 无法双向绑定。 可以调用 ant的form组件的一个方法： // 它的作用是 修改表单元素 的值 this.form.setFieldsValue( {'name' : '吴桂鑫'} ); 调用该方法前，表单需要先渲染完毕，所以需要在外面加一层代码： this.$nextTick(()=>{ ...
form表单数据回显双向绑定失效的原因
weixin_46391646的博客
06-07 1404
问题描述 点击修改按钮，回显表单数据的时候，假设第一个下拉框为1的时候显示另一个下拉框，这个时候我点击另一个下拉框的时候没反应，不知道为什么， 一开始我以为又是element组件库的问题，后来发现不是 代码分析 伪代码 点击修改按钮的方法里 我直接用row给这个表单赋值了 this.user_form.id = row.id this.user_form = {...row} 然后在点击第一个下拉框的change回调方法里，我直接给另一个下拉框双向绑定的值赋值空 this.user_form.
Vue Element中 找不到model [Element Warn][Form]model is required for validate to work
qq_49252275的博客
03-14 1706
三种解决办法：[Element Warn][Form]model is required for validate to work! 方法1 该提示说的是 form表单需要一个绑定一个 对象(使用:model=“editform” 不能使用v-model=“editform”), 同时v-model=“multipleSelectionStudent” 的multipleSelec...
三分钟细数 el-form 表单校验的坑点，前车之鉴，可助你避坑
热门推荐
本博客纯属个人网络笔记，如对阁下有用，甚喜；否则，关掉即可，不喜勿喷。专心写代码，不做键盘侠！
10-12 1万+
Vue 的 el-form 提供了表单校验功能，通过 :rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。通过封装，让前端校验更方便。具体使用过程中，有几个容易出错的地方，本文来整理一下。每一个坑都是笔者亲自趟过的，写完本文后，以后应该不会再踏入相同的坑。...
vue动态绑定组件子父组件多表单验证功能的实现代码
08-27
Vue 动态绑定组件子父组件多表单验证功能的实现代码主要是使用 Vue 的核心功能组件来实现动态绑定组件，并使用自定义验证规则来实现子父组件之间的验证。这种方法可以解决前端项目中的冗余代码和变量定义的问题，并...
详解ElementUI之表单验证、数据绑定、路由跳转
08-30
ElementUI表单验证、数据绑定、路由跳转详解 ElementUI是一个基于Vue.js的组件库，为开发者提供了丰富的UI组件和功能强大的表单验证机制。本文将详细介绍ElementUI的表单验证、数据绑定、路由跳转的实现方法和原理...
Vue ElementUI之Form表单验证遇到的问题
12-09
第二个问题是关于多个弹出框的表单验证。每个弹出框的`ref`属性必须是唯一的，以便在调用验证方法时能正确地关联到相应的表单。例如，第一个弹出框的`ref='number'`，对应的保存按钮的点击事件应为`xxxxxx('number')...
在Vant的基础上实现添加表单验证框架的方法示例
12-01
综上所述，要在Vant基础上构建表单验证框架，我们需要选择合适的验证库，如vee-validate，并对其进行适当的配置和扩展，包括设置中文提示、适应Vant的UI风格、实现分组验证和动态验证功能。通过这些步骤，我们可以...
表单验证自定义验证规则和错误信息
06-30
在Web开发中，表单验证是必不可少的一部分...总之，自定义表单验证规则和错误信息能提升应用的用户体验，确保数据质量。通过结合前端和后端验证，以及利用现有的库和工具，开发者可以创建出高效、安全的表单验证系统。
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法_el-form-item 必填项校验
最新发布
2401_84182842的博客
04-12 2288
觉得这些内容对你有帮助，可以添加VX：vip204888 （备注大数据获取）**[外链图片转存中…(img-5bKrTOm7-1712864789725)]
element-ui:非v-model绑定的自身属性的form表单验证
webfullstack的博客
10-17 7071
场景还原:在el-form-item上绑定的验证并不是el-form-item里面的v-model,而是经过换算的值 code: &lt;el-form :model="dialogFeedback" :rules="dialogFeedback_rules" ref="dialogFeedback" :label-position="labelPositionRight" label-widt...
el-form/el-form-item表单验证
zhang_gt的博客
09-16 7988
el-form/el-form-item 表单验证
elementUI表单form内双向绑定失败
xiaojinglyd的博客
12-17 2307
环境： element-ui2.13.0，vue 2.6.10，vueCli3.0初始化 问题： form表单内部的表单控件双向绑定失效，表单控件不会显示选中项。如果单选，data内部会同步更新，但是表单控件不会显示已选项；多选时，data内部同步值很慢，只有最后选择的一项。此时当其他不关联表单控件变化时，有问题的表单控件可能会显示选中项，多选甚至会显示选中的多个，很诡异。 <templat...
elementUI中使用el-form-item时prop绑定多字段
heirui的专栏
09-06 6978
但如果只是这样做的话，label前面没有红色的星号，我看到很多人都是直接这样用的，但我比较执拗，查了一下elementUI文档，发现el-form-item标签有一个required属性，试了一下果然可以显示一个红色的星号，至此问题完美解决。严格来讲，使用el-form-item时，是无法使用prop绑定多个字段，但业务中的需求是各式各样的，总会遇到这种情况，那就要想办法去实现它，毕竟东西是死人，我们人，是活的，要活学活用。上图中省市区联动，还有经纬度，都是需要在同一行内，显示多个控件，并绑定多个字段的。
element-ui 的FormItem组件是如何进行绑定值校验的【源码解读】
vet_then_what的博客
11-09 2139
使用element-ui框架有两年了，涉及到el-form组件的校验，只是根据官网给的示例使用。el-form绑定model，绑定prop属性，内的表单绑定v-model。只要v-model绑定的属性与prop属性一致再加上各种校验规则，即可实现某个表单的校验。所以个人就下意识的以为一定要用v-model绑定某个值才能实现校验，在封装自定义组件时，就会下意识的用组件实现v-model绑定值的功能。但是有次在使用同事封装的组件时，他并不是使用的v-model绑定的，而是用:xxx.sync。
记一下vue element-ui form表单绑定数组遇到的坑
liux6687的博客
04-08 4420
先上一下效果图 其中商品可以一次性添加多个, 起初看到这个需求想的是循环创建多个el-form表单的, 但是写的时候发现如果循环多个表单就会有很多个ref, 表单效验就没法写。 我的解决方案是使用computed, 将一个数组拼成一个表单对象 computed: { formData: function() { const formData = {}; this.formDataArr.map((item, index) .
【无标题】el-form 校验失败原因分析
taohuacsdn的博客
10-12 673
el-form 校验
vue 自定义表单验证规则
08-29
Vue 提供了多种方式来自定义表单验证规则。下面是一种常见的方法： 首先，我们可以利用 Vue 的 Mixin 功能来定义全局的验证规则。可以创建一个名为 `validationMixin.js` 的文件，内容如下： ``` export default { methods: { // 自定义验证规则示例 customRule(value) { // 在这里编写验证逻辑，返回 true 或 false 表示验证通过与否 // 如果验证失败，可以通过抛出一个错误的方式来显示错误信息 if (/* 验证逻辑 */) { throw new Error('输入不合法') } else { return true } } } } ``` 然后，在需要使用验证规则的组件中，可以导入该 Mixin，并将其添加到组件的 `mixins` 属性中，如下所示： ``` <template> <div> <input v-model="inputValue" @blur="validateInput"> <p>{{ errorMessage }}</p> </div> </template> <script> import validationMixin from './validationMixin.js' export default { mixins: [validationMixin], data() { return { inputValue: '', errorMessage: '' } }, methods: { validateInput() { try { // 调用自定义验证规则 this.customRule(this.inputValue) this.errorMessage = '' } catch (e) { this.errorMessage = e.message } } } } </script> ``` 在上述组件的模板中，我们使用 `v-model` 指令来绑定输入框的值，并在输入框失去焦点时调用 `@blur` 事件来触发验证逻辑。在验证逻辑中，我们调用了之前定义的 `customRule` 方法，并根据验证结果来展示相应的错误信息。 这样，我们就可以在 Vue 中利用 Mixin 来自定义表单验证规则。在具体的验证规则中，可以根据需求编写相应的逻辑，根据验证结果来显示错误信息或者进行其他操作。除了 Mixin，还可以使用 Vue 的自定义指令等其他方式来实现表单验证规则的自定义。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值