成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

kamushin233 / 1138人閱讀

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

說(shuō)在前面

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

分支說(shuō)明

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

初始化vue項(xiàng)目

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

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

lesson1分支鏈接

Lesson2 安裝veeValidate初體驗(yàn)

Lesson2分支
安裝

npm install vee-validate --save

main.js中引入

home.vue使用

效果圖

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

Lesson3 使用中文錯(cuò)誤提示

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

接下來(lái)安裝vue國(guó)際化

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是必須的對(duì)于一個(gè)中國(guó)人來(lái)說(shuō)就有點(diǎn)不舒服了。
下一步就是將修改默認(rèn)顯示的錯(cuò)誤信息

引入Validator

import  { Validator } from "vee-validate";

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

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

效果

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

添加之前漏掉的一點(diǎn)，一開(kāi)始進(jìn)入的時(shí)候按鈕是不可點(diǎn)的所有添加

一進(jìn)入就驗(yàn)證

接下來(lái)新增點(diǎn)擊下一步點(diǎn)擊頁(yè)面
Step1.vue

router.js

Home.vue驗(yàn)證成功后點(diǎn)擊下一步跳到Step1.vue

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

validator.js添加自定義方法

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


新增手機(jī)屬性

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115733.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)證。 說(shuō)在前面 vee-validate 版本2.0.4的學(xué)習(xí)github地址我的項(xiàng)目地址第一次認(rèn)真的在git上寫(xiě)一個(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)證。 說(shuō)在前面 vee-validate 版本2.0.4的學(xué)習(xí)github地址我的項(xiàng)目地址第一次認(rèn)真的在git上寫(xiě)一個(gè)demo教程，喜歡的可以star一下~^o^~ (^-^) (^o^) 后續(xù)會(huì)有一個(gè)完整的vue商城項(xiàng)...

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

  • VeeValidate 的使用場(chǎng)景以及配置

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

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

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

0條評(píng)論

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