資訊專欄INFORMATION COLUMN
摘要：初始化項目網上很多教程，不再贅述搭建靜態樣式分支鏈接安裝初體驗分支安裝中引入使用效果圖在想驗證的框添加指令。對于下面的示例，驗證規則是直截了當的。這里使用了一個必填的驗證。
說在前面
vee-validate 版本2.0.4的學習github地址
我的項目地址
第一次認真的在git上寫一個demo教程，喜歡的可以star一下~^o^~ (^-^) (^o^)
后續會有一個完整的vue商城項目教程，希望得到大家的鼓勵
一步一步學習veeValidate，雖然是個小的demo，但是希望能夠跟大家分享
通過創建多個分支，表示項目的進度，每個分支的復雜程度遞增。
網上很多教程，不再贅述
Lesson1 搭建靜態樣式lesson1分支鏈接
Lesson2分支
安裝
npm install vee-validate --save
main.js中引入
home.vue使用
效果圖
在想驗證的input框添加v-validate指令。多個驗證規則用|分隔。對于下面的示例，驗證規則是直截了當的。這里使用了一個必填的驗證。這里使用button的disabled屬性來控制是否可以下一步在計算屬性中返回this.$validator.errors.has("name")如果error存在則disabled為true
Lesson3 使用中文錯誤提示為了更好的使用vee-validate在src下新建文件夾并且創建文件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);
效果
添加之前漏掉的一點，一開始進入的時候按鈕是不可點的所有添加
一進入就驗證
接下來新增點擊下一步點擊頁面
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)
});
新增手機屬性
新增的自定義方法就可以用了
這里值得注意的是，自定義方法要放在自定義錯誤消息上面，要不錯誤信息會有問題
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115733.html
摘要：初始化項目網上很多教程，不再贅述搭建靜態樣式分支鏈接安裝初體驗分支安裝中引入使用效果圖在想驗證的框添加指令。對于下面的示例，驗證規則是直截了當的。這里使用了一個必填的驗證。 說在前面 vee-validate 版本2.0.4的學習github地址我的項目地址第一次認真的在git上寫一個demo教程，喜歡的可以star一下~^o^~ (^-^) (^o^) 后續會有一個完整的vue商城項...
摘要：初始化項目網上很多教程，不再贅述搭建靜態樣式分支鏈接安裝初體驗分支安裝中引入使用效果圖在想驗證的框添加指令。對于下面的示例，驗證規則是直截了當的。這里使用了一個必填的驗證。 說在前面 vee-validate 版本2.0.4的學習github地址我的項目地址第一次認真的在git上寫一個demo教程，喜歡的可以star一下~^o^~ (^-^) (^o^) 后續會有一個完整的vue商城項...
摘要：創建項目安裝本文中使用的版本為在中引入例子第一個測試例子驗證通過更多配置請參考官網我們只是用些常用配置和常用的驗證中文配置全局配置這樣就可以使用中文提示了自定義錯誤提示昵稱不得為空寫法昵稱不得小于個字符 創建vue項目: vue init webpack vee cd ./vee npm run dev # or yarn run dev 安裝 VeeValidate npm...
閱讀 2221·2021-11-18 10:02
閱讀 3480·2021-11-15 11:36
閱讀 1116·2019-08-30 14:03
閱讀 724·2019-08-30 11:08
閱讀 2761·2019-08-29 13:20
閱讀 3287·2019-08-29 12:34
閱讀 1375·2019-08-28 18:30
閱讀 1641·2019-08-26 13:34
