引領技術潮流：六大頂級JavaScript驗證庫解析

前言

在現代編程中，數據驗證是一個非常重要的環節。本文將探索六種不同的JavaScript數據驗證庫，分別介紹它們的概述，主要特性，使用示例和使用場景。

歡迎訂閱專欄：JavaScript腳本宇宙

1. Validator.js：一個用于字符串驗證和清理的庫

1.1 概述

Validator.js 是一個用于字符串驗證和清理的 JavaScript 庫，它提供了一系列豐富的驗證方法和清理（sanitize）方法。

const validator = require('validator');console.log(validator.isEmail('foo@bar.com')); //=> true

1.2 主要特性

該庫主要具有以下兩個特性：

1.2.1 驗證方法

Validator.js 提供了大量的字符串驗證方法，如 isEmail(), isMobilePhone(), isURL() 等，能夠滿足各種場景下的驗證需求。

const validator = require('validator');console.log(validator.isEmail('foo@bar.com')); //=> true
console.log(validator.isMobilePhone('13100000000', 'zh-CN')); //=> true
console.log(validator.isURL('http://foo.bar')); //=> true

1.2.2 清理方法

除了驗證方法，Validator.js 還提供了一些可以將輸入字符串清理成特定格式的方法，如 normalizeEmail(), blacklist(), whitelist() 等。

const validator = require('validator');console.log(validator.normalizeEmail(' FOO@BAR.COM ')); //=> 'foo@bar.com'
console.log(validator.blacklist('abc@123', '@')); //=> 'abc123'
console.log(validator.whitelist('abc@123', 'abcdefghijklmnopqrstuvwxyz123')); //=> 'abc123'

1.3 使用示例

以下是一個使用 Validator.js 對用戶注冊信息進行驗證的簡單示例：

const validator = require('validator');let userData = {email: ' FOO@BAR.COM ',mobile: '13100000000',password: 'password'
};// Normalize email
userData.email = validator.normalizeEmail(userData.email);// Validate email
if (!validator.isEmail(userData.email)) {console.log('Invalid email.');
}// Validate mobile phone number
if (!validator.isMobilePhone(userData.mobile, 'zh-CN')) {console.log('Invalid mobile phone number.');
}// Validate password length
if (!validator.isLength(userData.password, {min:6, max: 12})) {console.log('Password length should be between 6 and 12.');
}

1.4 使用場景

由于 Validator.js 提供了大量的驗證和清理方法，你幾乎可以在任何需要對用戶輸入進行驗證的場合使用它，例如：

• 用戶注冊信息驗證
• 表單數據驗證
• API 請求參數驗證

• 2. Yup：一個用于構建模式化驗證的JavaScript對象模式驗證庫

官方地址：Yup Github

2.1 概述

Yup是一個基于Promise的JavaScript對象模式驗證庫。它允許你構造復雜的、嵌套的對象模式，同時提供強大的錯誤消息管理。

2.2 主要特性

2.2.1 構建模式的方法

Yup提供了一種鏈式調用的方式來定義驗證模式。例如：

const schema = yup.object().shape({name: yup.string().required(),age: yup.number().positive().integer(),email: yup.string().email(),
});

以上代碼定義了一個對象模式，包含name（必須是字符串）、age（必須是正整數）和email（必須是電子郵件格式）三個字段。

2.2.2 驗證方法

Yup提供了異步的validate()方法和同步的validateSync()方法進行驗證。例如：

let person = {name: 'Jim',age: 20,email: 'jim@example.com'
};schema.validate(person).then(function (valid) {console.log(valid);  
}).catch(function (err){console.error(err);
});

以上代碼會對person對象根據前面定義的模式進行驗證，如果符合模式定義則打印true，否則拋出錯誤。

2.3 使用示例

以下是一個完整的使用示例：

const yup = require('yup');let schema = yup.object().shape({name: yup.string().required(),age: yup.number().positive().integer(),email: yup.string().email(),
});let person = {name: 'Jim',age: '20', email: 'jim@example.com',
};schema.isValid(person).then(function(valid) {console.log(valid); // => true
});

2.4 使用場景

Yup適用于任何需要對象模式驗證的場景，特別是處理復雜的、嵌套的對象模式時，Yup顯得尤為強大和靈活。無論是在Node.js服務器端，還是在各種前端框架（如React/Vue等）中，Yup都可以發揮其強大的驗證功能。

