Vue from-validate 表單驗證的示例代碼
更新時間：2017年09月26日 11:43:49 作者：_塵_
本篇文章主要介紹了Vue from-validate 表單驗證的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
前言
需要進行表單數(shù)據(jù)驗證，原先才用html5來完成驗證，但是效果很差，也不夠靈活，所以需要進行自定義的表單驗證，網(wǎng)上的插件都太過龐大，項目并沒有這么多的需求。
那讓我們自己來寫一個吧！
知識準備
vue的自定義指令
具體可以看官方手冊，連接如下：https://vuejs.org/v2/guide/custom-directive.html
總的來說就是可以幫你在指定的鉤子函數(shù)中跳用你的函數(shù)，參數(shù)（el，binding， vnode）
- el: 綁定的dom
- binding: 指令的各項屬性
- vnode: Vue 編譯生成的虛擬節(jié)點
開始
1、指令的申明
需要注意的是參數(shù)在背綁定上后不會被所以要才用閉包的方式
Vue.directive('validate', {
// 在指令第一次背綁定上時調(diào)用
bind(el, binding, vnode) {
}
}
<form id="red-package" @submit.prevent="submit" v-validate.formData="validate"> ... <button type="submit" class="save">保存</button> </form>
2、解析參數(shù)
Vue.directive('validate', {
// vm對象，就是組件
const vm = vnode.context;
// 獲得參數(shù)綁定的參數(shù)，就是規(guī)則對象
const validate = binding.value;
// 獲得數(shù)據(jù)的key
const dataKey = Object.keys(binding.modifiers)[0];
});
3、輸入內(nèi)容改變時進行規(guī)則驗證
el.addEventListener('change', (e) => {
try {
// 事件觸發(fā)的input標簽名
const changeElName = e.srcElement.name;
// 如果未設定規(guī)則不驗證
if (validate[changeElName]) {
// 把表單的所有參數(shù)傳入
validate[changeElName](vm[dataKey]);
// 檢驗成功添加成功的class
Util.removeClass(e.srcElement, 'success');
}
} catch (err) {
// 拋出異常添加失敗的class
Util.addClass(e.srcElement, 'error');
}
});
4、在提交時對所有數(shù)據(jù)進行校驗
// 有更好的方案
el.getElementsByTagName('button')[0].addEventListener('click', (e) => {
try {
// 遍歷對象
Object.keys(vm[dataKey]).forEach((item) => {
if (validate[item]) {
validate[item](vm[dataKey]);
}
});
} catch (err) {
// 拋出錯誤提示
vm.loading({
text: '請檢查參數(shù)',
});
vm.loaded(1000);
// 阻止submit
e.preventDefault();
}
});
5、校驗規(guī)則實例
amountRandomUpper({ budget, amountRandomUpper, amountRandomLower }) {
if (amountRandomUpper < 1) {
throw new Error('過小');
}
if (amountRandomUpper < amountRandomLower) {
throw new Error('過小');
}
if (amountRandomUpper > budget) {
throw new Error('過小');
}
}
結束
這當中還是存在很多問題，有什么好的建議希望可以指出
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue3使用reactive包裹數(shù)組正確賦值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue按需引入element Transfer 穿梭框的相關資料,需要的朋友可以參考下2017-09-09
Vue3?使用Element?Plus表格單選帶checkbox功能
這篇文章主要介紹了Vue3?使用Element?Plus表格單選帶checkbox,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2023-11-11
本篇文章將與各位開發(fā)者分享下 vue-native-websocket 庫的使用以及配置，通過實例代碼給大家分享Vue通過配置WebSocket并實現(xiàn)群聊功能，需要的朋友可以參考下2019-12-12
這篇文章主要介紹了vue中巧用三元表達式解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
使用vue-cli3 創(chuàng)建vue項目并配置VS Code 自動代碼格式化 vue語法高亮問題
這篇文章主要介紹了使用vue-cli3 創(chuàng)建vue項目，并配置VS Code 自動代碼格式化 vue語法高亮問題，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
vxe-table?使用?vxe-upload?在表格中實現(xiàn)非常強大的粘貼上傳圖片和附件功能
本文通過實例代碼介紹了vxe-table渲染器的強大功能,配合 vxe-upload 上傳,比如復制或者截圖一張圖片,通過粘貼方式快速粘貼到單元格中,能支持單張、多張、查看、預覽功能,感興趣的朋友跟隨小編一起看看吧2024-12-12
這篇文章主要介紹了vue3如何自定義message彈窗問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了vue3+typeScript穿梭框的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要介紹了查找Vue中下標的操作(some和findindex)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08