如何在 ReactJS 中驗證郵箱？

郵箱驗證是身份驗證表單中需要新增的重要功能。如今，大多數應用程式都使用郵箱和一次性密碼進行身份驗證。如果使用者輸入錯誤的郵箱，則他們將無法進行身份驗證。

此外，我們還需要在透過聯絡表單獲取使用者郵箱時驗證郵箱。使用者可能會因某些錯誤而輸入錯誤的郵箱格式。因此，為了糾正使用者的錯誤，我們可以透過顯示您已輸入錯誤郵箱的錯誤訊息來提醒他們。

下面，我們將學習兩種使用不同方法來驗證使用者郵箱地址的方法。

使用 validator npm 包

NPM 包是 ReactJS 中的庫模組。我們可以將其安裝到我們的專案中並透過匯入來使用它。

在這裡，我們需要安裝 validator npm 包。使用者可以將以下命令輸入終端，以在專案目錄中安裝 validator npm 包。

npm i validator

validator 模組包含各種驗證郵箱、電話號碼等的方法。因此，我們可以使用 validator npm 包的 isEmail() 方法來驗證郵箱，該方法根據郵箱是否有效返回布林值。

語法

使用者可以按照以下語法使用 validator npm 包來驗證 ReactJS 中的郵箱。

if (validator.isEmail(new_Email)) {
// email is valid
   } else {
      // email is not valid
   }

在上面的語法中，我們使用了 validator 的 isEmail() 方法。此外，我們還將 new_Email 作為 isEmail() 方法的引數傳遞以進行驗證。

示例

在下面的示例中，我們建立了使用者輸入以從使用者處獲取郵箱。每當輸入欄位發生更改時，它都會呼叫 handleEmail() 函式。

在 handleEmail() 函式中，我們使用“event.target.value”獲取新的輸入，並使用 setEmail() 來更改郵箱變數的值。此外，我們還使用了 validator 的 isEmail() 方法來驗證我們從使用者那裡獲得的郵箱。

import React, { useState } from "react";
import validator from "validator";

const App = () => {
  const [email, setEmail] = useState("bac@gmail.com");
  const [message, setMessage] = useState(" ");
  function handleEmail(event) {
    let new_Email = event.target.value;
    setEmail(new_Email);
    if (!validator.isEmail(new_Email)) {
      setMessage("Please, enter a valid email!");
    } else {
      setMessage("");
    }
  }
  return (
    <div>
      <h2>
        {" "}
        Validate the email
        <i> using validator npm package </i>
      </h2>
      <div style = {{ color: "red" }}> {message} </div>
      <input type = "email" value = {email} onChange = {handleEmail} />
      <div> The email entered is {email} </div>
    </div>
  );
};

export default App;

輸出

使用正則表示式在 ReactJS 中驗證郵箱

正則表示式是類似字串的字元模式。我們需要遵循正則表示式的某些規則來建立它。

我們可以建立一個正則表示式來驗證郵箱，然後使用 test() 方法檢查郵箱是否與郵箱模式匹配。

語法

使用者可以按照以下語法使用正則表示式來驗證 ReactJS 中的郵箱地址。

let emailRegex = /[a-z0-9]+@[a-z]+\.[a-z]{2,3}/;
    if (!emailRegex.test(inputValue)) {
      // invalid email
    } else {
      // valid email
}

在上面的語法中，我們將正則表示式模式作為 test() 方法的參考，並將郵箱作為 test() 方法的引數傳遞以進行驗證。

正則表示式解釋

  • / / - 表示正則表示式的開始和結束。

  • [a-z0-9]+ - 表示至少一個 a 到 z 和 0 到 9 之間的字元。

  • @ - 表示郵箱應始終包含 @ 字元。

  • [a-z]+ – 郵箱在“@”之後應始終包含至少一個字元。

  • \. – 驗證域名之後郵箱中的點。

  • [a-z]{2,3} – 表示郵箱最後在點之後應包含兩個或三個字元。

示例

在下面的示例中，emailRegex 變數包含搜尋模式。每當使用者輸入郵箱輸入時，它都會使用 test() 方法驗證輸入值。如果 test() 方法發現輸入不匹配，則它將使用 setMessage() 設定錯誤訊息。

使用者可以輸入錯誤的郵箱格式並觀察輸出中的錯誤。

import React, { useState } from "react";

const App = () => {
  const [email, setEmail] = useState("yourmail@mail.com");
  const [message, setMessage] = useState(" ");
  function handleEmail(event) {
    let inputValue = event.target.value;
    setEmail(inputValue);

    let emailRegex = /[a-z0-9]+@[a-z]+\.[a-z]{2,3}/;
    if (!emailRegex.test(inputValue)) {
      setMessage("Error! you have entered invalid email.");
    } else {
      setMessage("");
    }
  }
  return (
    <div>
      <h2>
        {" "}
        Validate the email
        <i> using the regular expression </i>
      </h2>
      <div style = {{ color: "red" }}> {message} </div>
      <input type = "email" value = {email} onChange = {handleEmail} />
      <div> Your email is {email} </div>
    </div>
  );
};

export default App;

輸出

在本教程中，使用者學習瞭如何在 ReactJS 中驗證郵箱。我們使用 validator NPM 包和正則表示式來驗證使用者的郵箱地址。使用 NPM 包和正則表示式來驗證郵箱地址各有其優勢。

當您使用正則表示式時，您可以自行自定義它進行驗證，而 Validator npm 包提供了一種標準的驗證方式，因為許多開發人員都對其進行了測試。

更新於：2023年9月8日

6K+ 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始學習
廣告