Question

在JSX for ReactJS中，我尝试在电子邮件字段上进行正则表达式验证，而无需依赖（例如Validator），这是我现在拥有的：

isEmailInvalid = ({ email }) => {
        if (email.value.match(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/)) {
            return false;
        } else {
            return true;
        }
    };

和其他一些，但是没有一个起作用。当我搜索“ reactjs regex验证”时，我得到了各种各样的响应，但它们都没有真正为我起作用，所以我想问：

如何在带有JSX的ReactJS中进行正则表达式验证，而无需任何依赖？

Answer 1

在onChange回调上，使用输入值调用此函数。如果输入的电子邮件格式正确，此功能将不会执行任何操作，但是如果格式出现任何问题，它将提醒错误的电子邮件。

<input
 onChange={e => validateEmail(e.target.value)}
/>

验证

const validateEmail = (mail) => {
 if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail))
  {
    return (true)
  }
    alert("You are writing invalid email address!")
    return (false)
}

我希望这对您有帮助。

Answer 2

我尽量避免不惜一切代价编写正则表达式。虽然这不能回答您如何使用正则表达式来验证电子邮件，但这是我使用验证器来做到的。首先获取包裹。

npm install validator

导入项目

import validator from 'validator';

使用

let checkIfValidEmail = validator.isEmail(email); // true for good email

希望这对您有所帮助。

如何在ReactJS中设置电子邮件的正则表达式验证？

2 个答案: