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 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
js 提交和设置表单的值
Dec 19 Javascript
Javascript 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 Javascript
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 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操作mysqli(示例代码)
2013/10/28 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
[05:24]TI9采访——教练
2019/08/24 DOTA
python脚本设置系统时间的两种方法
2016/02/21 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
摄影展策划方案
2014/06/02 职场文书
财务会计专业自荐书
2014/06/30 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
档案管理员岗位职责
2015/02/12 职场文书
慰问信范文
2015/02/14 职场文书
大专护理专业自荐信
2015/03/25 职场文书
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电