本篇文章主要介绍了Vue from-validate 表单验证的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

前言

需要进行表单数据验证,原先才用html5来完成验证,但是效果很差,也不够灵活,所以需要进行自定义的表单验证,网上的插件都太过庞大,项目并没有这么多的需求。
那让我们自己来写一个吧!

知识准备

vue的自定义指令

具体可以看官方手册,连接如下:https://vuejs.org/v2/guide/custom-directive.html

总的来说就是可以帮你在指定的钩子函数中跳用你的函数,参数(el,binding, vnode)

  • el: 绑定的dom
  • binding: 指令的各项属性
  • vnode: Vue 编译生成的虚拟节点

开始

1、指令的申明

需要注意的是参数在背绑定上后不会被所以要才用闭包的方式

Vue.directive('validate', {
 // 在指令第一次背绑定上时调用
 bind(el, binding, vnode) {
 }
}
<form id="red-package" @submit.prevent="submit" v-validate.formData="validate">
 ...
 <button type="submit">保存</button>
</form>

2、解析参数

Vue.directive('validate', {
 // vm对象,就是组件
 const vm = vnode.context;
 // 获得参数绑定的参数,就是规则对象
 const validate = binding.value;
 // 获得数据的key
 const dataKey = Object.keys(binding.modifiers)[0];
});

3、输入内容改变时进行规则验证

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');
 }
});

4、在提交时对所有数据进行校验

// 有更好的方案
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();
 }
});

5、校验规则实例

amountRandomUpper({ budget, amountRandomUpper, amountRandomLower }) {
  if (amountRandomUpper < 1) {
    throw new Error('过小');
  }
  if (amountRandomUpper < amountRandomLower) {
    throw new Error('过小');
  }
  if (amountRandomUpper > budget) {
    throw new Error('过小');
  }
}

结束

这当中还是存在很多问题,有什么好的建议希望可以指出

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
水滴公司捐赠100万元设驰援疫区专项基金

水滴公司捐赠100万元

针对武汉新型冠状病毒感染的肺炎疫情,水滴公司捐赠100
趣头条驰援湖北 首批捐赠20万口罩1000套防护服

趣头条驰援湖北 首批

趣头条26日决定对湖北疫区捐赠总价值100万元的医疗物
《囧妈》上线三日播放量超6亿 总观看人次1.8亿

《囧妈》上线三日播放

截至1月27日零时,电影《囧妈》在头条系四平台(抖音、西
爱奇艺向武汉等地区捐赠1000万元及电视剧播出版权

爱奇艺向武汉等地区捐

爱奇艺在其官微宣布宣布向武汉市等疫情严重地区捐赠10
经纬中国出资600万设“关爱一线医护人员”基金计划

经纬中国出资600万设

新型冠状病毒肺炎疫情牵动全国关注,经纬中国决定,机构以
抗击疫情 梅花创投联合梅花帮成员企业筹集百万善款

抗击疫情 梅花创投联

新型冠状病毒肺炎疫情牵动全国关注,梅花创投联合梅花帮
最新文章
jQuery设置下拉框显示与隐藏效果的方法分析

jQuery设置下拉框显示

这篇文章主要介绍了jQuery设置下拉框显示与隐藏效果的
策略模式实现 Vue 动态表单验证的方法

策略模式实现 Vue 动

策略模式(Strategy Pattern)又称政策模式,其定义一系列的
Layui Form 自定义验证的实例代码

Layui Form 自定义验

今天小编就为大家分享一篇Layui Form 自定义验证的实
图解NodeJS实现登录注册功能

图解NodeJS实现登录注

这篇文章主要介绍了NodeJS实现登录注册功能,本文图文
基于Layui自定义模块的使用方法详解

基于Layui自定义模块

今天小编就为大家分享一篇基于Layui自定义模块的使用
layer弹出层自适应高度,垂直水平居中的实现

layer弹出层自适应高

今天小编就为大家分享一篇layer弹出层自适应高度,垂直