首页 web前端 js教程 Vue from-validate表单验证代码分享

Vue from-validate表单验证代码分享

May 14, 2018 pm 04:16 PM
代码 分享

本文主要和大家介绍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" class="save">保存</button>
</form>
登录后复制

2、解析参数

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

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

el.addEventListener(&#39;change&#39;, (e) => {
 try {
  // 事件触发的input标签名
  const changeElName = e.srcElement.name;
  // 如果未设定规则不验证
  if (validate[changeElName]) {
   // 把表单的所有参数传入
   validate[changeElName](vm[dataKey]);
   // 检验成功添加成功的class
   Util.removeClass(e.srcElement, &#39;success&#39;);
  }
 } catch (err) {
  // 抛出异常添加失败的class
  Util.addClass(e.srcElement, &#39;error&#39;);
 }
});
登录后复制

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

// 有更好的方案
el.getElementsByTagName(&#39;button&#39;)[0].addEventListener(&#39;click&#39;, (e) => {
 try {
  // 遍历对象
  Object.keys(vm[dataKey]).forEach((item) => {
   if (validate[item]) {
    validate[item](vm[dataKey]);
   }
  });
 } catch (err) {
  // 抛出错误提示
  vm.loading({
   text: &#39;请检查参数&#39;,
  });
  vm.loaded(1000);
  // 阻止submit
  e.preventDefault();
 }
});
登录后复制

5、校验规则实例

