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

資訊專欄INFORMATION COLUMN

veeValidate實戰(zhàn)

kbyyd24 / 3052人閱讀

摘要：初始化項目網(wǎng)上很多教程，不再贅述搭建靜態(tài)樣式分支鏈接安裝初體驗分支安裝中引入使用效果圖在想驗證的框添加指令。對于下面的示例，驗證規(guī)則是直截了當(dāng)?shù)摹＿@里使用了一個必填的驗證。

說在前面

vee-validate 版本2.0.4的學(xué)習(xí)github地址
我的項目地址
第一次認真的在git上寫一個demo教程，喜歡的可以star一下~^o^~ (^-^) (^o^)
后續(xù)會有一個完整的vue商城項目教程，希望得到大家的鼓勵

分支說明

一步一步學(xué)習(xí)veeValidate，雖然是個小的demo，但是希望能夠跟大家分享
通過創(chuàng)建多個分支，表示項目的進度，每個分支的復(fù)雜程度遞增。

初始化vue項目

網(wǎng)上很多教程，不再贅述

Lesson1 搭建靜態(tài)樣式

lesson1分支鏈接

Lesson2 安裝veeValidate初體驗

Lesson2分支
安裝

npm install vee-validate --save

main.js中引入

home.vue使用

效果圖

在想驗證的input框添加v-validate指令。多個驗證規(guī)則用|分隔。對于下面的示例，驗證規(guī)則是直截了當(dāng)?shù)摹＿@里使用了一個必填的驗證。這里使用button的disabled屬性來控制是否可以下一步在計算屬性中返回this.$validator.errors.has("name")如果error存在則disabled為true

Lesson3 使用中文錯誤提示

為了更好的使用vee-validate在src下新建文件夾并且創(chuàng)建文件validator.js
在main.js中引用validator.js，之前引用的代碼將移入validator.js

接下來安裝vue國際化

npm install vue-i18n --save

引用

import Vue from "vue";
import VeeValidate from "vee-validate";
import VueI18n from "vue-i18n";
import zh_CN from "vee-validate/dist/locale/zh_CN";

Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: "zh_CN"
});
Vue.use(VeeValidate, {
  i18n,
  i18nRootKey: "validation",
  dictionary: {
    zh_CN
  }
});

然后效果圖就是這樣的了，這里的name是必須的對于一個中國人來說就有點不舒服了。
下一步就是將修改默認顯示的錯誤信息

引入Validator

import  { Validator } from "vee-validate";

或者合并使用import VeeValidate, { Validator } from "vee-validate";

// 自定義validate
const Dictionary = {
  zh_CN: {
    messages: {
      required: field => "請輸入" + field
    },
    attributes: {
      name: "賬號"
    }
  }
};
// 自定義validate error 信息
Validator.localize(Dictionary);

效果

Lesson4 點擊完成下一步實現(xiàn)自定義驗證規(guī)則

添加之前漏掉的一點，一開始進入的時候按鈕是不可點的所有添加

一進入就驗證

接下來新增點擊下一步點擊頁面
Step1.vue

router.js

Home.vue驗證成功后點擊下一步跳到Step1.vue

methods: {
      submit() {
          this.$router.push({name:"step1"})
      }
    }

validator.js添加自定義方法

/*自定義方法*/
Validator.extend("mobile", {
  getMessage: field => "手機格式不正確",
  validate: value =>
    value.length === 11 && /^((13|14|15|17|18)[0-9]{1}d{8})$/.test(value)
});


新增手機屬性

新增的自定義方法就可以用了
這里值得注意的是，自定義方法要放在自定義錯誤消息上面，要不錯誤信息會有問題

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/93016.html

相關(guān)文章

  • veeValidate實戰(zhàn)

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

    kamushin233 評論0 收藏0

  • veeValidate實戰(zhàn)

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

    AlienZHOU 評論0 收藏0

  • VeeValidate 的使用場景以及配置

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

    blair 評論0 收藏0

發(fā)表評論

0條評論

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