親測可用
學習vee-validate，首先可以去閱讀官方文檔，更為詳細可以閱讀官網中的規則。
一、安裝
您可以通過npm或通過CDN安裝此插件。
1. NPM
npm install vee-validate --save
2. CDN
<script src="path/to/vue.js"></script><script src="path/to/vee-validate.js"></script><script> Vue.use(VeeValidate); // good to go.</script>
或者你可以使用ES6導入它：
import Vue from 'vue';import VeeValidate from 'vee-validate';Vue.use(VeeValidate);
二、使用中文提示
沒有配置過的錯誤提示默認使用英文顯示的，如果想要用中文顯示需要我們手動配置一下，首先還是在main.js中引入
import VeeValidate, {Validator} from 'vee-validate';import cn from 'vee-validate/dist/locale/zh_CN';Validator.localize('cn', cn);三、修改默認的錯誤提示信息
// 修改默認錯誤提示const dict = { cn: {messages: {required: (name) => `${name}不能為空!`}} // name接受alias的值.}Validator.localize(dict);demo中修改了required的錯誤提示信息，因為使用的中文（前面引入的），所以是cn。最后用localize方法加入到Validator中。
四、使用自定義規則
Validator.extend('mobile', { getMessage: field => "請輸入正確的手機號碼", validate: value => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}/d{8})$/.test(value)});extend的第一個參數就是自定義的規則的名字，可以像使用默認規則一樣使用它，getMessage中是錯誤提示信息，validate是驗證規則，返回一個布爾值或promise.
完整例子
<template> <div class=""> <form @submit.prevent="applyCoupon" class=""> <label class="">手機號</label> <p class=""> <input v-model="phone" name="phone" :class="" type="text" placeholder="請輸入手機號"><br> <span v-show="errors.has('phone')" class="error">{{ errors.first('phone') }}</span> </p> <label class="">姓名</label> <p class=""> <input v-model="name" name="name" :class="" type="text" placeholder="請輸入手機號"><br> <span v-show="errors.has('name')" class="error">{{ errors.first('name') }}</span> </p> <p class=""> <button type="submit" class="" name="button">確定</button> </p> </form> </div></template><script> import VeeValidate, {Validator} from 'vee-validate'; import cn from 'vee-validate/dist/locale/zh_CN'; Validator.localize('cn', cn); const dict = { cn: {messages: {required: (name) => `${name}不能為空!`}} } Validator.localize(dict); export default { name: 'coupon-example', validator: null, data: () => ({ phone: '', name: '', errors: null }), computed: {}, methods: { applyCoupon() { // 提交執行函數 this.validator.validate('name', this.name).then((result) => this.discounted = result); this.validator.validate('phone', this.phone).then((result) => this.discounted = result); } }, created() { this.validator = new Validator({}); Validator.extend('mobile', { getMessage: field => "請輸入正確的手機號碼", validate: value => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}/d{8})$/.test(value) }); Validator.extend('name', { getMessage: field => "請輸入正確姓名", validate: value => value == 'tom' }); this.validator.attach({name: 'name', rules: 'required|name', alias: '姓名'}); this.validator.attach({name: 'phone', rules: 'required|mobile', alias: '手機'}); // 使用attach以FieldOptions作為其第一個參數的方法添加驗證規則。 this.$set(this, 'errors', this.validator.errors); } };</script><style> .error { font-size: 12px; color: #ff1c13; }</style>以上這篇vee-validate vue 2.0自定義表單驗證的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
