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

【问题标题】：Email validation in ReactJS is not working properly [duplicate]ReactJS 中的电子邮件验证无法正常工作 [重复]
【发布时间】：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)

标签： javascript regex reactjs state

【解决方案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('arulgetsolute@gmail.com'))
console.log(new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,15}/g).test('arulgetsolute@gmail.'))

【讨论】：