如何在 ReactJS 中验证手机号码长度？

如今，手机号码输入的验证是任何应用程序都需要的一个功能，它需要验证手机号码的长度。

许多应用程序使用手机号码进行身份验证，将 OTP 发送到用户的手机号码以成功进行身份验证。如果用户输入错误的手机号码，应用程序可能会遇到发送 OTP 的问题。

因此，在用户提交注册手机号码或验证应用程序之前，我们的应用程序应该验证手机号码的长度。

本教程将向我们介绍使用 ReactJs 验证手机号码的各种方法。

在开始之前，用户需要设置 React 项目。

检查用户输入的长度

在这种方法中，我们将验证输入的长度。每当输入值发生变化时，我们将检查输入长度是否等于 10，如果等于 10，则可以隐藏错误消息。如果输入长度不等于 10，则可以显示错误消息以验证输入。

语法

用户可以按照以下语法使用 length 属性验证电话号码的长度。

if (new_Number_length > 10 || new_Number_length < 10) {
   setShowError(true);
} else if (new_Number_length == 10) {
   setShowError(false);
}

在上面的语法中，当用户输入的电话号码长度小于或大于 10 时，我们将设置为 true 以显示错误消息。

示例

在下面的示例中，我们创建了数字输入。此外，每当输入值发生变化时，我们都会调用 handlePhoneNumber() 函数。

在 handlePhoneNumber() 函数中，我们使用事件获取最新的输入值，并使用 length 属性获取输入的长度。此外，我们使用 setPhoneNumber() 函数将最新值设置为 phoneNumber。

接下来，我们使用 if-else 语句验证电话号码的长度，并根据电话号码的长度为 showError 变量设置 true 或 false 值。

import React, { useState } from "react";

const App = () => {
  const [phoneNumber, setPhoneNumber] = useState("0123456789");
  const [showError, setShowError] = useState(false);
  function handlePhoneNumber(event) {
    let new_Number = event.target.value;
    let new_Number_length = new_Number.length;
    setPhoneNumber(new_Number);

    if (new_Number_length > 10 || new_Number_length < 10) {
      setShowError(true);
    } else if (new_Number_length == 10) {
      setShowError(false);
    }
  }
  return (
    <div>
      <h2> Validate the length of the mobile number using ReactJS </h2>
      {showError ? (
        <div style = {{ color: "red" }}> Invalid Mobile Number Length </div>
      ) : (
        <div> Valid Mobile number. </div>
      )}
      <input type = "number" value = {phoneNumber} onChange={handlePhoneNumber} />

      <div> The phone number is +91 {phoneNumber} </div>
    </div>
  );
};

export default App;

输出

使用正则表达式

我们可以使用正则表达式来验证任何字符串。我们可以使用 match() 方法通过将字符串与任何正则表达式匹配来验证字符串。

我们将创建一个正则表达式，用于匹配字符串中的数字，并且字符串的长度等于 10。

语法

用户可以按照以下语法使用正则表达式来验证电话号码的长度。

if (!new_Number.match("^[0-9]{10}$")) {
   // show error
} else {
   // hide error
}

在上面的语法中，[0-9] 表示仅数字，{10} 表示字符串长度。“$”表示从字符串末尾开始的长度。

示例

在下面的示例中，我们像在第一个示例中那样从用户那里获取电话号码输入。每当用户更改输入时，我们都会使用正则表达式验证输入值。

根据 match() 方法的布尔结果，我们设置错误消息以显示。

import React, { useState } from "react";

const App = () => {
  const [phoneNumber, setPhoneNumber] = useState("0123456789");
  const [errorMessage, setErrorMessage] = useState(
    "Your phone number is not valid!"
  );
  function handlePhoneNumber(event) {
    let new_Number = event.target.value;
    setPhoneNumber(new_Number);
    // Match phone number with a regular expression to check if the length is 10 digits.
    if (!new_Number.match("^[0-9]{10}$")) {
      setErrorMessage("Your phone number is not valid!");
    } else {
      setErrorMessage("Phone Number is valid!");
    }
  }
  return (
    <div>
      <h2>
        {" "}
        Validate the length of the mobile number using{" "}
        <i> Regular expression </i> in ReactJS.{" "}
      </h2>
      <div> {errorMessage} </div>
      <input
        type = "number"
        value = {phoneNumber}
        onChange = {handlePhoneNumber}
        maxLength = "10"
      />
      <div> The phone number is +91 {phoneNumber} </div>
    </div>
  );
};

export default App;

输出

在本教程中，我们学习了如何验证电话号码输入的长度。验证手机号码长度的最佳方法是使用正则表达式，因为它还可以验证手机号码。

更新于: 2023年9月8日

1K+ 阅读量

启动你的 职业生涯

通过完成课程获得认证

开始学习
广告