amountRandomUpper({ budget, amountRandomUpper, amountRandomLower }) {
  if (amountRandomUpper < 1) {
    throw new Error(&#39;过小&#39;);
  }
  if (amountRandomUpper < amountRandomLower) {
    throw new Error(&#39;过小&#39;);
  }
  if (amountRandomUpper > budget) {
    throw new Error(&#39;过小&#39;);
  }
}
登录后复制

结束

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

相关推荐:

vue、vue-validator实现表单验证功能

Bootstrap表单验证功能详解

表单验证

以上是Vue from-validate表单验证代码分享的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

夸克网盘怎么分享到百度网盘? 夸克网盘怎么分享到百度网盘? Mar 14, 2024 pm 04:40 PM

  夸克网盘和百度网盘都是很便利的存储工具,不少的用户们都在询问这两款软件互通吗?夸克网盘怎么分享到百度网盘?下面就让本站来为用户们来仔细的介绍一下夸克网盘的文件怎么保存到百度网盘方法吧。  夸克网盘的文件怎么保存到百度网盘方法  1、想要知道怎么把夸克网盘的文件转到百度网盘,首先在夸克网盘上下载需要保存的文件,然后打开百度网盘客户端后,选择压缩文件要保存的文件夹,双击打开该文件夹。  2、打开该文件夹后,点击窗口左上角区域的“上传”。  3、在电脑中找到需要上传的压缩文件,点击选

解决win7驱动程序代码28的方法 解决win7驱动程序代码28的方法 Dec 30, 2023 pm 11:55 PM

有的用户在安装设备的时候遇到了错误,提示错误代码28,其实这主要是由于驱动程序的原因,我们只要解决win7驱动程序代码28的问题就可以了,下面就一起来看一下应该怎么来操作吧。win7驱动程序代码28怎么办:首先,我们需要点击屏幕左下角的开始菜单。接着,在弹出的菜单中找到并点击“控制面板”选项。这个选项通常位于菜单的底部或者附近。点击后,系统会自动打开控制面板界面。在控制面板中,我们可以进行各种系统设置和管理操作。这是怀旧大扫除关卡中的第一步,希望对大家有所帮助。然后,我们需要继续操作,进入系统和

蓝屏代码0x0000001怎么办 蓝屏代码0x0000001怎么办 Feb 23, 2024 am 08:09 AM

蓝屏代码0x0000001怎么办蓝屏错误是电脑系统或硬件出现问题时的一种警告机制,代码0x0000001通常表示出现了硬件或驱动程序故障。当用户在使用电脑时突然遇到蓝屏错误,可能会感到惊慌和无措。幸运的是,大多数蓝屏错误都可以通过一些简单的步骤进行排除和处理。本文将为读者介绍一些解决蓝屏错误代码0x0000001的方法。首先,当遇到蓝屏错误时,我们可以尝试重

网易云音乐怎么分享到微信朋友圈_网易云音乐分享到微信朋友圈教程 网易云音乐怎么分享到微信朋友圈_网易云音乐分享到微信朋友圈教程 Mar 25, 2024 am 11:41 AM

1、首先我们进入到网易云音乐中,然后在软件首页界面中,点击进入到歌曲的播放界面中。2、然后在歌曲播放界面中,找到右上方的分享功能按钮,如下图红框所示位置,点击选择分享的渠道;在分享渠道中,点击底部的“分享至”选项,然后选择第一个“微信朋友圈”,即可将内容分享至微信朋友圈。

电脑频繁蓝屏而且每次代码不一样 电脑频繁蓝屏而且每次代码不一样 Jan 06, 2024 pm 10:53 PM

win10系统是一款非常优秀的高智能系统强大的智能可以为用户们带来最好的使用体验,一般正常的情况下用户们的win10系统电脑都不会出现任何的问题!但是在优秀的电脑也难免会出现各种故障最近一直有小伙伴们反应自己的win10系统遇到了频繁蓝屏的问题!今天小编就为大家带来了win10电脑频繁蓝屏不同代码的解决办法让我们一起来看一看吧。电脑频繁蓝屏而且每次代码不一样的解决办法:造成各种故障代码的原因以及解决建议1、0×000000116故障原因:应该是显卡驱动不兼容。解决建议:建议更换厂商原带驱动。2、

解决代码0xc000007b错误 解决代码0xc000007b错误 Feb 18, 2024 pm 07:34 PM

终止代码0xc000007b在使用电脑时,有时会遇到各种各样的问题和错误代码。其中,终止代码最为令人困扰,尤其是终止代码0xc000007b。这个代码表示某个应用程序无法正常启动,给用户带来了不便。首先,我们来了解一下终止代码0xc000007b的含义。这个代码是Windows操作系统的错误代码,通常发生在32位应用程序尝试在64位操作系统上运行时。它表示应

百度网盘怎么分享文件给好友 百度网盘怎么分享文件给好友 Mar 25, 2024 pm 06:52 PM

近期,百度网盘安卓客户端迎来了全新的8.0.0版本,这一版本不仅带来了众多变化,还增添了诸多实用功能。其中,最为引人注目的便是文件夹共享功能的增强。现在,用户可以轻松邀请好友加入,共同分享工作和生活中的重要文件,实现更加便捷的协作与共享。那么究竟该如何分享给好友自己需要分享的文件呢,下文中本站小编就将为大家带来详细内容介绍,希望能帮助到大家!1)打开百度云APP,首先点击在首页中选择相关的文件夹,然后再点击界面右上角的【...】图标;(如下图)2)随后点击“共享成员”一栏中的【+】,最后在勾选所

GE通用远程代码可在任何设备上编程 GE通用远程代码可在任何设备上编程 Mar 02, 2024 pm 01:58 PM

如果您需要远程编程任何设备,这篇文章会给您带来帮助。我们将分享编程任何设备的顶级GE通用远程代码。通用电气的遥控器是什么?GEUniversalRemote是一款遥控器,可用于控制多个设备,如智能电视、LG、Vizio、索尼、蓝光、DVD、DVR、Roku、AppleTV、流媒体播放器等。GEUniversal遥控器有各种型号,具有不同的功能和功能。GEUniversalRemote最多可以控制四台设备。顶级通用遥控器代码,可在任何设备上编程GE遥控器配备一组代码,使其能够与不同设备相配合。您可

See all articles