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

在上面的句法中，我们使用了验证器的isEmail()方法。此外，我们还将new_Email作为isEmail()方法的参数传递以进行验证。

示例

在下面的示例中，我们创建了用户输入，以获取用户的电子邮件。每当输入字段发生更改时，它会调用handleEmail()函数。

在handleEmail()函数中，我们使用’event.target.value’获取新输入，并使用setEmail()来更改电子邮件变量的值。此外，我们还使用验证器的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中验证电子邮件

使用正则表达式在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;