如何使用 VeeValidate 設定自訂驗證規則 ?

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

内容简介：雖然 VeeValidate 已經內建很多驗證規則，但實務上可能有自己的商業邏輯需要驗證，又或者內建的驗證規則不是我們要的，如內建的 Email 驗證規則可能覺得太寬鬆，我們想寫自己的 Regular Expression 驗證 Email …等，此時就需要自訂驗證規則。Vue 2.5.17VeeValidate 2.1.2

雖然 VeeValidate 已經內建很多驗證規則，但實務上可能有自己的商業邏輯需要驗證，又或者內建的驗證規則不是我們要的，如內建的 Email 驗證規則可能覺得太寬鬆，我們想寫自己的 Regular Expression 驗證 Email …等，此時就需要自訂驗證規則。

Version

VeeValidate 2.1.2

Introduction

demo.vue

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

<script>
import Vue from 'vue';
import VeeValidate, { Validator } from 'vee-validate';
import zh_TW from 'vee-validate/dist/locale/zh_TW';

/** Custom Validator */
const getMessage = field => `${field} 格式不正確`;

const validate = value => {
  const regex = /^\w+\.*\w+@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;
  return regex.test(value);
};

const myValidator = {
  getMessage,
  validate,
};

Vue.use(VeeValidate);
Validator.localize('zh_TW', zh_TW);

/** Custom Rule */
Validator.extend('myEmail', myValidator);

export default {
  name: 'demo',
};
</script>

14 行

import VeeValidate, { Validator } from 'vee-validate';

除了 import 基本的 VeeValidate 外，還要額外 import Validator ，這是個 named import。

15 行

import zh_TW from 'vee-validate/dist/locale/zh_TW';

將繁體中文的資源檔 import 進來。

31 行

Validator.localize('zh_TW', zh_TW);

使用 Validator.localize() 設定語系為 zh_TW 。

25 行

const myValidator = {
  getMessage,
  validate,
};

設定自訂的 Validator ，VeeValidate 規定 Validator 必須包含 getMessage() 與 validate() 兩個 method。

18 行

const getMessage = field => `${field} 格式不正確`;

field 傳入 HTML tag 的 name attribute 值，回傳自訂錯誤訊息。

20 行

const validate = value => {
  const regex = /^\w+\.*\w+@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;
  return regex.test(value);
};

value 傳入 HTML 的 value attribute 值，自行設定 Regular Expression 驗證 Email 格式。

34 行

Validator.extend('myEmail', myValidator);

使用 Validator.extend() 設定自訂的 rule 與 validator。

第一個參數為自訂 rule 名稱，為 string
第二個參數為自訂 validator，為 object

如何使用 VeeValidate 設定自訂驗證規則 ?

Conclusion

Validator.extend() 的第一個參數是設定 rule 名稱
Validator.extend() 的第二個參數要傳入 validator，其 interface 一定要有 getMessage() 與 validate() 兩個 method

Sample Code

完整的範例可以在我的 GitHub 上找到

Reference

VeeValidate , Custom Rules

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

查看所有标签

猜你喜欢:

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

码农书籍

屏幕上的聪明决策

Shlomo Benartzi、Jonah Lehrer / 石磊 / 北京联合出版公司 / 2017-3 / 56.90

 为什么在手机上购物的人，常常高估商品的价值？  为什么利用网络订餐，人们更容易选择热量高的食物？  为什么网站上明明提供了所有选项，人们却还是选不到最佳的方案？  屏幕正在改变我们的思考方式，让我们变得更冲动，更容易根据直觉做出反应，进而做出错误的决策。在《屏幕上的聪明决策》一书中，什洛莫·贝纳茨教授通过引人入胜的实验及案例，揭示了究竟是什么影响了我们在屏幕上的决策。 ......一起来看看《屏幕上的聪明决策》这本书的介绍吧!

码农工具

如何使用 VeeValidate 設定自訂驗證規則 ?

Version

Introduction

demo.vue

Conclusion

Sample Code

Reference

屏幕上的聪明决策

CSS 压缩/解压工具

MD5 加密

UNIX 时间戳转换