快捷導(dǎo)航

基于Vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)表單的校驗(yàn)功能(根據(jù)條件動(dòng)態(tài)切換校驗(yàn)格式)

更新時(shí)間：2019年04月04日 15:08:45 作者：大師兄

這篇文章主要介紹了Vue+elementUI的動(dòng)態(tài)表單的校驗(yàn)(根據(jù)條件動(dòng)態(tài)切換校驗(yàn)格式),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前言

開(kāi)發(fā)過(guò)程中遇到了一個(gè)需求，根據(jù)用戶選擇的聯(lián)系方式，動(dòng)態(tài)改變輸入框的檢驗(yàn)條件，并且整個(gè)表單是可以增加的

在線訪問(wèn):動(dòng)態(tài)表單校驗(yàn)

github(歡迎star): https://github.com/Mrblackant. ..

思考幾個(gè)問(wèn)題

1.整個(gè)表單是可新增的，所以要遍歷生成；

2.聯(lián)系方式(手機(jī)/座機(jī))的切換，是要切換后邊不同類(lèi)型輸入框還是只改變校驗(yàn)規(guī)則(本篇是動(dòng)態(tài)改變校驗(yàn)規(guī)則)

實(shí)現(xiàn)

1.elementui的form表單實(shí)現(xiàn)校驗(yàn)的時(shí)候要給當(dāng)前el-form-item加上prop屬性,因?yàn)槲覀兪潜闅v生成的表單，那我們的寫(xiě)法就要寫(xiě)成:

重點(diǎn)在prop屬性

<template v-for="(k,index) in formData.lists">
 <el-form-item
 :ref="index+'concatValue'"
 :prop="'lists.' + index +'.concatValue'"
 :rules="k.rules">
 <el-input v-model="k.concatValue"></el-input>
 </el-form-item>
</template>

2.因?yàn)槲疫x擇了根據(jù)類(lèi)型動(dòng)態(tài)修改校驗(yàn)規(guī)則，而不是切換不同類(lèi)型的輸入框,

注意看下上文代碼中的ref和rules,當(dāng)類(lèi)型切換時(shí)，對(duì)應(yīng)的:rules=k.rules對(duì)應(yīng)的規(guī)則也會(huì)進(jìn)行修改,:ref屬性是為了切換聯(lián)系方式類(lèi)型時(shí)，先清除掉之前的提示。

看下不同類(lèi)型的校驗(yàn)規(guī)則,統(tǒng)一的先放到一個(gè)地方：

 inputRules: {//設(shè)置好需要的校驗(yàn)規(guī)則
  telephone: { pattern: /^1[3-9]\d{9}$/, message: '手機(jī)號(hào)格式錯(cuò)誤', trigger: 'blur' },
  phone: { pattern: /^\d{10,12}$/, message: '座機(jī)號(hào)格式錯(cuò)誤', trigger: 'blur' },
  QQ: { pattern: /^[1-9][0-9]{4,14}$/, message: 'QQ格式錯(cuò)誤', trigger: 'blur' },
  mail: { pattern: /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/, message: '郵箱格式錯(cuò)誤', trigger: 'blur' }
  },

3.如果你的聯(lián)系方式的值都是必填的，可以先寫(xiě)一個(gè)統(tǒng)一的必填校驗(yàn),省的在步驟2代碼里重復(fù)寫(xiě)

const baseRule = [
 { required: true, message: '請(qǐng)?zhí)顚?xiě)聯(lián)系方式', trigger: 'blur' }
]

然后等切換校驗(yàn)類(lèi)型的時(shí)候，把必填校驗(yàn)baseRule連接起來(lái):

 // 給表單加上新的校驗(yàn)
  this.formData.lists[index].rules = [this.inputRules[data]].concat(baseRule)

動(dòng)態(tài)表單校驗(yàn)、動(dòng)態(tài)校驗(yàn)規(guī)則這塊沒(méi)有太難的地方，就是有時(shí)候會(huì)被繞暈，所以拿出來(lái)記錄一下，大家有更好的方案歡迎指出

總結(jié)

以上所述是小編給大家介紹的基于Vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)表單的校驗(yàn)功能(根據(jù)條件動(dòng)態(tài)切換校驗(yàn)格式)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章: