如何使用 VeeValidate 設定自訂驗證規則 ?
栏目: JavaScript · 发布时间: 5年前
内容简介:雖然 VeeValidate 已經內建很多驗證規則,但實務上可能有自己的商業邏輯需要驗證,又或者內建的驗證規則不是我們要的,如內建的 Email 驗證規則可能覺得太寬鬆,我們想寫自己的 Regular Expression 驗證 Email …等,此時就需要自訂驗證規則。Vue 2.5.17VeeValidate 2.1.2
雖然 VeeValidate 已經內建很多驗證規則,但實務上可能有自己的商業邏輯需要驗證,又或者內建的驗證規則不是我們要的,如內建的 Email 驗證規則可能覺得太寬鬆,我們想寫自己的 Regular Expression 驗證 Email …等,此時就需要自訂驗證規則。
Version
Vue 2.5.17
VeeValidate 2.1.2
Introduction
demo.vue
<template> <div> <div> <input v-validate="'required|myEmail'" name="email" type="text"> </div> <div> <span>{{ errors.first('email') }}</span> </div> </div> </template> <script> import Vue from 'vue'; import VeeValidate, { Validator } from 'vee-validate'; import zh_TW from 'vee-validate/dist/locale/zh_TW'; /** Custom Validator */ const getMessage = field => `${field} 格式不正確`; const validate = value => { const regex = /^\w+\.*\w+@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/; return regex.test(value); }; const myValidator = { getMessage, validate, }; Vue.use(VeeValidate); Validator.localize('zh_TW', zh_TW); /** Custom Rule */ Validator.extend('myEmail', myValidator); export default { name: 'demo', }; </script>
14 行
import VeeValidate, { Validator } from 'vee-validate';
除了 import 基本的 VeeValidate
外,還要額外 import Validator
,這是個 named import。
15 行
import zh_TW from 'vee-validate/dist/locale/zh_TW';
將繁體中文的資源檔 import 進來。
31 行
Validator.localize('zh_TW', zh_TW);
使用 Validator.localize()
設定語系為 zh_TW
。
25 行
const myValidator = { getMessage, validate, };
設定自訂的 Validator
,VeeValidate 規定 Validator
必須包含 getMessage()
與 validate()
兩個 method。
18 行
const getMessage = field => `${field} 格式不正確`;
field
傳入 HTML tag 的 name
attribute 值,回傳自訂錯誤訊息。
20 行
const validate = value => { const regex = /^\w+\.*\w+@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/; return regex.test(value); };
value
傳入 HTML 的 value
attribute 值,自行設定 Regular Expression 驗證 Email 格式。
34 行
Validator.extend('myEmail', myValidator);
使用 Validator.extend()
設定自訂的 rule 與 validator。
- 第一個參數為自訂 rule 名稱,為 string
- 第二個參數為自訂 validator,為 object
Conclusion
-
Validator.extend()
的第一個參數是設定 rule 名稱 -
Validator.extend()
的第二個參數要傳入 validator, 其 interface 一定要有getMessage()
與validate()
兩個 method
Sample Code
完整的範例可以在我的 GitHub 上找到
Reference
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- RecyclerView使用指南(一)—— 基本使用
- 如何使用Meteorjs使用URL参数
- 使用 defer 还是不使用 defer?
- 使用 Typescript 加强 Vuex 使用体验
- [译] 何时使用 Rust?何时使用 Go?
- UDP协议的正确使用场合(谨慎使用)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。