VeeValidate 的使用場景以及配置

blair 發(fā)布于2019-08-23 14:38 / 1245人閱讀

摘要：創(chuàng)建項目安裝本文中使用的版本為在中引入例子第一個測試例子驗證通過更多配置請參考官網(wǎng)我們只是用些常用配置和常用的驗證中文配置全局配置這樣就可以使用中文提示了自定義錯誤提示昵稱不得為空寫法昵稱不得小于個字符

創(chuàng)建vue項目:

vue init webpack vee

cd ./vee 

npm run dev
 
# or
yarn run dev

安裝 VeeValidate

npm install vee-validate --save
# or
yarn add  vee-validate --save

本文中使用的 VeeValidate 版本為 2.1.5

在 App.vue 中引入

import VeeValidate from "vee-validate";

Vue.use(VeeValidate);

例子 第一個測試例子

更多配置請參考官網(wǎng)!
我們只是用些常用配置和常用的驗證!

中文配置

全局配置

import VeeValidate, {Validator} from "vee-validate";
import zh_CN from "vee-validate/dist/locale/zh_CN";
Vue.use(VeeValidate, {
  dictionary: {
    zh_CN: zh_CN
  }
});
Validator.localize("zh_CN");

這樣就可以使用中文提示了!

自定義錯誤提示

自定義驗證規(guī)則

顯示第一個錯誤!

有時候我們需要在彈出層中提示用戶所以要顯示第一個錯誤

this.$validator.errors.items[0].msg

例子發(fā)驗證碼和注冊!

這個例子中發(fā)驗證碼是一個驗證注冊又是一個驗證所以有點意義!
在發(fā)送驗證碼的時候需要驗證手機號碼和圖形驗證碼注冊的時候需要驗證除圖形驗證碼之外的數(shù)據(jù)

template

style 代碼(這個是隨便寫的原生css大家不要吐槽哈)

外部引入的js (自定義提示內容)

export const messages = {
  custom: {
    mobile: {
      required: () => "請輸入手機號碼!",
      mobile: () => "手機號碼有誤",
    },
    img_captcha: {
      required: () => "請輸入圖形驗證碼!",
    },
    sms_captcha: {
      required: () => "請輸短信驗證碼!",
      length: () => "短信驗證碼為6位數(shù)字"
    },
    password: {
      required: () => "密碼不得為空",
      min: () => "密碼不得小于8個字符",
    },
    re_password: {
      required: () => "請再次輸入密碼!",
      confirmed: () => "兩次密碼輸入不一致"
    },
    nickname: {
      required: () => "請輸入昵稱",
      min: () => "昵稱最小為3位字符",
      max: (field, params) => {
        return `昵稱最大為${params[0]}位字符`;
      }
    },
    id_card: {
      required: "身份證號碼不得為空"
    },
    birthday: {
      required: "請選擇出生日期",
      date_format: "出生日期有誤"
    },
    url: {
      required: () => "請輸入個人網(wǎng)址",
      url: () => "網(wǎng)址輸入有誤"
    },
    email: {
      required: () => "請輸入電子郵箱",
      email: () => "電子郵箱輸入有誤"
    },
    age: {
      required: () => "請輸入年齡",
      between: () => "年齡必須在18-60歲之間"
    }
  },
};

擴展內容 自定義錯誤信息中顯示配置驗證規(guī)則中的參數(shù)

export const messages = {
  custom: {
    nickname: {
      required: () => "請輸入年齡",
      between: (fiield,params) => `年齡必須在${params[0]}-${params[1]}歲之間"
    }
  },
};

規(guī)則里面第一個參數(shù)是字段名稱第二個參數(shù)是驗證規(guī)則后面的參數(shù);

驗證指定字段

validateAll(field Object) 
validateAll({mobile:this.moble});

還可以使用 data-vv-scope 來指定但是該方法并不適用一些場景;
顯示錯誤信息的時候必須要指定scope的值不然不會顯示錯誤信息

GPU云服務器云服務器 redis的使用場景消息隊列的使用場景服務器配置以及價格騰訊云創(chuàng)建服務器以及配置

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/100904.html

veeValidate實戰(zhàn)

摘要：初始化項目網(wǎng)上很多教程，不再贅述搭建靜態(tài)樣式分支鏈接安裝初體驗分支安裝中引入使用效果圖在想驗證的框添加指令。對于下面的示例，驗證規(guī)則是直截了當?shù)?。這里使用了一個必填的驗證。說在前面 vee-validate 版本2.0.4的學習github地址我的項目地址第一次認真的在git上寫一個demo教程，喜歡的可以star一下~^o^~ (^-^) (^o^) 后續(xù)會有一個完整的vue商城項...

kamushin233 2019-08-30 14:03 評論0 收藏0
veeValidate實戰(zhàn)

摘要：初始化項目網(wǎng)上很多教程，不再贅述搭建靜態(tài)樣式分支鏈接安裝初體驗分支安裝中引入使用效果圖在想驗證的框添加指令。對于下面的示例，驗證規(guī)則是直截了當?shù)?。這里使用了一個必填的驗證。說在前面 vee-validate 版本2.0.4的學習github地址我的項目地址第一次認真的在git上寫一個demo教程，喜歡的可以star一下~^o^~ (^-^) (^o^) 后續(xù)會有一個完整的vue商城項...

AlienZHOU 2019-08-01 18:38 評論0 收藏0
veeValidate實戰(zhàn)

摘要：初始化項目網(wǎng)上很多教程，不再贅述搭建靜態(tài)樣式分支鏈接安裝初體驗分支安裝中引入使用效果圖在想驗證的框添加指令。對于下面的示例，驗證規(guī)則是直截了當?shù)?。這里使用了一個必填的驗證。說在前面 vee-validate 版本2.0.4的學習github地址我的項目地址第一次認真的在git上寫一個demo教程，喜歡的可以star一下~^o^~ (^-^) (^o^) 后續(xù)會有一個完整的vue商城項...

kbyyd24 2019-08-22 14:56 評論0 收藏0
神策數(shù)據(jù)關海南：營銷策略引擎解讀，以平臺化構建營銷新生態(tài)

摘要：神策數(shù)據(jù)關海南營銷策略引擎解讀，以平臺化構建營銷新生態(tài)計算引擎圖片神策數(shù)據(jù)關海南營銷策略引擎解讀，以平臺化構建營銷新生態(tài)微信在神策數(shù)據(jù)驅動大會現(xiàn)場，神策營銷云架構師關海南發(fā)表了題為營銷策略引擎的技術演進的演講。 ??在??神策 2021 數(shù)據(jù)驅動大會??現(xiàn)場，神策營銷云架構師關海南發(fā)表了題為《營銷策略引擎（Express）...

番茄西紅柿 2021-11-22 14:55 評論0 收藏2637