温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue动态添加表单validateField验证功能如何实现

发布时间:2023-04-07 11:56:43 来源:亿速云 阅读:274 作者:iii 栏目:开发技术

今天小编给大家分享一下vue动态添加表单validateField验证功能如何实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

vue动态添加表单validateField验证,代码如下所示:

<template>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <div v-for="(input, index) in inputs" :key="index">
        <el-form-item :label="'Name ' + (index + 1)" :prop="'name' + index">
          <el-input v-model="input.name" @blur="validateName(index)"></el-input>
        </el-form-item>
        <el-form-item :label="'Age ' + (index + 1)" :prop="'age' + index">
          <el-input v-model.number="input.age" @blur="validateAge(index)"></el-input>
        </el-form-item>
      </div>
      <el-button type="primary" @click="addInput">Add input</el-button>
      <el-button type="primary" @click="submitForm">Submit</el-button>
    </el-form>
  </template>

  <script>
  export default {
    data() {
      return {
        form: {},
        inputs: [{name: '',age: ''}],
        rules: {
            name0: { required: true, pattern: /^[A-Za-z]+$/, message: 'Name can only contain letters', trigger: 'blur' },
            age0: { required: true, pattern: /^\d+$/, message: 'Age can only contain numbers', trigger: 'blur' },
        }
      }
    },
    methods: {
      addInput() {
        const index = this.inputs.length
        this.inputs.push({ name: '', age: '' })
        this.$set(this.form, `name${index}`, '')
        this.$set(this.form, `age${index}`, '')
        this.$set(this.rules, `name${index}`, { required: true, pattern: /^[A-Za-z]+$/, message: 'Name can only contain letters', trigger: 'blur' })
        this.$set(this.rules, `age${index}`, { required: true, pattern: /^\d+$/, message: 'Age can only contain numbers', trigger: 'blur' })
      },
      validateName(index) {
        this.$refs.form.validateField(`name${index}`)
      },
      validateAge(index) {
        this.$refs.form.validateField(`age${index}`)
      },
      submitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            // submit form
          } else {
            console.log('validation failed')
          }
        })
      }
    }
  }
  </script>

可以使用 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 的校验机制,并显示相应的错误提示信息。

