本文主要跟大家介紹Vue from-validate 表單驗證的範例程式碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。
前言
需要進行表單資料驗證,原先才用html5來完成驗證,但是效果很差,也不夠靈活,所以需要進行自訂的表單驗證,網路上的插件都太過龐大,專案並沒有這麼多的需求。
那讓我們自己來寫一個吧!
知識準備
vue的自訂指令
具體可以看官方手冊,連結如下:https://vuejs.org /v2/guide/custom-directive.html
總的來說就是可以幫你在指定的鉤子函數中跳用你的函數,參數(el,binding, vnode)
el: 綁定的dom
vnode: Vue 編譯產生的虛擬節點
1、指令的申明
要注意的是參數在背綁定上後不會被所以要才用閉包的方式Vue.directive('validate', { // 在指令第一次背绑定上时调用 bind(el, binding, vnode) { } }
<form id="red-package" @submit.prevent="submit" v-validate.formData="validate"> ... <button type="submit" class="save">保存</button> </form>
Vue.directive('validate', { // vm对象,就是组件 const vm = vnode.context; // 获得参数绑定的参数,就是规则对象 const validate = binding.value; // 获得数据的key const dataKey = Object.keys(binding.modifiers)[0]; });
el.addEventListener('change', (e) => { try { // 事件触发的input标签名 const changeElName = e.srcElement.name; // 如果未设定规则不验证 if (validate[changeElName]) { // 把表单的所有参数传入 validate[changeElName](vm[dataKey]); // 检验成功添加成功的class Util.removeClass(e.srcElement, 'success'); } } catch (err) { // 抛出异常添加失败的class Util.addClass(e.srcElement, 'error'); } });
// 有更好的方案 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: '请检查参数', }); vm.loaded(1000); // 阻止submit e.preventDefault(); } });
amountRandomUpper({ budget, amountRandomUpper, amountRandomLower }) { if (amountRandomUpper < 1) { throw new Error('过小'); } if (amountRandomUpper < amountRandomLower) { throw new Error('过小'); } if (amountRandomUpper > budget) { throw new Error('过小'); } }
結束
##這當中還是存在很多問題,有什麼好的建議希望可以指出。 相關推薦:
# ######表單驗證#######以上是Vue from-validate表單驗證程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!