如何設定 VeeValidate ?

栏目: JavaScript · 发布时间: 6年前

内容简介:Vue 本身對於 Form Validation 部分支援有限,必須使用 VeeValidate package 才堪稱好用。Vue 2.5.17VeeValidate 2.1.2

Vue 本身對於 Form Validation 部分支援有限,必須使用 VeeValidate package 才堪稱好用。

Version

Vue 2.5.17

VeeValidate 2.1.2

Introduction

$ yarn add vee-validate

如何設定 VeeValidate ?

  1. 安裝完後在 package.json 會看到 vee-validate

demo.vue

<template>
  <div>
    <div>
      <input v-validate="'required|email'" name="email" type="text">
    </div>
    <div>
      <span>{{ errors.first('email') }}</span>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

export default {
  name: 'basic-example',
};
</script>

第 13 行

import Vue from 'vue';
import VeeValidate from 'vee-validate';

VueVeeValidate import 進來。

16 行

Vue.use(VeeValidate);

VeeValidate 傳進 Vue.use()

第 4 行

<input v-validate="'required|email'" name="email" type="text">

<input> 加上 v-validate directive,以 pipe 方式描述要驗證方式。

required|email 表示 必填 且必須是 Email 格式。

name attribute 為必須,將來會傳入 errors.first() 顯示錯誤訊息。

第 7 行

<span>{{ errors.first('email') }}</span>

使用 errors.first() 顯示 第一個 錯誤訊息,傳入為 name attribute。

如何設定 VeeValidate ?

  1. 顯示 必填 錯誤訊息

如何設定 VeeValidate ?

  1. 顯示 Email 格式錯誤訊息

Conclusion

  • VeeValidate 還有更多的設定,本文先介紹最基本安裝與使用

Reference

VeeValidate , Getting Started


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据库索引设计与优化

数据库索引设计与优化

【美】Tapio Lahdenmaki、【美】Michael Leach / 曹怡倩、赵建伟 / 电子工业出版社 / 2015-6 / 79.00元

《数据库索引设计与优化》提供了一种简单、高效、通用的关系型数据库索引设计方法。作者通过系统的讲解及大量的案例清晰地阐释了关系型数据库的访问路径选择原理,以及表和索引的扫描方式,详尽地讲解了如何快速地估算SQL 运行的CPU 时间及执行时间,帮助读者从原理上理解SQL、表及索引结构、访问方式等对关系型数据库造成的影响,并能够运用量化的方法进行判断和优化,指导关系型数据库的索引设计。 《数据库索......一起来看看 《数据库索引设计与优化》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

在线进制转换器
在线进制转换器

各进制数互转换器

SHA 加密
SHA 加密

SHA 加密工具