今天小编给大家分享一下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验证功能如何实现”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。