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 相关文章推荐
javascript支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
js 提交和设置表单的值
Dec 19 Javascript
复制js对象方法(详解)
Jul 08 Javascript
js中文逗号转英文实现
Feb 11 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
ES6数组与对象的解构赋值详解
Jun 14 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详细彻底学习Smarty
2008/03/27 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
php字符串截取函数用法分析
2014/11/25 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
php的ddos攻击解决方法
2015/01/08 PHP
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
virtualenv介绍及简明教程
2020/06/23 Python
python将数据插入数据库的代码分享
2020/08/16 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
出生医学证明样本
2014/01/17 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
公司承诺书格式范文
2015/04/28 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
详解Nginx 工作原理
2021/03/31 Servers
Python数据分析之pandas读取数据
2021/06/02 Python
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
MySQL数据库表约束讲解
2022/06/21 MySQL