ReactJS 中的电子邮件验证无法正常工作 [重复]

Posted 2023-03-10

【中文标题】ReactJS 中的电子邮件验证无法正常工作 [重复]

【英文标题】：Email validation in ReactJS is not working properly [duplicate]

【发布时间】：2019-04-22 00:16:17

【问题描述】：

我在反应中有 onSubmit 函数，添加了一些 if/else 语句来验证我的输入，一切正常，但不适用于电子邮件。它一直说我输入了错误的电子邮件地址。

另外，你能看看我的代码，看看我能不能写得更短吗？

  onSubmit = (e) => 

const  firstName, lastName, email, eventDate, validation, errorMessage = this.state
if (firstName, lastName, eventDate, email) 
  this.setState(validation: true)
 else 
  this.setState(validation: false);
  this.setState(errorMessage: 'Please fill in all fields')
  console.log(errorMessage);


if (/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]2,4$/.test(email)) 
  this.setState(validation: true)
 else 
  this.setState(validation: false);
  this.setState(errorMessage: 'Please enter correct email adress')
  console.log(errorMessage);


if (validation) 
  const newEvent = 
    firstName: this.state.firstName,
    lastName: this.state.lastName,
    email: this.state.email,
    eventDate: this.state.eventDate
  

  this.props.addEvent(newEvent);

  this.setState(
    firstName: '',
    lastName: '',
    email: '',
    eventDate: ''
  );


e.preventDefault();

【问题讨论】：

new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]2,15/g).test(email)请试试这个方法。

你应该在你的问题中给出一些测试字符串。

您没有启用不区分大小写的修饰符，正则表达式末尾必须有/i。 /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]2,4$/i.test(email)

【参考方案1】：

您可以使用https://www.npmjs.com/package/validator 为您处理所有这些。

import validator from 'validator';
validator.isEmail(value)

【参考方案2】：

您需要指定case insensitive 匹配（只需将字母'i' 添加到您的正则表达式中），如下所示：

if (/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]2,4$/i.test(email)) 

现在你应该把大写和小写字母都正确了。

【参考方案3】：

请在下面找到电子邮件验证示例：

console.log(new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]2,15/g).test('sddsfdgsg'))
console.log(new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]2,15/g).test('[e-mail]'))
console.log(new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]2,15/g).test('arulgetsolute@gmail.'))