vee-validatevue2.0自定義表單驗(yàn)證的實(shí)例

親測(cè)可用

成都創(chuàng)新互聯(lián)主營(yíng)青銅峽網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP開發(fā),青銅峽h5小程序定制開發(fā)搭建,青銅峽網(wǎng)站營(yíng)銷推廣歡迎青銅峽等地區(qū)企業(yè)咨詢

學(xué)習(xí)vee-validate，首先可以去閱讀官方文檔，更為詳細(xì)可以閱讀官網(wǎng)中的規(guī)則。

一、安裝

您可以通過(guò)npm或通過(guò)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);

二、使用中文提示

沒(méi)有配置過(guò)的錯(cuò)誤提示默認(rèn)使用英文顯示的，如果想要用中文顯示需要我們手動(dòng)配置一下，首先還是在main.js中引入

import VeeValidate, {Validator} from 'vee-validate';
import cn from 'vee-validate/dist/locale/zh_CN';

Validator.localize('cn', cn);

三、修改默認(rèn)的錯(cuò)誤提示信息

// 修改默認(rèn)錯(cuò)誤提示
const dict = {
 cn: {messages: {required: (name) => `${name}不能為空!`}} // name接受alias的值.
}
Validator.localize(dict);

demo中修改了required的錯(cuò)誤提示信息，因?yàn)槭褂玫闹形模ㄇ懊嬉氲模?，所以是cn。最后用localize方法加入到Validator中。

四、使用自定義規(guī)則

Validator.extend('mobile', {
 getMessage: field => "請(qǐng)輸入正確的手機(jī)號(hào)碼",
 validate: value => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
});

extend的第一個(gè)參數(shù)就是自定義的規(guī)則的名字，可以像使用默認(rèn)規(guī)則一樣使用它，getMessage中是錯(cuò)誤提示信息，validate是驗(yàn)證規(guī)則，返回一個(gè)布爾值或promise.

完整例子

<template>
 <div class="">
 <form @submit.prevent="applyCoupon" class="">
  <label class="">手機(jī)號(hào)</label>
  <p class="">
  <input v-model="phone" name="phone" :class="" type="text"
    placeholder="請(qǐng)輸入手機(jī)號(hào)"><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="請(qǐng)輸入手機(jī)號(hào)"><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 => "請(qǐng)輸入正確的手機(jī)號(hào)碼",
  validate: value => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  });
  Validator.extend('name', {
  getMessage: field => "請(qǐng)輸入正確姓名",
  validate: value => value == 'tom'
  });

  this.validator.attach({name: 'name', rules: 'required|name', alias: '姓名'});
  this.validator.attach({name: 'phone', rules: 'required|mobile', alias: '手機(jī)'});
  // 使用attach以FieldOptions作為其第一個(gè)參數(shù)的方法添加驗(yàn)證規(guī)則。

  this.$set(this, 'errors', this.validator.errors);
 }
 };
</script>
<style>
 .error {
 font-size: 12px;
 color: #ff1c13;
 }
</style>

以上這篇vee-validate vue 2.0自定義表單驗(yàn)證的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁(yè)題目：vee-validatevue2.0自定義表單驗(yàn)證的實(shí)例
文章轉(zhuǎn)載：http://jinyejixie.com/article28/pggdcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站制作、電子商務(wù)、網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、面包屑導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

vee-validatevue2.0自定義表單驗(yàn)證的實(shí)例