vee-validate vue 2.0自定義表單驗證的實例
親測可用
學(xué)習(xí)vee-validate,首先可以去閱讀官方文檔,更為詳細(xì)可以閱讀官網(wǎng)中的規(guī)則。
一、安裝
您可以通過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導(dǎo)入它:
import Vue from 'vue'; import VeeValidate from 'vee-validate'; Vue.use(VeeValidate);
二、使用中文提示
沒有配置過的錯誤提示默認(rèn)使用英文顯示的,如果想要用中文顯示需要我們手動配置一下,首先還是在main.js中引入
import VeeValidate, {Validator} from 'vee-validate'; import cn from 'vee-validate/dist/locale/zh_CN'; Validator.localize('cn', cn);
三、修改默認(rèn)的錯誤提示信息
// 修改默認(rèn)錯誤提示 const dict = { cn: {messages: {required: (name) => `${name}不能為空!`}} // name接受alias的值. } Validator.localize(dict);
demo中修改了required的錯誤提示信息,因為使用的中文(前面引入的),所以是cn。最后用localize方法加入到Validator中。
四、使用自定義規(guī)則
Validator.extend('mobile', { getMessage: field => "請輸入正確的手機號碼", validate: value => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value) });
extend的第一個參數(shù)就是自定義的規(guī)則的名字,可以像使用默認(rèn)規(guī)則一樣使用它,getMessage中是錯誤提示信息,validate是驗證規(guī)則,返回一個布爾值或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() { // 提交執(zhí)行函數(shù) 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作為其第一個參數(shù)的方法添加驗證規(guī)則。 this.$set(this, 'errors', this.validator.errors); } }; </script> <style> .error { font-size: 12px; color: #ff1c13; } </style>
以上這篇vee-validate vue 2.0自定義表單驗證的實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue點擊彈窗自動觸發(fā)點擊事件的解決辦法(模擬場景)
本文通過案例場景給大家介紹vue點擊彈窗自動觸發(fā)點擊事件的解決辦法,通過兩種方法給大家分享vue 自動觸發(fā)點擊事件的處理方法,對vue自動觸發(fā)點擊事件相關(guān)知識感興趣的朋友一起看看吧2021-05-05vue-router中關(guān)于children的使用方法
這篇文章主要介紹了vue-router中關(guān)于children的使用方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08vue3中如何使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù)(最新推薦)
這篇文章主要介紹了vue3中如何使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù),這里就是vue3中setup組合式api中如何定義響應(yīng)式數(shù)據(jù)并且修改賦值全部內(nèi)容,需要的朋友可以參考下2022-12-12vue中.env文件配置環(huán)境變量的實現(xiàn)
本文主要介紹了vue中.env文件配置環(huán)境變量的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04Vue.js組件props數(shù)據(jù)驗證實現(xiàn)詳解
這篇文章主要為大家詳細(xì)介紹了Vue.js組件props數(shù)據(jù)驗證的實現(xiàn)方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-10-10解決Vue控制臺報錯Failed to mount component: tem
這篇文章主要介紹了解決Vue控制臺報錯Failed to mount component: template or render function not defined.問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06Vue過濾器(filter)實現(xiàn)及應(yīng)用場景詳解
在Vue中使用過濾器(Filters)來渲染數(shù)據(jù)是一種很有趣的方式,下面這篇文章主要給大家介紹了關(guān)于Vue過濾器(filter)實現(xiàn)及應(yīng)用場景的相關(guān)資料,需要的朋友可以參考下2021-06-06基于 Vue.js 之 iView UI 框架非工程化實踐記錄(推薦)
為了快速體驗 MVVM 模式,我選擇了非工程化方式來起步,并選擇使用 Vue.js,以及基于它構(gòu)建的 iView UI 框架。本文給大家分享基于 Vue.js 之 iView UI 框架非工程化實踐記錄,需要的朋友參考下吧2017-11-11