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 相关文章推荐
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
复制js对象方法(详解)
Jul 08 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
es6函数之箭头函数用法实例详解
Apr 25 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系统流量分析的程序
2006/10/09 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
php表单敏感字符过滤类
2014/12/08 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
Python简单实现控制电脑的方法
2018/01/22 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
Python如何输出整数
2020/06/07 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
python如何爬取网页中的文字
2020/07/28 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
生物化工工艺专业应届生求职信
2013/10/08 职场文书
班长自荐书范文
2014/02/11 职场文书
文明生主要事迹
2014/05/25 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
2014年团队工作总结
2014/11/24 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript