基于Vue+elementUI實現(xiàn)動態(tài)表單的校驗功能(根據(jù)條件動態(tài)切換校驗格式)
前言
開發(fā)過程中遇到了一個需求，根據(jù)用戶選擇的聯(lián)系方式，動態(tài)改變輸入框的檢驗條件，并且整個表單是可以增加的
在線訪問:動態(tài)表單校驗
github(歡迎star): https://github.com/Mrblackant. ..
思考幾個問題
1.整個表單是可新增的，所以要遍歷生成；
2.聯(lián)系方式(手機/座機)的切換，是要切換后邊不同類型輸入框還是只改變校驗規(guī)則(本篇是動態(tài)改變校驗規(guī)則)
實現(xiàn)
1.elementui的form表單實現(xiàn)校驗的時候要給當前el-form-item加上prop屬性,因為我們是遍歷生成的表單，那我們的寫法就要寫成:
重點在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.因為我選擇了根據(jù)類型動態(tài)修改校驗規(guī)則，而不是切換不同類型的輸入框,
注意看下上文代碼中的ref和rules,當類型切換時，對應的:rules=k.rules對應的規(guī)則也會進行修改,:ref屬性是為了切換聯(lián)系方式類型時，先清除掉之前的提示。
看下不同類型的校驗規(guī)則,統(tǒng)一的先放到一個地方：
inputRules: {//設置好需要的校驗規(guī)則
telephone: { pattern: /^1[3-9]\d{9}$/, message: '手機號格式錯誤', trigger: 'blur' },
phone: { pattern: /^\d{10,12}$/, message: '座機號格式錯誤', trigger: 'blur' },
QQ: { pattern: /^[1-9][0-9]{4,14}$/, message: 'QQ格式錯誤', 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: '郵箱格式錯誤', trigger: 'blur' }
},
3.如果你的聯(lián)系方式的值都是必填的，可以先寫一個統(tǒng)一的必填校驗,省的在步驟2代碼里重復寫
const baseRule = [
{ required: true, message: '請?zhí)顚懧?lián)系方式', trigger: 'blur' }
]
然后等切換校驗類型的時候，把必填校驗baseRule連接起來:
// 給表單加上新的校驗 this.formData.lists[index].rules = [this.inputRules[data]].concat(baseRule)
動態(tài)表單校驗、動態(tài)校驗規(guī)則這塊沒有太難的地方，就是有時候會被繞暈，所以拿出來記錄一下，大家有更好的方案歡迎指出
總結(jié)
以上所述是小編給大家介紹的基于Vue+elementUI實現(xiàn)動態(tài)表單的校驗功能(根據(jù)條件動態(tài)切換校驗格式)，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
今天小編就為大家分享一篇vue h5移動端禁止縮放代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了Vue-Router使用prams路由傳參失效,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-08-08
vue-cli中vue本地實現(xiàn)跨域調(diào)試接口
這篇文章主要介紹了vue-cli中vue本地實現(xiàn)跨域調(diào)試接口,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
vue 是一個 漸進式的javascript框架，腳手架是一個通用概念，幫助搭建項目的工具，本文以vue2為例結(jié)合實例代碼給大家詳細講解，感興趣的朋友跟隨小編一起看看吧2022-12-12
這篇文章主要為大家介紹了vue插件及修改ip啟動端口的解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04
Vue filter 過濾當前時間 實現(xiàn)實時更新效果
這篇文章主要介紹了Vue filter 過濾當前時間 實現(xiàn)實時更新效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
vue中根據(jù)時間戳判斷對應的時間(今天 昨天 前天)
這篇文章主要介紹了vue中 根據(jù)時間戳 判斷對應的時間（今天 昨天 前天）,需要的朋友可以參考下2019-12-12
Nuxt3項目搭建過程(Nuxt3+element-plus+scss詳細步驟)
這篇文章主要介紹了Nuxt3項目搭建（Nuxt3+element-plus+scss詳細步驟）,本次記錄一次使用Nuxt3搭建前端項目的過程，內(nèi)容包含Nuxt3的安裝，基于Vite腳手架（默認）構(gòu)建的vue3項目，element-plus的安裝配置，scss的安裝，目錄結(jié)構(gòu)的創(chuàng)建和解釋，需要的朋友可以參考下2022-12-12
vue 根據(jù)數(shù)組中某一項的值進行排序的方法
這篇文章主要介紹了vue 根據(jù)數(shù)組中某一項的值進行排序的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家介紹了Vue3中的computed和watch源碼解讀分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03