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

資訊專欄INFORMATION COLUMN

VeeValidate 的使用場景以及配置

blair / 1236人閱讀

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

創建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);
例子 第一個測試例子

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

中文配置

全局配置

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

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

自定義錯誤提示
自定義驗證規則
顯示第一個錯誤!

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

this.$validator.errors.items[0].msg
例子 發驗證碼和注冊!

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

template
style 代碼(這個是隨便寫的 原生css大家不要吐槽哈)
js
外部引入的js (自定義提示內容) 
export const messages = {
  custom: {
    mobile: {
      required: () => "請輸入手機號碼!",
      mobile: () => "手機號碼有誤",
    },
    img_captcha: {
      required: () => "請輸入圖形驗證碼!",
    },
    sms_captcha: {
      required: () => "請輸短信驗證碼!",
      length: () => "短信驗證碼為6位數字"
    },
    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: () => "請輸入個人網址",
      url: () => "網址輸入有誤"
    },
    email: {
      required: () => "請輸入電子郵箱",
      email: () => "電子郵箱輸入有誤"
    },
    age: {
      required: () => "請輸入年齡",
      between: () => "年齡必須在18-60歲之間"
    }
  },
};
擴展內容 自定義錯誤信息中顯示配置驗證規則中的參數 
export const messages = {
  custom: {
    nickname: {
      required: () => "請輸入年齡",
      between: (fiield,params) => `年齡必須在${params[0]}-${params[1]}歲之間"
    }
  },
};

規則里面第一個參數是字段名稱 第二個參數是驗證規則后面的參數;

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

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

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

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

相關文章

  • veeValidate實戰

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

    kamushin233 評論0 收藏0

  • veeValidate實戰

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

    AlienZHOU 評論0 收藏0

  • veeValidate實戰

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

    kbyyd24 評論0 收藏0

  • 神策數據關海南：營銷策略引擎解讀，以平臺化構建營銷新生態

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

    番茄西紅柿 評論0 收藏2637

發表評論

0條評論

blair

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<