如何在 ReactJS 中驗證護照號碼？

---

護照號碼是非常敏感的資料，始終需要進行驗證。例如，您正在獲取使用者的資料以進行身份識別，並且可以使用護照號碼來驗證使用者身份。

有時，使用者可能會輸入錯誤的護照號碼。但是，您必須需要使用資料庫來檢查護照號碼是否與使用者的真實護照號碼匹配。此外，當用戶輸入護照號碼時，您應該確保使用者已輸入正確的格式。

本教程將教我們如何在 ReactJS 中驗證護照號碼的各種方法。

使用 Validator NPM 包

Validator 庫包含各種驗證方法，而 isPassportNumber() 方法就是其中之一，用於驗證護照號碼。

使用者可以在專案目錄中使用以下命令安裝 Validator NPM 包。

npm i validator 

語法

使用者可以按照以下語法使用 Validator NPM 包來驗證護照號碼。

if (validator.isPassportNumber(passport, country_code)) {
   
   // passport number is valid
} else {
   
   // passport number is invalid
} 

在上面的語法中，我們使用了 Validator NPM 包的 isPassportNumber() 方法來驗證護照號碼。

引數

• Passport − 要驗證的護照號碼。

• Country_code − 國家程式碼，例如“IN”、“US”等，根據國家/地區驗證護照號碼，因為每個國家/地區的語法都不同。

示例

在下面的示例中，我們匯入了 Validator 庫。之後，我們使用 HTML 輸入來獲取護照號碼作為輸入。我們對輸入使用了“onchange”事件。因此，每當輸入值更改時，它都會呼叫 handlePassportChange() 函式。

handlePassportChange() 函式使用 isPassportNumber() 方法來驗證輸入值。此外，它根據護照號碼有效或無效列印訊息。

import React, { useState } from "react";
import validator from "validator";
function App() {
   let [passport, setPassport] = useState("");
   let [message, setMessage] = useState("");
   function handlePassportChange(event) {
      let current = event.target.value;
      setPassport(current);
      if (validator.isPassportNumber(current, "IN")) {
         setMessage("is Valid Passport Number");
      } else {
         setMessage("is Invalid Passport Number");
      }
   }
   return (
      <div>
         <h3>
            {" "}
            Using the <i> validator NPM package </i> to validate passport number in ReactJS{" "}
         </h3>
         <input type = "text" value = {passport} onChange = {handlePassportChange} />
         <p>
            {" "}
            {passport} {message}
         </p>
      </div>
   );
}
export default App;

輸出

在 ReactJS 中使用正則表示式驗證護照號碼

在這種方法中，我們將使用正則表示式來驗證護照號碼。

語法

使用者可以按照以下語法使用正則表示式來驗證 ReactJS 中的護照號碼。

const regex = /^[A-PR-WY][1-9]\d\s?\d{4}[1-9]$/;
let isValid = regex.test(passport);

在上面的語法中，我們使用了 test() 方法來使用正則表示式驗證護照號碼。

正則表示式的解釋

在這裡，我們解釋了上面語法中使用的正則表示式。

• ^[A-PR-WY] − 在開頭，護照號碼應包含任何大寫字母字元，但 Q、X 和 Z 除外。

• [1-9] − 在字母字元之後，它應包含 1 到 9 之間的任何數字。

• \d − 作為第三個字元，它可以包含 0 到 9 之間的任何數字。

• \s? − 第四個字元的空格是可選的。

• \d{4} − 在空格之後，它應包含四個 0 到 9 之間的數字。

• [1-9]$ − 最後，護照號碼應包含 1 到 9 之間的任何數字。

示例

在下面的示例中，我們使用 HTML 輸入來獲取輸入並建立了函式來使用正則表示式驗證護照號碼。我們將上面的正則表示式儲存在 regex 變數中。我們以 regex 作為 test() 方法的引用，並將護照號碼作為引數傳遞。根據護照號碼是否有效，test() 方法返回 true 或 false。

import React, { useState, useRef } from "react";
function App() {
   let [passport, setPassport] = useState("");
   let [message, setMessage] = useState("");
   const windowSize = useRef([window.innerWidth, window.innerHeight]);
   function handlePassportChange(event) {
      let current = event.target.value;
      setPassport(current);
      
      // regular expression to validate passport number
      const regex = /^[A-PR-WY][1-9]\d\s?\d{4}[1-9]$/;
      if (!regex.test(passport)) {
         setMessage("is Valid Passport Number");
      } else {
         setMessage("is Invalid Passport Number");
      }
   }
   return (
      <div>
         <h3>
            {" "}
            Using the <i> Regular expression </i> to validate passport number in ReactJS {" "}
         </h3>
         <input type = "text" value = {passport} onChange = {handlePassportChange} />
         <p>
            {" "}
            {passport} {message}
         </p>
      </div>
   );
}
export default App; 

輸出

在本教程中，使用者學習瞭如何驗證護照號碼。我們在第一種方法中使用了 Validator NPM 包，在第二種方法中使用了正則表示式。使用者可以使用 Validator NPM 包，因為它還允許他們根據國家/地區驗證護照號碼。