写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy)
需求
目标:简单易用可扩展
如何简单
开发者要做的
- 写了一个表单,指定一个name,指定其验证规则。
- 调用提交表单方法,可以获取验证成功后的数据。
- 调用重置表单方法重置表单
- 自定义验证方法
程序应该做的
- 获取表单元素,绑定事件
- 有输入时,获取表单值,使用开发者指定的规则进行验证,若验证错误给予错误提示。
实现方法
- 获取原生表单元素,vue指令获取到的是包裹原生表单元素的外层元素,这里我使用data-type属性来获取原生表单元素
- 验证规则,验证参数,自定义错误提示语 由 vue的指令值来获取
- 提交时,我们需要一个表单标识,这里我使用了data-scope属性来对表单进行分组
- 重置,通过data-scope重置整个表单
常用方法
- 懒验证,通过.lazy指令修饰符
- 远程验证, 通过async await
- 延时验证, .deay指令修饰符,和data-delay属性
- 表单主动验证,单字段主动验证
- 单字段表单重置
可扩展
- 错误消息自定义
- 验证方法自定义
- 错误提示处理自定义
- 自定义表单元素(不借助原生元素)
完成后的使用代码
// 你只要指定 data-scope data-name data-type v-validate-easy 这四个属性的值,然后通过调用this.V.$submit(scope)就可以进行提交表单了
<form><div class="my-form-group" data-scope="register" data-name="email" data-type="input"v-validate-easy="[['required','邮箱为必填项目'],['email']]"><label><div class="label">邮箱</div><input class="input" type="text" spellcheck="false" placeholder="请输入邮箱"/></label></div><div id="pwd" class="my-form-group" data-scope="register" data-name="password" data-type="input"v-validate-easy="[['required','密码不能为空'],['password'],['maxLength',[32],'密码最长为32位']]"><label><div class="label">密码</div><input class="input" type="text" spellcheck="false" placeholder="请再次输入密码"/></label></div><div class="my-form-group" data-scope="register" data-name="password" data-type="input"v-validate-easy="[['required','确认密码不能为空'],['equalTo',['pwd'],'密码输入不一致']]"><label><div class="label">确认密码</div><input class="input" type="text" spellcheck="false" placeholder="请输入邮箱"/></label></div><div class="btn-group"><button class="my-btn" @click.prevent="submit('register')">注册</button><button class="my-btn" @click.prevent="reset('register')">重置</button></div></form>
methods: {reset(scope) {this.V.$reset(scope)},submit(scope) {this.V.$submit(scope, (canSumit,data) => {// canSumit为true时,则所有该scope的所有表单验证通过if(!canSumit) return// 发送请求axios({ url: '/test',data, method: 'post'}).then(() => {// 成功响应处理}).catch(() => {// 错误处理})})}},
对自定义组件使用,就更加简洁
<form><h3>用户登录</h3><my-input label="用户名" data-scope="login" data-name="username" v-validate-easy="[['required']]"></my-input><my-input label="密码" data-scope="login" type="password" data-name="pwd" v-validate-easy="[['required']]"></my-input><div class="btn-group"><button class="my-btn" @click.prevent="submit('login')">登录</button><button class="my-btn" @click.prevent="reset('login')">重置</button></div></form>
vue-validate-easy github地址
欢迎大家star,对该项目有什么问题和建议,欢迎提issue
vue-validate-easy 文档地址
写一个简单易用可扩展vue表单验证插件(vue-validate-easy)相关推荐
- Vue 表单验证插件的写作过程
前段时间,老大搭好了Vue的开发环境,于是我们愉快地从JQ来到了Vue.这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js. ...
- vue表单验证插件 vuerify
表单验证是一个网站或者系统不可或缺的,也是非常重要的一环.使用人工匹配验证的话会非常的复杂,尤其对于大量表单验证更是如此. 当然有一些jQuery 表单验证的插件,或许用着还不错.但是,如果你不想在v ...
- bootstrap的表单验证 vue_vue-form(vue表单验证插件 vue2.2+) 使用指南
vue-form 是一个在vue 中用于表单验证的插件 目前版本为4.1.1 ??Form validation for?Vue.js 2.2+ import VueForm from 'vue-fo ...
- 【VUE 表单验证】vue Element 表单验证中 多层v-for验证方法
vue Element 表单验证中 对象有list列表如何验证 正常情况下只需要<el-form-item> 标签中填入prop数据属性即可. <el-form-item label ...
- JQuery表单验证插件EasyValidator,超级简单易用!
本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以 ...
- 前端框架Vue(11)——Vue+表单验证 VeeValidate 实践
这次来讲一下表单验证插件 VeeValidate,那为什么要结合 Vue 来讲呢?来看一下 github 上的图片就明白了! 为 Vue 而来的!不清楚是不是 Vue 的官方表单验证插件. 废话不多说 ...
- 12个方便易用的jquery表单验证插件
绝大部分网站都是开放注册的,而注册就需要使用表单验证,因为网站都需要对注册用户的信息安全性和合理性做出判断,表单的注册都应该具备完善的验证方式,比如注册使用的手机号是否是真实的?用户填写的验证码是否正 ...
- vue 表单验证按钮事件交由父组件触发
vue 表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法 子组件: //内容部分 <Form ref="formCustom" :model="formC ...
- vue表单验证,多种校验规则
前言 vue 表单验证,具体的大家根据自身项目和框架来,本文以antd举例. 实现 这里以antd 举例 <template><a-form-model ref="rule ...
最新文章
- 机器人如何在不断变化的世界中“找到”自己?
- Scrapy研究和探索(七)——如何防止被ban大集合策略
- [Redis]Redis章2 Redis 持久化
- C# ICSharpCode.SharpZipLib.Zip 的使用
- 产品规划,要考虑哪些方面?
- linux 删除提示没有那个文件或目录,rm 无法删除没有那个文件或目录
- 直播 | 循序渐进 - DM8 数据存储管理
- java环境变量的配置_一文带你学会Java环境变量配置(小白向)
- mac python 图_Python之图片OCR识别(Mac)
- 当我以为这是最后一个Bug,改完就能提交了的时候
- 2017iOS开发最新的打包测试步骤(亲测)
- Win32 Console Application、Win32 Application、MFC三者之间的联系和区别
- t470键盘拆解_张大妈 ThinkPad T470p 首篇 开箱拆机晒物
- Theano入门神经网络(三)
- 联想台式主机拆机教程_联想主机外壳怎么拆开_联想主机怎么拆图解
- 操作系统--磁盘调度题目
- 【程序人生】上海,想说爱你不容易
- 攻防世界misc 新手练习区 高手进阶区 wp
- 设置中文字体解决Zabbix5.0监控图表乱码问题
- winform数独C#的数独游戏
热门文章
- 负压式爬壁机器人_一种负压吸附式仿生爬壁机器人的制作方法
- 暑假集训-8.05总结
- Linux中ls -l(ll)返回结果中的文件访问权限-rw-r--rw-
- HIve常用CLI命令
- BZOJ 2460: [BeiJing2011]元素 线性基
- swift3.0 类字符串转类(字符串转ViewController)
- Java并发专题 带返回结果的批量任务运行 CompletionService ExecutorService.invokeAll
- AD 文档信息设置和制作模板
- DistributionDB过大的原因
- 美国《预防》杂志近期帮大家总结了11种自然疗法来对抗高血压