Vue from-validate 表单验证的示例代码


Posted in Javascript onSeptember 26, 2017

前言

需要进行表单数据验证,原先才用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" class="save">保存</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('过小');
  }
}

结束

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js document.write()使用介绍
Feb 21 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
几行js代码实现自适应
Feb 24 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 Javascript
微信小程序之蓝牙的链接
Sep 26 #Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 #jQuery
jQuery EasyUI开发技巧总结
Sep 26 #jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 #jQuery
微信小程序中post方法与get方法的封装
Sep 26 #Javascript
javascript 产生随机数的几种方法总结
Sep 26 #Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 #Javascript
You might like
php inc文件使用的风险和注意事项
2013/11/12 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
Python实现线程状态监测简单示例
2018/03/28 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
python基于property()函数定义属性
2020/01/22 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
python爬取微博评论的实例讲解
2021/01/15 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
求职简历自荐信范文
2013/10/21 职场文书
护理自荐信
2013/10/22 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
党支部四风整改方案
2014/10/25 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
学习党史心得体会2016
2016/01/23 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python