Vue.js 表单校验插件
Vuerify 是一个简单轻量的数据校验插件。内置基础的校验规则和错误提示。可自定义规则,规则类型支持正则、函数或者字符串。校验规则可全局注册也可以组件内注册。插件会给 vm 添加 $vuerify 对象,同时 watch 数据并校验合法性,如果有错误会存入 vm.$vuerify.$errors。
安装
npm i vuerify -S
使用
安装插件
import Vue from 'vue' import Vuerify from 'vuerify'Vue.use(Vuerify, /* 添加自定义规则 */)
添加自定义规则
test 可以是正则或者函数
{required: {test: /\S+$/,message: '必填项'} }
组件内注册
{data () {username: '',password: ''},vuerify: {username: {test: /\w{4,}/, // 自定义规则,可以是函数,正则或者全局注册的规则(填字符串)message: '至少 4 位字符'},password: 'required' // 使用全局注册的规则} }
API
$vuerify 包含如下属性
name description type default Value
$errors 数据校验失败的错误信息, 例如 username 校验失败会返回 { username: '至少 4 位字符' } Object {}
invalid 存在校验失败的字段 Boolean true
valid 不存在校验失败的字段 Boolean false
check 检查指定字段,传入数组,返回 Boolean Function(Array) -
clear 清空错误列表 Function -
v-vuerify
该指令可以在表单组件触发 blur 事件时验证数据并为组件设置类名(默认为 .vuerify-invalid)。可以是 input 等原生组件,也可以是自己封装过的组件。提供两个版本
安装
# Vue 1.x npm v-vuerify -S# Vue 2.0 npm v-vuerify-next -S
用法
import Vue from 'vue' import VuerifyDirective from 'v-vuerify' // Vue1.x import VuerifyDirective from 'v-vuerify-next' // Vue2.0Vue.use(VuerifyDirective) <input v-model="username" v-vuerify="'username'"><x-input :value.sync="password" v-vuerify="'password'"></x-input>
Params
verifyInvalidClass
默认类名为 vuerify-invalid
<input v-model="username" v-vuerify="'username'" vuerify-invalid-class="error">
Modifiers
parent
如果 vuerify 是在父组件注册的,那么就需要指定 parent,让指令可以从父组件获取对应的 $vuerify,具体看 demo
Events
vuerify-invalid
vuerify-valid
Github: https://github.com/QingWei-Li/vuerify
转载于:https://www.cnblogs.com/yuzhengbo/p/6594511.html
Vue.js 表单校验插件相关推荐
- vue form validate 多个input_Vue表单校验插件Vuerify使用详细教程及示例
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 表单校验,在开发中是非常常见的,为了防止用户误操作,填写错误数据,亦或是防止用户恶意提交数据等,都需要前端同学来做一些简单 ...
- 轻量级的jQuery表单校验插件: Happy.js
当前已经有许多jQuery表单校验插件,并且有些也很不错,但这些插件功能太强大,使用比较复杂.如果你想找一个简单点的插件 Happy.js 刚好是一个很好的选择. 这个插件是轻量级的,所以只支持一些输 ...
- 【前端3】jquary:页面加载,选择器,隔行换色,Dom,全选,动画,遍历,广告/抽奖,表单校验插件
文章目录 1.jquery框架引入:$("mydiv") 当成id选择器 2.jquery版本/对象:$(js对象) -> jquery对象 3.jquery的页面加载事件: ...
- 通用的JS表单验证插件代码
一个通用的JS表单验证插件代码.使用方法:第一步:需设定表单项数据类型,第二步:实例表单验证,验证错误提示说明(程序有自带相关错误提示,可自定义每项验证错误提示时文本,只需添加msg). [task] ...
- form表单校验插件(含详细注解)
说到表单校验,第一个想起来的肯定是jquery的validate.js,该插件的确是很强大,用在项目中也很健壮,但是为什么我选择重新自己封装一个插件呢? 为什么要自己封装表单验证插件: 1.因为项目中 ...
- activeform表单中的旧数据怎么显示_三分钟为你细数 Vue el-form 表单校验的坑点
背景 Vue 的 el-form 提供了表单校验功能,通过 :rules 属性设置校验规则,并通过 el-form-item 的 prop 属性绑定校验规则.通过封装,让前端校验更方便.具体使用过程中 ...
- js-最常用的js表单校验1
最近写了无数各种形式的表单,记录下奇奇怪怪的校验规则~ 一:首先是element自带的rules校验规则: element作为常用框架,自带rules属性简单易懂,官方文档一目了然,不再赘述,应付常用 ...
- .ajax表单校验插件,表单验证插件——validate
表单验证插件 表单验证插件 邮箱: $(function () { $("#frmV").validate( { /*自定义验证规则*/ rules: { ? ? ? } }, / ...
- JQuery 表单校验插件 validate 使用纪录
JS诞生其中一个目的就是将, 服务器端的校验在客户端提前完成, 以避免用户提交数据后, 后台校验报错的糟糕用户体验. 基于JQuery库的有很多优秀的插件, 其中对于浏览器端表单进行验证的基本功能也有 ...
最新文章
- HTML5-用canvas画布rotate字体旋转(中国象棋棋谱)。
- 关联容器的插入操作简单举例
- 区间调度之区间交集问题
- Windows下文件名或目录的简写
- Javaweb经典三层架构的演变
- Git:代码冲突常见解决方法
- Python(十七):python的编程规范、PEP8
- Flash Builder 4.6 序列号
- 电视盒子线刷固件教程B860AV2.1-A-M-T版
- 计算机电缆对绞节距,耐高温双绞计算机电缆DJFFP2√厂家
- ppt文件怎么压缩,ppt压缩的办法步骤
- Ubuntu清空回收站提示权限不够的解决办法
- 牛逼的架构 vs ‘牛逼’ 的人生
- 抖店与淘宝有什么不同?
- 雷电模拟器adb devices返回127.0.0.1:5555 offline分析和解决办法
- 中国特殊配方奶粉市场销售渠道及营销策略研究报告(2022-2027年)
- linux tar xzmf,有人吗??IT大神求助
- 跨考计算机面试英语自我介绍,2019考研复试面试英语自我介绍范文(2)
- ECCV2018 | PKT_概率知识蒸馏
- 聊聊让开发头疼的一句话需求那些事
热门文章
- laravel运用redis存储数据和读取的方式
- 小程序添加和删除新元素功能实例
- 记忆化搜索斐波那契c语言,记忆化搜索--优化斐波那契数列递归函数
- ThinkPHP6项目基操(20.实战部分 数据库操作返回值总结)
- PHP笔记-打印99乘法表例子
- Spring Boot笔记-使用RedirectAttributes重定向后也可以显示填写的信息
- QML笔记-使用connect界面数据交互(qml中Designer使用)
- Java学习笔记-Spring IoC 通过XML把Bean给IoC容器
- Linux学习笔记-Makefile中的变量及函数
- nginx和tomcat搭配使用,让nginx可以访问tomcat下面的静态资源