vue form validate 多个input_Vue表单校验插件Vuerify使用详细教程及示例
点击右上方红色按钮关注“web秀”,让你真正秀起来
前言
表单校验,在开发中是非常常见的,为了防止用户误操作,填写错误数据,亦或是防止用户恶意提交数据等,都需要前端同学来做一些简单的表单校验,虽然只是用来防君子的。今天就为大家推荐一款Vue表单校验插件:Vuerify。
Vue表单校验插件Vuerify使用详细教程及示例
什么是Vuerify?
Vuerify 是一款轻量级的数据校验 Vue 插件,同时支持 Vue 1 和 2。可以使用正则、函数定义校验规则,也可以调用全局设置的规则。 插件会在 Vue 实例上注册一个 $vuerify 对象,会对声明的数据进行 watch,实时校验数据合法性。 同时提供的指令还能方便的操作 DOM。
简单的讲:Vuerify就是自定义指令,用来校验页面填写数据。
Vuerify API
它的API也是相当的简介啊,所以轻量。
Vue表单校验插件Vuerify使用详细教程及示例
这里重点说一下check()方法,这里说了校验指定字段,传入数组,很多同学容易忽略这个,直接用check()方法,校验所有的项目,但是有时候不需要校验所有,比如:分步骤填写的页面,先校验第一步,再下一步,这时候传入数组来校验,就至关重要了。
如何使用Vuerify?
npm i vuerify -S
然后我们通过一个简单示例来给大家讲讲具体使用方法
Vue表单校验插件Vuerify使用详细教程及示例
这里我们在input上面使用v-vuerify指令,来匹配校验规则。同时,判断计算属性computed里面的errors,有没有对应的错误,有并将错误显示出来。
js代码
// 引入插件import Vue from 'vue'import Vuerify from 'vuerify'Vue.use(Vuerify)export default { data() { return { form: { name: '', desc: '', label: '' } } }, // 设置校验规则 vuerify: { 'form.name': { test: /w{4,}/, message: '至少 4 位字符' }, 'form.desc': { test: /w{10,}/, message: '至少 10 位字符' }, 'form.label': { test: /w{4,}/, message: '至少 4 位字符' } }, computed: { // 计算属性,获取校验不通过的对象 // 如 { "form.name": "至少 4 位字符
vue form validate 多个input_Vue表单校验插件Vuerify使用详细教程及示例相关推荐
- 【前端3】jquary:页面加载,选择器,隔行换色,Dom,全选,动画,遍历,广告/抽奖,表单校验插件
文章目录 1.jquery框架引入:$("mydiv") 当成id选择器 2.jquery版本/对象:$(js对象) -> jquery对象 3.jquery的页面加载事件: ...
- 轻量级的jQuery表单校验插件: Happy.js
当前已经有许多jQuery表单校验插件,并且有些也很不错,但这些插件功能太强大,使用比较复杂.如果你想找一个简单点的插件 Happy.js 刚好是一个很好的选择. 这个插件是轻量级的,所以只支持一些输 ...
- JQuery 表单校验插件 validate 使用纪录
JS诞生其中一个目的就是将, 服务器端的校验在客户端提前完成, 以避免用户提交数据后, 后台校验报错的糟糕用户体验. 基于JQuery库的有很多优秀的插件, 其中对于浏览器端表单进行验证的基本功能也有 ...
- vue el-form 遇上 v-if,表单校验不生效问题
最近遇到一个坑,在用 element中 的 form 表单校验的时候,因为有些字段是根据特殊条件来设置显示隐藏的,所以用了 v-if 控制显示:但是发现用 v-if 控制的表单元素总是无法被校验. 咦 ...
- form表单校验插件(含详细注解)
说到表单校验,第一个想起来的肯定是jquery的validate.js,该插件的确是很强大,用在项目中也很健壮,但是为什么我选择重新自己封装一个插件呢? 为什么要自己封装表单验证插件: 1.因为项目中 ...
- .ajax表单校验插件,表单验证插件——validate
表单验证插件 表单验证插件 邮箱: $(function () { $("#frmV").validate( { /*自定义验证规则*/ rules: { ? ? ? } }, / ...
- vue表单验证插件 vuerify
表单验证是一个网站或者系统不可或缺的,也是非常重要的一环.使用人工匹配验证的话会非常的复杂,尤其对于大量表单验证更是如此. 当然有一些jQuery 表单验证的插件,或许用着还不错.但是,如果你不想在v ...
- Vue.js 表单校验插件
Vuerify 是一个简单轻量的数据校验插件.内置基础的校验规则和错误提示.可自定义规则,规则类型支持正则.函数或者字符串.校验规则可全局注册也可以组件内注册.插件会给 vm 添加 $vuerify ...
- JS表单验证(HTML+CSS+JS)详细教程
大家好,今天分享一个HTML+CSS+JS表单验证,这是我前两天学习的一个小demo,在这记录一下. 目录 一.效果图 二.介绍 三.代码 (1)HTML (2)CSS (3)JavaScript J ...
最新文章
- 移动中”的HTML5-开源图表库ichartjs-王鹤
- linux socket 阻塞非阻塞设置 fcntl,F_GETFL,F_SETFL,flags
- [luogu P4198] 楼房重建(线段树 + 思维)
- qt使用样式表设置窗口widget为圆角
- 使C#代码现代化——第一部分:属性
- 解决ADT无法在线更新
- Saltstack-7:返回
- 您应该知道的代码审查工具
- Docker-in-Docker: Jenkins CI 内部如何运行 docker
- 360VSQQ的精心之战
- PDF、PMF、CDF是什么
- 常用PC,移动浏览器User-Agent大全
- Paddle 点灯人 之 Tensor
- 计算机如何放置桌面图标,电脑桌面图标怎么随意放置(电脑桌面归纳小窗口)...
- DDD - 概述 - (一)
- 关于内部用户通过easy-ip访问外网
- Java实现xml文件的xsd校验(schema校验)
- 澳大利亚政府为区块链能源项目拨款800万澳元
- LTP 依存句法分析
- Qt Cl.exe不是内部或外部命令,jom.exe ERROR 2 问题解决办法