element校验from表单单项里有两个Input

最新推荐文章于 2024-04-08 08:55:48 发布
最新推荐文章于 2024-04-08 08:55:48 发布
阅读量2.4k 收藏 6
点赞数 3
文章标签： vue.js 前端 javascript elementui es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yokeiz/article/details/127809598
版权

最近在写项目的时候发现element from 表单中有一项是需要两个Input，但是官方文档里面说好是绑定一个啊，这就犯难了，好在最终尝试出来了，我分享一下成果。

正常这都是需要校验的


解决方法也很简单，就是在里面再包一层，外层el-form-item 加required

这样去校验就成功了，亲测有效  element和element-plus都一样的写法，快试试吧

 

 

Yokeiz
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue使用Element组件时v-for循环里的表单项验证方法
08-27
Vue 使用 Element 组件时 v-for 循环里的表单项验证方法 对 Vue 使用 Element 组件时 v-for 循环里的表单项验证方法进行详细介绍。主要讲解了如何在使用 Element 组件时处理 v-for 循环里的表单项验证问题。 首先...
Vue Element校验validate的实例
10-14
在表单验证方面，Element UI 提供了一个名为 `validate` 的功能，它允许开发者轻松地对整个表单或单个表单项进行验证。 `validate` 方法是 Element UI 表单验证的核心，它主要用于检查表单中的所有字段是否满足预设...
form表单中的两个input最大值最小值联合校验。
wwwbaidusss的博客
01-11 1465
form表单联合校验
el-form组件实现一个el-form-item中包含多个输入框的表单校验
weixin_55115202的博客
06-25 6692
【代码】el-form组件实现一个el-form-item中包含多个输入框的表单校验。
el-table-column 有两个input怎么校验
m0_64707449的博客
04-08 470
进行数据验证时，可以通过Vue的双向数据绑定和Element UI的表单验证机制来实现。中输入内容并移出焦点，对应的行会进行名称的验证。如果输入不符合规则，会显示错误信息。，以便使用表单验证功能。添加不同的验证规则，并在。来验证特定行的特定字段。在这个示例中，每当你在。来创建双向数据绑定。
给循环el-form表单添加校验规则（el-form-item内部有多个el-input框）
qq_43434290的博客
05-27 2387
el-form-item内部有多个el-input添加表单规则校验方式
对elementui中一个el-form-item中包含多个输入框或下拉框等的表单验证处理问题
qq_45030898的博客
09-07 5871
对elementui中一个el-form-item中包含多个输入框或下拉框等的表单验证处理问题
vue 一个el-form-item 绑定多个 input 或者select 校验
x_nweBorder01k的博客
08-17 3302
vue 一个el-form-item 绑定多个 input 或者select 校验
一个formitem多个input验证
weixin_44365083的博客
12-22 987
通过-form-model-item嵌套来实现的。
Vue element-ui父组件控制子组件的表单校验操作
10-15
当这两个条件都满足时，Element-UI的表单验证就能正常工作，能够根据设定的规则对用户输入进行验证，确保数据的完整性和准确性。 总的来说，Vue Element-UI的父组件控制子组件的表单校验操作主要是通过`ref`属性...
element 结合vue 在表单验证时有值却提示错误的解决办法
08-28
Element 结合 Vue 在表单验证时有值却提示错误的解决办法 Element 是一个功能强大的前端 UI 框架，结合 Vue.js 可以快速开发复杂的 Web 应用程序。然而，在使用 Element 结合 Vue 进行表单验证时，有时可能会遇到...
vue elementUI 表单校验功能之数组多层嵌套
10-16
在 Vue Element UI 中，`el-form` 和 `el-form-item` 组件用于创建表单和表单项，并且通过 `v-model` 和 `prop` 属性进行数据绑定和验证。然而，当表单数据涉及到数组内的对象，如上述示例所示： ```json { "title...
Element UI Demo
04-24
Element UI 是一个基于 Vue.js 的组件库，专为开发高效、简洁、易用的 Web...同时，这也将帮助你掌握动态表单和表单验证这两个重要的前端开发技能。对于开发者来说，理解并熟练运用这些技术是构建现代 Web 应用的基础。
基于VueElementUI快速创建生成表单进行数据校验获取表单数据
08-10
例如，如果你有一个JSON对象，描述了表单的结构，可以遍历这个对象来生成对应的表单组件： ```js data() { return { formFields: [ { type: "input", label: "姓名", prop: "name", rules: [{ required: true }]...
jQuery表单校验插件validator使用方法详解
10-15
确保在页面中正确引入这两个文件。 **2. 基本使用** 要使用Validator，首先选择需要验证的表单元素，然后调用`.validate()`方法，并在其内定义`rules`和`messages`选项。 - `rules`：在这个对象中，为每个需要验证...
element ui里dialog关闭后清除验证条件方法
08-27
在上面的代码中，我们使用 `el-form` 组件来定义一个表单，并使用 `el-form-item` 组件来定义一个表单项。在 `el-form-item` 组件中，我们使用 `prop` 属性来指定验证规则，并使用 `v-model` 指令来绑定表单项的值。...
elementUI中使用el-form-item时校验多个字段
qq_44096635的博客
01-12 2114
elementUI中使用el-form-item时校验多个字段。
el-form-item内多个输入框的 validate 校验
S‘blog
03-02 4116
表单中复合型输入框， 都要满足必填验证规则 。 <el-form-item label="申请贷款银行" prop="bank"> <el-input placeholder="请填写分行和支行信息" v-model="formData.bank2" class="input-with-select" :style="{width: '100%'}"> <el-select v-model="formData.bank1" slot="prepend" pla
element UI 中 el-form 表单包含多个 el-input 时的校验方法
热门推荐
SUPPER493910的博客
12-03 1万+
这一点element-ui真是有点死板，我是这样解决的，有两个情况，prop可以只绑定第一个input的，第二个input写上ref属性，验证的rules中写一个方法，这个方法验证第一个input框的同时，通过 this.$refs.xxx.value的形式获取第二个input框值，只要这两个input框中存在有问题的情况则直接返回error。当然这个方法不能算优雅，我也是分享下我的经验，有更好的...
element ui 动态添加input 的表单校验
最新发布
06-14
Element UI 提供了强大的表单组件和灵活的功能，包括动态添加输入字段的表单验证。当你需要在运行时根据用户交互或数据变化动态生成表单元素并进行校验时，可以使用 Vue.js 的响应式系统配合 Element UI 的 `el-form` 和 `el-form-item` 组件以及自定义验证规则。 以下是一个基本的步骤： 1. **Vue组件结构**： 使用 `v-for` 指令遍历动态数据，并为每个动态生成的 input 创建一个 `el-form-item`。 ```html <template> <el-form :model="form" :inline="true"> <el-row v-for="(item, index) in dynamicItems"> <el-col :span="6"> <el-form-item :key="index" :label="item.label"> <el-input v-model="item.value"></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-button @click="addFormItem">Add Item</el-button> <el-button @click="submitForm">Submit</el-button> </el-col> </el-row> </el-form> </template> ``` 2. **数据绑定和方法**： 定义 `dynamicItems` 数组存储动态生成的表单项，`form` 对象用于存储整个表单的数据。`addFormItem` 和 `submitForm` 方法处理相应的事件。 ```js <script> export default { data() { return { form: {}, dynamicItems: [{ label: 'Dynamic Input', value: '' }], }; }, methods: { addFormItem() { this.dynamicItems.push({ label: 'New Input', value: '' }); }, submitForm() { // 这里可以使用 validate 方法进行表单验证，确保所有输入都有效 this.$refs.form.validate((valid) => { if (valid) { // 提交表单逻辑 } else { console.log('请确保所有字段已填写'); } }); }, }, }; </script> ``` 3. **表单验证**： Element UI 的 `el-form` 元素有一个 `ref` 属性，`validate` 方法会检查所有关联的表单项是否通过验证。你可以在 `submitForm` 中调用这个方法，然后根据返回的结果决定是否提交表单。 注意，对于动态添加的表单项，你需要确保每个 `el-input` 都有对应的 `v-model`，并且根据实际需求定制验证规则。例如，你可能希望对每个输入项设置特定的校验规则，如必填、长度限制等。可以使用 Element UI 的内置验证规则，也可以自定义 `validateHandler` 属性提供自定义验证函数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值