3. Joi：一個強大的，面向對象的 JavaScript 驗證庫

3.1 概述

Joi 是一個值模式描述語言和驗證器，它旨在在JavaScript對象的上下文中進行聲明式，人類可讀的驗證。Joi允許你創建藍圖或者模式來驗證JavaScript對象(例如表單提交內容或者API請求參數)。如果驗證失敗，Joi返回一個錯誤詳細說明哪些部分沒有通過驗證。

3.2 主要特性

3.2.1 面向對象的結構

Joi 的面向對象的結構使其易于使用。每個驗證方法都返回一個新的模式，可以被鏈式調用。

const schema = Joi.object({username: Joi.string().alphanum().min(3).max(30).required(),password: Joi.string().pattern(new RegExp('^[a-zA-Z0-9]{3,30}$')),
});

3.2.2 驗證方法

Joi提供了許多驗證方法，包括但不限于 string，number，array，boolean等。每種類型都有一套自己的驗證規則。

const schema = Joi.object({name: Joi.string().min(3).required(),age: Joi.number().integer().min(0),likes: Joi.array().items(Joi.string()),
});

3.3 使用示例

以下是一個使用Joi驗證一個簡單對象的例子：

const Joi = require('joi');const schema = Joi.object({username: Joi.string().alphanum().min(3).max(30).required(),birthyear: Joi.number().integer().min(1900).max(2013),email: Joi.string().email({ minDomainSegments: 2})
});const data = {username: 'abc',birthyear: 1994,email: 'example@example.com'
};const validationResult = schema.validate(data);
if (validationResult.error) {console.log(validationResult.error.details);
} else {console.log('Validation passed!');
}

在這個例子中，我們定義了一個包含username、birthyear和email三個字段的對象的模式，并使用這個模式去驗證一個實際的數據對象。如果數據對象滿足模式的要求，schema.validate(data)會返回一個沒有錯誤的結果；否則，它會返回一個包含錯誤詳情的對象。

3.4 使用場景

Joi 最常見的使用場景是驗證API請求的參數。例如，當我們設計一個RESTful API時，可以使用Joi來驗證請求體中的JSON數據。如果數據不滿足我們預定義的模式，我們可以直接返回一個錯誤響應，告訴客戶端哪里出錯了。

以上就是對 Joi 這個強大的、面向對象的 JavaScript 驗證庫的介紹，更多詳情和文檔請訪問其官方網站。

4. Express-validator：一個基于 express.js 的中間件，用于驗證請求數據

Express-validator 是一個強大而靈活的表單驗證庫。 它是基于 express.js 的中間件，可以輕松處理任何類型的服務器端驗證。

4.1 概述

Express-validator 可以幫助你驗證、清理以及對傳入的請求數據進行轉換，確保在處理應用程序邏輯之前，你的數據是正確和有效的。

4.2 主要特性

4.2.1 驗證方法

Express-validator 提供了一系列的驗證方法，從常見的如非空、長度限制，到復雜的正則匹配，幾乎可以應對所有的驗證需求。

4.2.2 中間件使用

Express-validator 作為 express 的中間件，可以很方便的嵌入到任何 express 應用的路由處理中，提供即時并且方便的驗證功能。

4.3 使用示例

要使用 express-validator 進行數據驗證，只需要將其添加為您的請求處理流程的一部分即可:

const { check, validationResult } = require('express-validator');app.post('/user', [// username must be an emailcheck('username').isEmail(),// password must be at least 5 chars longcheck('password').isLength({ min: 5 })
], (req, res) => {// Finds the validation errors in this request and wraps them in an object with handy functionsconst errors = validationResult(req);if (!errors.isEmpty()) {return res.status(400).json({ errors: errors.array() });}User.create({username: req.body.username,password: req.body.password}).then(user => res.json(user));
});

4.4 使用場景

無論你是處理簡單的用戶注冊表單，還是更復雜的產品信息錄入表單，Express-validator 都能提供強大而又靈活的解決方案。

5. VeeValidate: 基于模板的表單驗證庫，專為 Vue.js 設計

VeeValidate 是一個基于模板的驗證框架，專為 Vue.js 設計。它允許你在 Vue.js 應用程序中使用模板標記進行驗證。

