专栏首页web秀Vue表单校验插件Vuerify使用详细教程及示例

Vue表单校验插件Vuerify使用详细教程及示例

前言

表单校验,在开发中是非常常见的,为了防止用户误操作,填写错误数据,亦或是防止用户恶意提交数据等,都需要前端同学来做一些简单的表单校验,虽然只是用来防君子的。今天就为大家推荐一款Vue表单校验插件:Vuerify。

什么是Vuerify?

Vuerify 是一款轻量级的数据校验 Vue 插件,同时支持 Vue 1 和 2。可以使用正则、函数定义校验规则,也可以调用全局设置的规则。 插件会在 Vue 实例上注册一个 $vuerify 对象,会对声明的数据进行 watch,实时校验数据合法性。 同时提供的指令还能方便的操作 DOM。

简单的讲:Vuerify就是自定义指令,用来校验页面填写数据。

Vuerify API

它的API也是相当的简介啊,所以轻量。

name

description

type

default Value

$errors

数据校验失败的错误信息, 例如 username 校验失败会返回 { username: '至少 4 位字符' };如果 username 是数组,那么这里返回的也是数组类型

Object

{}

invalid

存在校验失败的字段

Boolean

true

valid

不存在校验失败的字段

Boolean

false

check

检查指定字段,传入数组,返回

Boolean

Function(Array)

clear

清空错误列表

Function

-

这里重点说一下check()方法,这里说了校验指定字段,传入数组,很多同学容易忽略这个,直接用check()方法,校验所有的项目,但是有时候不需要校验所有,比如:分步骤填写的页面,先校验第一步,再下一步,这时候传入数组来校验,就至关重要了。

如何使用Vuerify?

npm i vuerify -S

然后我们通过一个简单示例来给大家讲讲具体使用方法

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="活动名称">
      <el-input v-model="form.name" v-vuerify="form.name"></el-input>
      <span class="error" v-if="errors['form.name']">{{errors['form.name']}}</span>
    </el-form-item>
    <el-form-item label="活动描述">
      <el-input type="textarea" v-model="form.desc" v-vuerify="form.desc"></el-input>
      <span class="error" v-if="errors['form.desc']">{{errors['form.desc']}}</span>
    </el-form-item>
    <el-form-item label="活动标签">
      <el-input v-model="form.label" v-vuerify="form.label"></el-input>
      <span class="error" v-if="errors['form.label']">{{errors['form.label']}}</span>
    </el-form-item>
    <div>错误:{{errors}}</div>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

这里我们在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 位字符", "form.desc": "至少 10 位字符" }
    errors () {
      return this.$vuerify.$errors
    }
  },
  methods: {
    onSubmit() {
      let verifyList = ['form.name', 'form.desc'];
      // check() 校验所有规则,参数可以设置需要校验的数组
      if(!this.$vuerify.check(verifyList)){
        return;
      }
      console.log('验证通过');
    }
  }
}

最后点击onSubmit,来再次校验。但是我们这里传了需要校验的数组,只校验2个字段。

示例:

这里直接点击按钮,校验之后校验前面2个字段:

每个字段分别录入,实时校验:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2019年要学习的前5个前端开发主题

    TypeScript是2018年最令人惊讶的增长故事之一.npm调查发现,有46%的npm用户使用TypeScript。它现在不仅是使用Angular的默认语言...

    技术小工
  • vue/cle3项目运行报错sockjs-node/info解决方案

      继上次将vue项目脚手架工具从vue-cli2.x升级到vue-cli3.x后,除了环境、配置问题外,在运行时出现了一些个新的问题。  启动项目后,在内网非...

    流眸
  • PWA入门:手把手教你制作一个PWA应用

    Web前端的同学是否想过学习app开发,以弥补自己移动端能力的不足?但在面对一众的选择时很多同学略感迷茫,是学习ios还是android开发?是学习原生开发、混...

    Fundebug
  • 使用mpvue开发小程序教程

    网上一搜,解决的方法通常也是五花八门的,什么通过app上的globalData啊、通过存取storage啊、通过一个单独的模块(module)啊、通过Page路...

    极乐君
  • Vue中拆分视图层代码的5点建议

    SPA框架几乎都是基于MVC或MVVM设计模式而建立起来的,这些模式都只是宏观的分层设计,当代码量开始随着项目增大而增多时,问题就会越来越多。许多企业内部的项目...

    大史不说话
  • 后端小白的 Vue 入门笔记 —— 进阶篇

    出处:https://www.cnblogs.com/ZhuChangwu/p/11325489.html

    AiSmart4J
  • web Muse UI — Vue2.0 和 Material Design 结合

    Vue 2.0 发布以来,很多 vue 的开源项目都开始了升级计划,我也思考着 vue-carbon 的升级之路,9月开工,11月完工, Muse UI 闪亮登...

    用户4962466
  • 8 道高频出现的 Vue 面试题及答案

    MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。

    夜尽天明
  • vscode+eslint让你编程快到飞起

    Ewall
  • Vue归纳笔记:Vue 实例如何实现代理 data 对象属性的访问

    对于初学Vue.js的小伙伴而言,可能会认为Vue实例是一个很神奇的东西!因为它除了帮助我们完成双向绑定之外,还在某些细节方面为我们增加了一些理解上面的小烦恼!...

    用户1272076

扫码关注云+社区

领取腾讯云代金券