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

reactjsjavascriptfront end technology

如今，验证手机号码输入是任何应用程序的必需功能，并且需要验证手机号码的长度。

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

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

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

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

检查用户输入的长度

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

语法

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

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

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

示例

在下面的示例中，我们创建了数字输入。此外，每当输入值发生变化时，我们都会调用 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}$")) {
// 显示错误
} else {
// 隐藏错误
}

在上述语法中，[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);
    // 使用正则表达式匹配电话号码，检查长度是否为 10 位数字。
    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;