5.1 概述

VeeValidate 是一款輕量級插件，其 API 配合 Vue.js 的組件系統非常實用。通過提供一些自定義的規則和驗證方法，使開發者們可以方便地進行表單驗證。

5.2 主要特性

5.2.1 基于模板的驗證

VeeValidate 允許你在模板中添加驗證規則，這樣可以非常直觀地看到每個字段所需的驗證規則有哪些。下面是一個基本的示例：

<template><form @submit.prevent="submit"><input v-model="name" v-validate="'required'" name="name" type="text"/><span v-show="errors.has('name')">{{ errors.first('name') }}</span><input v-model="email" v-validate="'required|email'" name="email" type="text"/><span v-show="errors.has('email')">{{ errors.first('email') }}</span><button type="submit">Submit</button></form>
</template>

5.2.2 配合 Vue.js 的使用

作為一個專門為 Vue.js 設計的插件，VeeValidate 所有的配置都能和 Vue.js 完美結合。例如，你可以使用 Vue.js 的 v-model 指令和 v-show 指令來實現表單驗證的顯示和隱藏。

5.3 使用示例

下面是一個簡單的使用示例：

import { ValidationProvider, extend } from 'vee-validate';
import { required, email } from 'vee-validate/dist/rules';// 添加 'required' 和 'email' 規則
extend('required', {...required,message: 'This field is required'
});extend('email', {...email,message: 'This field must be a valid email'
});new Vue({el: '#app',components: {ValidationProvider},data() {return {name: '',email: ''};},methods: {submit() {console.log('Form Submitted!');}}
});

5.4 使用場景

當你需要在 Vue.js 項目中進行表單驗證時，VeeValidate 是一個很好的選擇。它提供了多種驗證規則，并且允許你添加自定義規則，滿足不同的需求。

6. Formik：React 應用的表單狀態管理和驗證庫

6.1 概述

Formik 是一款強大的 React 表單庫，它可以簡化復雜表單狀態的管理，并提供了易于使用的驗證方法。Formik 的設計理念是通過簡化代碼結構，盡量減少不必要的渲染并且提高性能。

import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';

6.2 主要特性

Formik 提供了一整套解決方案，包括表單狀態管理、驗證方法等。

6.2.1 表單狀態管理

Formik 提供 values、errors 和 touched 三個對象來分別處理表單數據、錯誤信息和觸摸信息，讓你無需再進行繁瑣的手動管理。

<FormikinitialValues={{ email: '', password: '' }}validate={values => {const errors = {};if (!values.email) {errors.email = 'Required';} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {errors.email = 'Invalid email address';}return errors;}}
//...    
/>

6.2.2 驗證方法

Formik 支持同步和異步兩種驗證方式，同時也支持使用 Yup 這樣的第三方驗證庫。

<FormikinitialValues={{ email: '', password: '' }}validationSchema={Yup.object({email: Yup.string().email('Invalid email address').required('Required'),})}
//...
/>

6.3 使用示例

以下是一個簡單的登錄表單示例：

import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';export const LoginForm = () => (<div><h1>Login</h1><FormikinitialValues={{ email: '', password: '' }}validationSchema={Yup.object({email: Yup.string().email('Invalid email address').required('Required'),password: Yup.string().required('Required'),})}onSubmit={(values, { setSubmitting }) => {setTimeout(() => {alert(JSON.stringify(values, null, 2));setSubmitting(false);}, 400);}}><Form><label htmlFor="email">Email Address</label><Field name="email" type="email" /><ErrorMessage name="email" component="div" /><label htmlFor="password">Password</label><Field name="password" type="password" /><ErrorMessage name="password" component="div" /><button type="submit">Submit</button></Form></Formik></div>
);

6.4 使用場景

Formik 是處理 React 中的表單狀態管理和驗證最佳選擇。無論你是在構建簡單的登錄表單，還是需要處理復雜業務邏輯的大型表單，都可以使用 Formik 來簡化你的開發流程。

總結

每個JavaScript數據驗證庫都有其獨特的功能和使用場景。選擇哪一種主要取決于你的需求和項目類型。理解每個庫的工作原理和優缺點，可以幫助開發者更高效地進行數據驗證操作。