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

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

内容简介：雖然 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

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

查看所有标签

猜你喜欢:

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

码农书籍

Learning JavaScript

Shelley Powers / Oreilly & Associates Inc / 2006-10-17 / $29.99

As web browsers have become more capable and standards compliant, JavaScript has grown in prominence. JavaScript lets designers add sparkle and life to web pages, while more complex JavaScript has led......一起来看看《Learning JavaScript》这本书的介绍吧!

码农工具

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

Version

Introduction

demo.vue

Conclusion

Sample Code

Reference

Learning JavaScript

随机密码生成器

SHA 加密

XML 在线格式化