vue动态添加表单validateField验证功能实现
更新时间：2023年04月07日 10:06:53 作者：totau
这篇文章主要介绍了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-style="background"
style="width: 100%"
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
style="float:left;width:95%"
@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
style="float:left;width:95%"
@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
style="float:left;width:95%"
@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
style="float:left;width:95%"
@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
style="float:left;width:95%"
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"
style="float:left;"
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="结束日期"
style="float:left;width:95%"
/>
</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"
style="float:left;width:95%"
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"
style="float:left;width:95%"
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验证的文章就介绍到这了,更多相关vue动态添加表单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在 Vue3 中，有许多与响应式相关的函数，例如 toRef、toRefs、isRef、unref 等等,本文将详细介绍这些函数的用法，让我们在实际开发中知道应该使用哪些 API 并能够熟练地回答面试官的相关问题2023-08-08
这篇文章主要介绍了Vite结合Vue删除指定环境的console.log问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了VueJs打包之后遇到的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue实现多个数组合并方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家详细介绍了vue如何使用原生高德地图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
vue+relation-graph绘制关系图实用组件操作方法
这篇文章主要介绍了vue+relation-graph绘制关系图实用组件操作方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Vue privide 和inject 依赖注入的用法,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue3响应式原理之Ref用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了vue axios登录请求拦截器，判断是否登录超时，或对请求结果做一个统一处理的教程详解,需要的朋友可以参考下2018-04-04
这篇文章主要想来和大家一起探讨一下Vue为什么需要同时使用Ref和Reactive，文中的示例代码简洁易懂，感兴趣的小伙伴可以跟随小编一起了解一下2023-08-08
最新评论