Vue from-validate 表單驗(yàn)證

前言

需要進(jìn)行表單數(shù)據(jù)驗(yàn)證绕辖,原先才用html5來(lái)完成驗(yàn)證摇肌,但是效果很差,也不夠靈活仪际,所以需要進(jìn)行自定義的表單驗(yàn)證围小,網(wǎng)上的插件都太過(guò)龐大,項(xiàng)目并沒(méi)有這么多的需求弟头。
那讓我們自己來(lái)寫一個(gè)吧吩抓!

知識(shí)準(zhǔn)備

  1. vue的自定義指令
    具體可以看官方手冊(cè),連接如下

https://vuejs.org/v2/guide/custom-directive.html

總的來(lái)說(shuō)就是可以幫你在指定的鉤子函數(shù)中跳用你的函數(shù)赴恨,參數(shù)(el疹娶,binding, vnode)

  • el: 綁定的dom
  • binding: 指令的各項(xiàng)屬性
  • vnode: Vue 編譯生成的虛擬節(jié)點(diǎn)

開(kāi)始

  1. 指令的申明
    需要注意的是參數(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>
  1. 解析參數(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];
});
  1. 輸入內(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');
  }
});
  1. 在提交時(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();
  }
});
  1. 校驗(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)題钳垮,有什么好的建議希望可以指出

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市额港,隨后出現(xiàn)的幾起案子饺窿,更是在濱河造成了極大的恐慌,老刑警劉巖移斩,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件肚医,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡向瓷,警方通過(guò)查閱死者的電腦和手機(jī)肠套,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)猖任,“玉大人你稚,你說(shuō)我怎么就攤上這事≈焯桑” “怎么了刁赖?”我有些...
    開(kāi)封第一講書人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)长搀。 經(jīng)常有香客問(wèn)我宇弛,道長(zhǎng),這世上最難降的妖魔是什么盈滴? 我笑而不...
    開(kāi)封第一講書人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任涯肩,我火速辦了婚禮轿钠,結(jié)果婚禮上巢钓,老公的妹妹穿的比我還像新娘。我一直安慰自己疗垛,他們只是感情好症汹,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著贷腕,像睡著了一般背镇。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上泽裳,一...
    開(kāi)封第一講書人閱讀 49,821評(píng)論 1 290
  • 那天瞒斩,我揣著相機(jī)與錄音,去河邊找鬼涮总。 笑死胸囱,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的瀑梗。 我是一名探鬼主播烹笔,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼裳扯,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了谤职?” 一聲冷哼從身側(cè)響起饰豺,我...
    開(kāi)封第一講書人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎允蜈,沒(méi)想到半個(gè)月后冤吨,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡饶套,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年锅很,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片凤跑。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡爆安,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出仔引,到底是詐尸還是另有隱情扔仓,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布咖耘,位于F島的核電站翘簇,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏儿倒。R本人自食惡果不足惜版保,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望夫否。 院中可真熱鬧彻犁,春花似錦、人聲如沸凰慈。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)微谓。三九已至森篷,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間豺型,已是汗流浹背仲智。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留姻氨,地道東北人钓辆。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親岩馍。 傳聞我的和親對(duì)象是個(gè)殘疾皇子碉咆,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容