Vue提供了非常方便的表單校驗(yàn)功能,同時(shí)也支持自定義校驗(yàn)函數(shù),讓我們可以更加靈活地進(jìn)行表單校驗(yàn)。
要自定義校驗(yàn)函數(shù),我們需要使用Vue提供的$validator對(duì)象。下面是一個(gè)簡單的示例:
Vue.prototype.$validator.extend('phone', { getMessage: field => field + '必須是一個(gè)有效的電話號(hào)碼', validate: value => { const pattern = /^1\d{10}$/ return pattern.test(value) } })
在這個(gè)示例中,我們定義了一個(gè)名為“phone”的自定義校驗(yàn)規(guī)則。該規(guī)則包含了一個(gè)用于展示錯(cuò)誤信息的函數(shù)和一個(gè)用于執(zhí)行校驗(yàn)的函數(shù)。在執(zhí)行校驗(yàn)的函數(shù)中,我們使用了正則表達(dá)式檢驗(yàn)了輸入值是否為一個(gè)有效的電話號(hào)碼。如果校驗(yàn)不通過,就需要返回一個(gè)錯(cuò)誤字符串。
一旦我們定義好了自定義校驗(yàn)函數(shù),就可以直接在Vue組件中使用它。例如:
<template> <div> <label for="phone">電話號(hào)碼:</label> <input type="text" v-model="phone" /> <span v-if="$validator.phone.failed">{{ $validator.phone.errors[0] }}</span> </div> </template> <script> export default { data() { return { phone: '' } } } </script>
在這個(gè)示例中,我們將自定義校驗(yàn)函數(shù)應(yīng)用到了一個(gè)輸入框中。每次輸入值發(fā)生變化時(shí),Vue都會(huì)自動(dòng)校驗(yàn)該輸入框的值是否滿足自定義校驗(yàn)規(guī)則。如果不滿足,就會(huì)顯示一個(gè)錯(cuò)誤信息。