补充:vue动态表单添加表单验证

            <el-form ref="conditionListForm" :rules="ConditionListRules" :model="scope.row.conditionListForm">
              <el-table
                ref="conditionListDia"
                :data="scope.row.conditionListForm.conditionListDia"
                border
                :header-cell-
                
                size="mini"
              >
                <el-table-column label="限制条件名称" align="center">
                  <el-table-column
                    label="条件组合"
                    align="center"
                    size="mini"
                    min-width="40"
                  >
                    <template slot-scope="scopeChild">
                      <el-form-item :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionRelation' " :rules="ConditionListRules.conditionRelation">
                        <el-select
                          v-model="scopeChild.row.conditionRelation"
                          :disabled="scope.row.conditionListForm.conditionListDia.length > 1 || scope.row.id > 0"
                          size="mini"
                          placeholder="请选择"
                          clearable
                          
                          @change="showconditionRelation(scopeChild.row.conditionRelation)"
                        >
                          <el-option
                            v-for="item in compositionConditionList"
                            :key="item.key"
                            :disabled="item.baseDataStatus==='0'"
                            :label="item.label"
                            :value="item.key"
                          />
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="条件分组"
                    size="mini"
                    align="center"
                    min-width="30"
                  >
                    <template slot-scope="scopeChild">
                      <el-form-item :prop=" 'conditionListDia[' + scopeChild.$index + '].medalConditionClassname' " :rules="ConditionListRules.medalConditionClassname">
                        <el-select
                          v-model="scopeChild.row.medalConditionClassname"
                          :disabled="scope.row.id > 0"
                          size="mini"
                          placeholder="请选择"
                          clearable
                          
                          @change="defDataClick(scopeChild)"
                        >
                          <el-option
                            v-for="item in fatherNameList"
                            :key="item.id"
                            :label="item.medalConditionClassname"
                            :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="条件"
                    size="mini"
                    align="center"
                    min-width="40"
                  >
                    <template slot-scope="scopeChild">
                      <el-form-item :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionId' " :rules="ConditionListRules.conditionId">
                        <el-select
                          v-model="scopeChild.row.conditionId"
                          size="mini"
                          :disabled="scope.row.id > 0"
                          placeholder="请选择"
                          clearable
                          
                          @change="getRelationship(scopeChild.row.conditionId,scopeChild.row.medalConditionClassnameList,scopeChild.row)"
                        >
                          <el-option
                            v-for="item in scopeChild.row.medalConditionClassnameList"
                            :key="item.defId"
                            :label="item.medalConditionName"
                            :value="item.defId"
                          />
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column
                  label="运算关系"
                  align="center"
                  size="mini"
                  min-width="50"
                >
                  <template slot-scope="scopeChild">
                    <el-form-item :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionOperation' " :rules="ConditionListRules.conditionOperation">
                      <el-select
                        v-model="scopeChild.row.conditionOperation"
                        size="mini"
                        placeholder="请选择"
                        :disabled="scope.row.id > 0"
                        clearable
                        
                        @change="conditionOperationEmpty(scopeChild.row)"
                      >
                        <el-option
                          v-for="item in scopeChild.row.conditionOperationValueList"
                          :key="item.key"
                          :disabled="item.baseDataStatus==='0'"
                          :label="item.value"
                          :value="item.key"
                        />
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  label="值"
                  align="center"
                  size="mini"
                  min-width="120"
                >
                  <template slot-scope="scopeChild">
                    <el-form-item v-if="scopeChild.row.medalConditionControlType === '0'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionTrueValueList' " :rules="ConditionListRules.conditionTrueValueList">
                      <el-select
                        v-model="scopeChild.row.conditionTrueValueList"
                        multiple
                        
                        size="mini"
                        clearable
                        placeholder="请选择"
                        @change="conditionValueEmpty(scopeChild)"
                      >
                        <el-option
                          v-for="item in scopeChild.row.conditionValueList"
                          :key="item.value"
                          :label="item.key"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item v-if="scopeChild.row.medalConditionControlType == '1'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionValue' " :rules="ConditionListRules.conditionValue">
                      <el-input
                        v-model="scopeChild.row.conditionValue"
                        clearable
                        placeholder="请输入"
                        align="center"
                        
                        size="mini"
                        maxlength="60"
                        show-word-limit
                        @blur="conditionValueEmpty(scopeChild)"
                      />
                    </el-form-item>
                    <el-form-item v-if="scopeChild.row.medalConditionControlType == '2'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionTrueValueList' " :rules="ConditionListRules.conditionTrueValueList">
                      <el-date-picker
                        v-model="scopeChild.row.conditionTrueValueList"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        size="mini"
                        end-placeholder="结束日期"
                        
                      />
                    </el-form-item>
                    <el-form-item v-if="scopeChild.row.medalConditionControlType === '3'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionValue' " :rules="ConditionListRules.conditionValue">
                      <el-select
                        v-model="scopeChild.row.conditionValue"
                        
                        size="mini"
                        clearable
                        placeholder="请选择"
                        @change="conditionValueEmpty(scopeChild)"
                      >
                        <el-option
                          v-for="item in scopeChild.row.conditionValueList"
                          :key="item.value"
                          :label="item.key"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item v-if="scopeChild.row.medalConditionControlType === '4'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionTrueValueList' " :rules="ConditionListRules.conditionTrueValueList">
                      <el-time-picker
                        v-model="scopeChild.row.conditionTrueValueList"
                        
                        size="mini"
                        is-range
                        clearable
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="选择时间范围"
                        format="HH:mm"
                        @change="conditionValueEmpty(scopeChild)"
                      />
                    </el-form-item>
                    <el-form-item v-if="scopeChild.row.medalConditionControlType == '5'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionValue' " :rules="ConditionListRules.conditionValue">
                      <el-input-number v-model="scopeChild.row.conditionValue" size="mini" :min="0" label="" @change="conditionValueEmpty(scope)" />
                    </el-form-item>

                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  min-width="50"
                >
                  <template slot-scope="scopeChild">
                    <el-button type="text" :disabled="scope.row.id > 0" @click="delCondition(scope.$index,scope.row.conditionListForm.conditionListDia,scopeChild.row,scopeChild.$index)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
 ConditionListRules: {
    conditionRelation: [
      { required: true, message: '条件组合不能为空', trigger: 'change' }
    ],
    medalConditionClassname: [
      { required: true, message: '条件分组不能为空', trigger: 'change' }
    ],
    conditionId: [
      { required: true, message: '条件不能为空', trigger: 'change' }
    ],
    conditionOperation: [
      { required: true, message: '运算关系不能为空', trigger: 'change' }
    ],
    conditionValue: [
      { required: true, message: '值不能为空', trigger: 'change' }
    ],
    conditionTrueValueList: [
      { required: true, message: '值不能为空', trigger: 'change' }
    ]
  },

主要就是prop的问题,prop要对应到数据。

以上就是“vue动态添加表单validateField验证功能如何实现”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI