前言
需要進(jìn)行表單數(shù)據(jù)驗(yàn)證，原先才用html5來(lái)完成驗(yàn)證，但是效果很差，也不夠靈活，所以需要進(jìn)行自定義的表單驗(yàn)證，網(wǎng)上的插件都太過(guò)龐大，項(xiàng)目并沒(méi)有這么多的需求。
那讓我們自己來(lái)寫(xiě)一個(gè)吧！
知識(shí)準(zhǔn)備
- vue的自定義指令
具體可以看官方手冊(cè)，連接如下
總的來(lái)說(shuō)就是可以幫你在指定的鉤子函數(shù)中跳用你的函數(shù)，參數(shù)（el，binding， vnode）
- el: 綁定的dom
- binding: 指令的各項(xiàng)屬性
- vnode: Vue 編譯生成的虛擬節(jié)點(diǎn)
開(kāi)始
- 指令的申明
需要注意的是參數(shù)在背綁定上后不會(huì)被所以要才用閉包的方式
Vue.directive('validate', {
// 在指令第一次背綁定上時(shí)調(diào)用
bind(el, binding, vnode) {
}
}
<form id="red-package" @submit.prevent="submit" v-validate.formData="validate">
...
<button type="submit" class="save">保存</button>
</form>
- 解析參數(shù)
Vue.directive('validate', {
// vm對(duì)象，就是組件
const vm = vnode.context;
// 獲得參數(shù)綁定的參數(shù)，就是規(guī)則對(duì)象
const validate = binding.value;
// 獲得數(shù)據(jù)的key
const dataKey = Object.keys(binding.modifiers)[0];
});
- 輸入內(nèi)容改變時(shí)進(jìn)行規(guī)則驗(yàn)證
el.addEventListener('change', (e) => {
try {
// 事件觸發(fā)的input標(biāo)簽名
const changeElName = e.srcElement.name;
// 如果未設(shè)定規(guī)則不驗(yàn)證
if (validate[changeElName]) {
// 把表單的所有參數(shù)傳入
validate[changeElName](vm[dataKey]);
// 檢驗(yàn)成功添加成功的class
Util.removeClass(e.srcElement, 'success');
}
} catch (err) {
// 拋出異常添加失敗的class
Util.addClass(e.srcElement, 'error');
}
});
- 在提交時(shí)對(duì)所有數(shù)據(jù)進(jìn)行校驗(yàn)
// 有更好的方案
el.getElementsByTagName('button')[0].addEventListener('click', (e) => {
try {
// 遍歷對(duì)象
Object.keys(vm[dataKey]).forEach((item) => {
if (validate[item]) {
validate[item](vm[dataKey]);
}
});
} catch (err) {
// 拋出錯(cuò)誤提示
vm.loading({
text: '請(qǐng)檢查參數(shù)',
});
vm.loaded(1000);
// 阻止submit
e.preventDefault();
}
});
- 校驗(yàn)規(guī)則實(shí)例
amountRandomUpper({ budget, amountRandomUpper, amountRandomLower }) {
if (amountRandomUpper < 1) {
throw new Error('過(guò)小');
}
if (amountRandomUpper < amountRandomLower) {
throw new Error('過(guò)小');
}
if (amountRandomUpper > budget) {
throw new Error('過(guò)小');
}
}
結(jié)束
這當(dāng)中還是存在很多問(wèn)題，有什么好的建議希望可以指出
