如何設定 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


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

查看所有标签

猜你喜欢:

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

组成论

组成论

张学文 / 中国科学技术大学出版社 / 2003-12 / 35.00元

很多事物中都存在组成(成分、构成)问题。作者创立的组成论为此提供统一的认识模型、分析工具、计算方法和原理。它通过广义集合、分布函数和复杂程度三个概念分析事物组成,并揭示了有随机性的事物都遵守最复杂原理。组成论与系统科学、复杂性研究、信息论和热力学第二定律关系密切。本书介绍了它在自然和社会科学中的许多应用,还提出了信息不可增殖、不同形态的复杂程度的互相转化(复杂度定律)等重要论点。自然科学、社会科学......一起来看看 《组成论》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

html转js在线工具
html转js在线工具

html转js在线工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具