JavaScript >> Javascript 文檔 >  >> Node.js

使用 Validator.js 在 Node.js 中進行表單數據驗證

簡介

幾乎每個網站都涉及通過html 表單收集用戶輸入 .每當我們收集用戶數據時,我們都必須對其進行驗證。在計算機科學中,數據驗證 是檢查輸入的數據是否合理合理的過程。

考慮開發一個電子郵件訂閱表格。在這種情況下,我們要檢查提交的電子郵件是否遵循通用電子郵件格式,例如 [email protected] .如果沒有驗證,惡意用戶可以輸入無用的值,甚至執行 SQL 注入。

在本文中,我們將使用 Validator.js 執行表單數據驗證 - 一個輕量級 NPM 包正是為此目的而構建的。

安裝Validator.js

讓我們為我們的項目創建一個目錄,命名為 string-validator ,進入其中,創建一個 index.js 入口點並使用 npm 使用默認設置初始化 Node 項目 :

$ mkdir string-validator
$ cd string-validator
$ npm init -y

那麼,我們來:

$ touch index.js

初始化項目後,我們可以安裝Validator.js 打包使用:

$ npm install validator

使用 Validator.js 進行表單數據驗證

考慮一個銷售書籍的應用程序,其中首先使用 HTML 表單收集用戶輸入。然後將此數據以 JSON 格式發送到服務器以進行進一步處理。讓我們看看如何為此進行字符串驗證。

假設這是從前端發送的數據。讓我們將這些數據保存在 index.js 文件。另外,我們需要 Validator.js 在我們的文件中:

const validator = require("validator")

const data = {
    "gender": "male",
    "name": {
        "title": "mr",
        "first": "brad",
        "last": "gibson"
    },
    "countryCode": "IE",
    "postalCode": "93027",
    "email": "[email protected]",
    "cell": "081-454-0666",
    "dob": "1993-07-20T09:44:18.674Z",
    "creditCardNumber": "4539415755005206",
    "book": {
        "title": "Harry Potter and the Deathly Hallows",
        "author": "Rowling, J. K.",
        "isbn": "9780545010221",
        "isbnVersion": "13"
    }
}

Validator.js 有很多預置函數來檢查不同輸入的有效性,例如信用卡、手機、電子郵件、郵政編碼等。

首先,讓我們檢查用戶是否向我們提供了有效的信用卡詳細信息。這可以使用:

console.log(validator.isCreditCard(data.creditCardNumber)); // true

為了交付圖書,郵政編碼必須有效。所以,讓我們檢查一下:

console.log(validator.isPostalCode(data.postalCode, data.countryCode)) // false

電話號碼驗證可以使用:

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

console.log(validator.isMobilePhone(data.cell, `en-${data.countryCode}`)); // false

電子郵件驗證可以使用:

console.log(validator.isEmail(data.email)) // true

此外,我們可以使用以下方法進行 ISBN 驗證:

console.log(validator.isISBN(data.book.isbn, data.book.isbnVersion)) // true

然後,我們可以提示用戶重新輸入任何無效信息,以確保我們擁有乾淨、可操作的數據。

結論

在本文中,我們介紹了 Validator.js NPM 包——這是一個用於數據和字符串驗證的輕量級包。


Tutorial JavaScript 教程
  1. canvas context2d.drawImage( webglCanvas, 0, 0 ) 在 webgl 完成渲染之前是否會阻塞?

  2. JS 中的 Leetcode:矩陣零點

  3. 在 Sinon.js 中使用 Mocks 在 JavaScript 中進行測試

  4. 帶有實時評論更新器的簡單 PHP 博客,如 Facebook 評論。

  5. Foreach 推送到數組 JavaScript |示例代碼

  6. 如何使用無服務器功能作為圖像/緩存代理

  7. a11y 和 JS - 看似非傳統的浪漫

  1. 12 個很棒的 CSS3 特性,你終於可以開始使用了

  2. 使用 WebRTC、Websocket、PHP +JS 從頭開始構建視頻會議應用程序 第 16 天

  3. MERN 堆棧身份驗證教程(第 1 部分 - 後端)

  4. 不要使用函數組件,使用 Void 函數組件

  5. 了解 Redux:世界上最簡單的 Redux 入門指南

  6. 將平台與 Web 組件一起使用

  7. 何時使用 useState 與 useReducer Hook In React

  1. 2022 年用於 Web 開發的 5 個 Python 框架

  2. 使用 trackBy 提高 *ngFor 的性能

  3. 在 deno 應用程序中保持苗條

  4. React Horizo​​n UI - 開源 Firebase Starter