前言

開發過程中遇到了一個需求，根據用戶選擇的聯系方式，動態改變輸入框的檢驗條件，并且整個表單是可以增加的

在線訪問:動態表單校驗

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

思考幾個問題

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

2.聯系方式(手機/座機)的切換，是要切換后邊不同類型輸入框還是只改變校驗規則(本篇是動態改變校驗規則)

實現

1.elementui的form表單實現校驗的時候要給當前el-form-item加上prop屬性,因為我們是遍歷生成的表單，那我們的寫法就要寫成:

重點在prop屬性

:ref="index+'concatValue'"

:prop="'lists.' + index +'.concatValue'"

:rules="k.rules">

2.因為我選擇了根據類型動態修改校驗規則，而不是切換不同類型的輸入框,

注意看下上文代碼中的ref和rules,當類型切換時，對應的:rules=k.rules對應的規則也會進行修改,:ref屬性是為了切換聯系方式類型時，先清除掉之前的提示。

看下不同類型的校驗規則,統一的先放到一個地方：

inputRules: {//設置好需要的校驗規則

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.如果你的聯系方式的值都是必填的，可以先寫一個統一的必填校驗,省的在步驟2代碼里重復寫

const baseRule = [

{ required: true, message: '請填寫聯系方式', trigger: 'blur' }

]

然后等切換校驗類型的時候，把必填校驗baseRule連接起來:

// 給表單加上新的校驗

this.formData.lists[index].rules = [this.inputRules[data]].concat(baseRule)

動態表單校驗、動態校驗規則這塊沒有太難的地方，就是有時候會被繞暈，所以拿出來記錄一下，大家有更好的方案歡迎指出

總結

以上所述是小編給大家介紹的基于Vue+elementUI實現動態表單的校驗功能(根據條件動態切換校驗格式)，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

總結

以上是生活随笔為你收集整理的element手机验证格式_基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。