如何在 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;

輸出

在本教程中，我們學習瞭如何驗證電話號碼輸入的長度。驗證手機號碼長度的最佳方法是使用正則表示式，因為它還可以驗證手機號碼。