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

现在，验证手机号的输入是任何应用程序所需的功能，并且需要验证手机号的长度。

许多应用程序将手机号用于身份验证目的，将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;

输出

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

使用正则表达式

我们可以使用正则表达式来验证任何字符串。我们可以使用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;