ReactJS 如何验证护照号码

护照号码是非常敏感的数据，它总是需要验证的。例如，你正在获取用户的数据用于识别，你可以使用护照号码来验证用户的身份。

有时，用户可能会输入错误的护照号码。然而，你必须需要使用数据库来检查护照号码是否与用户的真实护照号码相符。尽管如此，当用户输入护照号码时，你应该确保用户输入的格式是正确的。

本教程将教我们在ReactJS中验证护照号码的各种方法。

使用验证器NPM包

验证器库包含各种验证方法，isPassportNumber()方法是其中之一，用于验证护照号码。

用户可以在项目目录中使用下面的命令来安装validator NPM包。

npm i validator

语法

用户可以按照下面的语法来使用验证器NPM包来验证护照号码。

if (validator.isPassportNumber(passport, country_code)) {

   // passport number is valid
} else {

   // passport number is invalid
}

在上面的语法中，我们使用了验证器NPM包的isPassportNumber()方法来验证护照号码。

参数

Passport – 它是一个要验证的护照号码。
Country_code – 它是一个国家代码，如’IN’，’US’等，根据国家来验证护照号码，因为每个国家有不同的语法。

例子

在下面的例子中，我们已经导入了验证器库。之后，我们使用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中使用正则表达式来验证护照号码

我们将在这个方法中使用正则表达式来验证护照号码。

语法

用户可以按照下面的语法，在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之间的任何数字。
\ˋ – 第四个字符的空格是可选的。
\d{4} – 在这个空格之后，它应该包含0到9之间的四个数字。
[1-9]$ – 在最后，护照号码应该包含1到9之间的任何数字。

例子

在下面的例子中，我们使用HTML输入法进行输入，并创建了使用正则表达式来验证护照号码的函数。我们将上述正则表达式存储在regex变量中。我们将正则表达式作为test()方法的参考，并将护照号码作为参数传给它。test()方法根据护照号码是有效还是无效返回true。

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;