草庐IT

vue动态添加表单validateField验证

totau 2023-04-11 原文 

 1   <template>
 2     <el-form ref="form" :model="form" :rules="rules" label-width="100px">
 3       <div v-for="(input, index) in inputs" :key="index">
 4         <el-form-item :label="'Name ' + (index + 1)" :prop="'name' + index">
 5           <el-input v-model="input.name" @blur="validateName(index)"></el-input>
 6         </el-form-item>
 7         <el-form-item :label="'Age ' + (index + 1)" :prop="'age' + index">
 8           <el-input v-model.number="input.age" @blur="validateAge(index)"></el-input>
 9         </el-form-item>
10       </div>
11       <el-button type="primary" @click="addInput">Add input</el-button>
12       <el-button type="primary" @click="submitForm">Submit</el-button>
13     </el-form>
14   </template>
15   
16   <script>
17   export default {
18     data() {
19       return {
20         form: {},
21         inputs: [{name: '',age: ''}],
22         rules: {
23             name0: { required: true, pattern: /^[A-Za-z]+$/, message: 'Name can only contain letters', trigger: 'blur' },
24             age0: { required: true, pattern: /^\d+$/, message: 'Age can only contain numbers', trigger: 'blur' },
25         }
26       }
27     },
28     methods: {
29       addInput() {
30         const index = this.inputs.length
31         this.inputs.push({ name: '', age: '' })
32         this.$set(this.form, `name${index}`, '')
33         this.$set(this.form, `age${index}`, '')
34         this.$set(this.rules, `name${index}`, { required: true, pattern: /^[A-Za-z]+$/, message: 'Name can only contain letters', trigger: 'blur' })
35         this.$set(this.rules, `age${index}`, { required: true, pattern: /^\d+$/, message: 'Age can only contain numbers', trigger: 'blur' })
36       },
37       validateName(index) {
38         this.$refs.form.validateField(`name${index}`)
39       },
40       validateAge(index) {
41         this.$refs.form.validateField(`age${index}`)
42       },
43       submitForm() {
44         this.$refs.form.validate(valid => {
45           if (valid) {
46             // submit form
47           } else {
48             console.log('validation failed')
49           }
50         })
51       }
52     }
53   }
54   </script>
55

 

可以使用 Element UI 的表单组件结合 Vue 的动态组件来实现动态添加多组输入框，并对每个输入框进行校验。Element UI 提供了很多内置的校验规则和提示信息，可以方便地应用到表单中。

首先，我们需要在 Vue 实例中声明一个 inputs 数组来存储每个输入组的数据。在添加输入组时，我们只需要向 inputs 数组中添加一个新的对象即可。

在模板中，我们使用 Element UI 的表单组件来渲染输入框，并使用 v-for 指令循环渲染多组输入框。在每个输入框中，我们使用 v-model 指令将输入值绑定到 inputs 数组中的数据属性上。对于 name 和 age 输入框，我们使用 pattern 规则来进行校验，并在 rules 对象中提供了相应的错误提示信息。在 checkNameInput 和 checkAgeInput 方法中，我们调用 $refs.form.validateField 方法来手动触发校验，并将当前输入对象作为参数传递进去。

最后，我们需要在 Vue 实例中声明一个 form 对象来维护表单数据，并将 rules 对象传递给 el-form 组件的 rules 属性。这样，每次输入框的值发生变化时，就会自动触发 Element UI 的校验机制，并显示相应的错误提示信息。

validateFieldvuequotspangt

有关vue动态添加表单validateField验证的更多相关文章

  1. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  2. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  3. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  4. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  5. ruby-on-rails - 如果为空或不验证数值，则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初，我将所有3列的:default=>0放在表格中，但我不想要这样，因为它已经填充了字段，我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  6. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  7. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  8. ruby - 续集在添加关联时访问many_to_many连接表 - 2

    我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

  9. ruby-on-rails - 如何将验证与模型分开 - 2

    我有一些非常大的模型，我必须将它们迁移到最新版本的Rails。这些模型有相当多的验证(User有大约50个验证)。是否可以将所有这些验证移动到另一个文件中？说app/models/validations/user_validations.rb。如果可以，有人可以提供示例吗？ 最佳答案 您可以为此使用关注点:#app/models/validations/user_validations.rbrequire'active_support/concern'moduleUserValidationsextendActiveSupport:

  10. ruby-on-rails - 跳过状态机方法的所有验证 - 2

    当我的预订模型通过rake任务在状态机上转换时，我试图找出如何跳过对ActiveRecord对象的特定实例的验证。我想在reservation.close时跳过所有验证!叫做。希望调用reservation.close!(:validate=>false)之类的东西。仅供引用，我们正在使用https://github.com/pluginaweek/state_machine用于状态机。这是我的预订模型的示例。classReservation["requested","negotiating","approved"])}state_machine:initial=>'requested

随机推荐