×

分享一款Vue.js表单验证插件:vee-validate指南

作者:Web前端之家2021.06.22来源:Web前端之家浏览:517评论:1
关键词:vee-validatevuejs
微信公众号

微信公众号

500.jpg

今天来了解下一款Vue.js表单验证插件:vee-validate。

vee-validate是一款很灵活的插件,可以支持很多方式,对于我们开发表单功能非常有用,今天我们一起来学习下吧。首先我们看下它的一些优势。

简单

熟悉且易于设置的声明式验证

灵活

同步、异步、字段级或表单级验证

使用直观的 API 和较小的占用空间更快地构建更快的表单

Minimal

只处理复杂和痛苦的形式问题,让您完全控制其他一切

占用空间小

占用空间小 < 5kb 这使您的应用程序加载速度更快

UI 不可知论

使用原生 HTML 元素或您最喜欢的 UI 库组件

Progressive

无论您使用 Vue.js 作为渐进式增强还是在复杂的设置中,都适用于任何设置

内置规则

包含 25 条以上规则的配套库,涵盖了大多数 Web 应用程序中的大部分需求

i18n

来自世界各地的开发人员贡献的 45 多个内置规则的语言环境

快速设置

安装

# install with yarnyarn add vee-validate@next# install with npmnpm install vee-validate@next --save

或者使用 CDN

<script src="https://unpkg.com/vee-validate@next"></script>

用法

注册FieldForm组件并创建一个简单的required验证器:

import { Field, Form } from 'vee-validate';export default {
  components: {
    Field,
    Form,
  },
  methods: {
    // Validator function
    isRequired(value) {
      return value ? true : 'This field is required';
    },
  },};

然后使用FormField组件来呈现您的表单:

<Form v-slot="{ errors }">
  <Field name="field" :rules="isRequired" />

  <span>{{ errors.field }}</span></Form>

今天主要介绍vee-validate的概要,详细的教程我们后面会陆续发布,请关注Web前端之家更新动态吧!

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/veeValidateIndex.html

网友评论文明上网理性发言 已有1人参与

发表评论:

评论列表

  • alice  发布于 2021-07-03 18:14:12   回复该评论
  • 试用了下,vee-validate挺好用的!

最新留言

  • 土工膜

    资深程序员就是不简单...

  • 大吨位油缸

    谷歌浏览器使用起来很快,没有乱七八糟的插件。www.sdlyxt.com...

  • Web前端之家

    可以加Q群...

  • 访客

    JS点击锚点实现平滑滚动能写一个备注呗,有点看不懂,谢谢...

  • alice

    试用了下,vee-validate挺好用的!...

  • 访客

    封装思路跟原生javascript基本差不多。...

  • qianduan

    这个跟H5做的很像,看上去用react实现起来要简单些。...

  • qianduan

    YYDS的文章,收藏了。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.7 Valyria