如何在 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 包，因为它还允许他们根据国家/地区验证护照号码。