国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

VeeValidate 的使用場景以及配置

blair / 1243人閱讀

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

創(chuàng)建vue項(xiàng)目: 
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);
例子 第一個(gè)測(cè)試?yán)?/b>

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

中文配置

全局配置

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");

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

自定義錯(cuò)誤提示
自定義驗(yàn)證規(guī)則
顯示第一個(gè)錯(cuò)誤!

有時(shí)候我們需要在彈出層中提示用戶 所以要顯示第一個(gè)錯(cuò)誤

this.$validator.errors.items[0].msg
例子 發(fā)驗(yàn)證碼和注冊(cè)!

這個(gè)例子中發(fā)驗(yàn)證碼是一個(gè)驗(yàn)證 注冊(cè)又是一個(gè)驗(yàn)證 所以有點(diǎn)意義!
在發(fā)送驗(yàn)證碼的時(shí)候需要驗(yàn)證手機(jī)號(hào)碼和圖形驗(yàn)證碼 注冊(cè)的時(shí)候需要驗(yàn)證除圖形驗(yàn)證碼之外的數(shù)據(jù)

template
style 代碼(這個(gè)是隨便寫的 原生css大家不要吐槽哈)
js
外部引入的js (自定義提示內(nèi)容) 
export const messages = {
  custom: {
    mobile: {
      required: () => "請(qǐng)輸入手機(jī)號(hào)碼!",
      mobile: () => "手機(jī)號(hào)碼有誤",
    },
    img_captcha: {
      required: () => "請(qǐng)輸入圖形驗(yàn)證碼!",
    },
    sms_captcha: {
      required: () => "請(qǐng)輸短信驗(yàn)證碼!",
      length: () => "短信驗(yàn)證碼為6位數(shù)字"
    },
    password: {
      required: () => "密碼不得為空",
      min: () => "密碼不得小于8個(gè)字符",
    },
    re_password: {
      required: () => "請(qǐng)?jiān)俅屋斎朊艽a!",
      confirmed: () => "兩次密碼輸入不一致"
    },
    nickname: {
      required: () => "請(qǐng)輸入昵稱",
      min: () => "昵稱最小為3位字符",
      max: (field, params) => {
        return `昵稱最大為${params[0]}位字符`;
      }
    },
    id_card: {
      required: "身份證號(hào)碼不得為空"
    },
    birthday: {
      required: "請(qǐng)選擇出生日期",
      date_format: "出生日期有誤"
    },
    url: {
      required: () => "請(qǐng)輸入個(gè)人網(wǎng)址",
      url: () => "網(wǎng)址輸入有誤"
    },
    email: {
      required: () => "請(qǐng)輸入電子郵箱",
      email: () => "電子郵箱輸入有誤"
    },
    age: {
      required: () => "請(qǐng)輸入年齡",
      between: () => "年齡必須在18-60歲之間"
    }
  },
};
擴(kuò)展內(nèi)容 自定義錯(cuò)誤信息中顯示配置驗(yàn)證規(guī)則中的參數(shù) 
export const messages = {
  custom: {
    nickname: {
      required: () => "請(qǐng)輸入年齡",
      between: (fiield,params) => `年齡必須在${params[0]}-${params[1]}歲之間"
    }
  },
};

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

驗(yàn)證指定字段 
validateAll(field Object) 
validateAll({mobile:this.moble});

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/100904.html

相關(guān)文章

  • veeValidate實(shí)戰(zhàn)

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

    kamushin233 評(píng)論0 收藏0

  • veeValidate實(shí)戰(zhàn)

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

    AlienZHOU 評(píng)論0 收藏0

  • veeValidate實(shí)戰(zhàn)

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

    kbyyd24 評(píng)論0 收藏0

  • 神策數(shù)據(jù)關(guān)海南：營銷策略引擎解讀，以平臺(tái)化構(gòu)建營銷新生態(tài)

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

    番茄西紅柿 評(píng)論0 收藏2637

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<