vue動(dòng)態(tài)添加表單validateField驗(yàn)證功能實(shí)現(xiàn)
更新時(shí)間：2023年04月07日 10:06:53 作者：totau
這篇文章主要介紹了vue動(dòng)態(tài)添加表單validateField驗(yàn)證功能實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
vue動(dòng)態(tài)添加表單validateField驗(yàn)證，代碼如下所示：
<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 的表單組件結(jié)合 Vue 的動(dòng)態(tài)組件來實(shí)現(xiàn)動(dòng)態(tài)添加多組輸入框，并對(duì)每個(gè)輸入框進(jìn)行校驗(yàn)。Element UI 提供了很多內(nèi)置的校驗(yàn)規(guī)則和提示信息，可以方便地應(yīng)用到表單中。
首先，我們需要在 Vue 實(shí)例中聲明一個(gè) inputs 數(shù)組來存儲(chǔ)每個(gè)輸入組的數(shù)據(jù)。在添加輸入組時(shí)，我們只需要向 inputs 數(shù)組中添加一個(gè)新的對(duì)象即可。
在模板中，我們使用 Element UI 的表單組件來渲染輸入框，并使用 v-for 指令循環(huán)渲染多組輸入框。在每個(gè)輸入框中，我們使用 v-model 指令將輸入值綁定到 inputs 數(shù)組中的數(shù)據(jù)屬性上。對(duì)于 name 和 age 輸入框，我們使用 pattern 規(guī)則來進(jìn)行校驗(yàn)，并在 rules 對(duì)象中提供了相應(yīng)的錯(cuò)誤提示信息。在 checkNameInput 和 checkAgeInput 方法中，我們調(diào)用 $refs.form.validateField 方法來手動(dòng)觸發(fā)校驗(yàn)，并將當(dāng)前輸入對(duì)象作為參數(shù)傳遞進(jìn)去。
最后，我們需要在 Vue 實(shí)例中聲明一個(gè) form 對(duì)象來維護(hù)表單數(shù)據(jù)，并將 rules 對(duì)象傳遞給 el-form 組件的 rules 屬性。這樣，每次輸入框的值發(fā)生變化時(shí)，就會(huì)自動(dòng)觸發(fā) Element UI 的校驗(yàn)機(jī)制，并顯示相應(yīng)的錯(cuò)誤提示信息。
補(bǔ)充：vue動(dòng)態(tài)表單添加表單驗(yàn)證
<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="請(qǐng)選擇"
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="請(qǐng)選擇"
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="請(qǐng)選擇"
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="運(yùn)算關(guān)系"
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="請(qǐng)選擇"
: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="請(qǐng)選擇"
@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="請(qǐng)輸入"
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="結(jié)束日期"
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="請(qǐng)選擇"
@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="開始時(shí)間"
end-placeholder="結(jié)束時(shí)間"
placeholder="選擇時(shí)間范圍"
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: '運(yùn)算關(guān)系不能為空', trigger: 'change' }
],
conditionValue: [
{ required: true, message: '值不能為空', trigger: 'change' }
],
conditionTrueValueList: [
{ required: true, message: '值不能為空', trigger: 'change' }
]
},
主要就是prop的問題，prop要對(duì)應(yīng)到數(shù)據(jù)。
到此這篇關(guān)于vue動(dòng)態(tài)添加表單validateField驗(yàn)證的文章就介紹到這了,更多相關(guān)vue動(dòng)態(tài)添加表單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在?Vue3?中，有許多與響應(yīng)式相關(guān)的函數(shù)，例如?toRef、toRefs、isRef、unref?等等,本文將詳細(xì)介紹這些函數(shù)的用法，讓我們?cè)趯?shí)際開發(fā)中知道應(yīng)該使用哪些?API?并能夠熟練地回答面試官的相關(guān)問題2023-08-08
Vite結(jié)合Vue刪除指定環(huán)境的console.log問題
這篇文章主要介紹了Vite結(jié)合Vue刪除指定環(huán)境的console.log問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了VueJs打包之后遇到的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue實(shí)現(xiàn)多個(gè)數(shù)組合并
這篇文章主要介紹了vue實(shí)現(xiàn)多個(gè)數(shù)組合并方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue如何使用原生高德地圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue+relation-graph繪制關(guān)系圖實(shí)用組件操作方法
這篇文章主要介紹了vue+relation-graph繪制關(guān)系圖實(shí)用組件操作方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue?privide?和inject?依賴注入的用法,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue3響應(yīng)式原理之Ref用法及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue axios登錄請(qǐng)求攔截器，判斷是否登錄超時(shí)，或?qū)φ?qǐng)求結(jié)果做一個(gè)統(tǒng)一處理的教程詳解,需要的朋友可以參考下2018-04-04
淺析Vue為什么需要同時(shí)使用Ref和Reactive
這篇文章主要想來和大家一起探討一下Vue為什么需要同時(shí)使用Ref和Reactive，文中的示例代碼簡潔易懂，感興趣的小伙伴可以跟隨小編一起了解一下2023-08-08