Javascript 在React中验证电子邮件的最简单和最短方法是什么？

我有一个登记表，我想以简单和简短的方式验证电子邮件

现在我正在使用long regex进行电子邮件验证，如下所示

import React, { Component } from 'react';
import TextField from 'material-ui/TextField';

const emailPattern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

export default class Register extends Component {
  constructor(props) {
    super(props);

    this.state = {
      emailError: '',
      email: ''
    };
  }

handleTouchTap = () => {
    if(this.state.email == '' || this.state.email == null){
      this.setState({
      emailError: "Email cannot be empty"
    });
    }
    else if (!emailPattern.test(this.state.email) && this.state.email.length > 0) {
      this.setState({
        emailError: "Enter a valid email"
      });
    }
    }else{

      let data = {};
      data.email = this.state.email;
      // this.props.registerUser(data);
    }
  };

  changeEmail = (evt) => {
    this.setState({
        email: evt.target.value
      });
  }

  render() {
    return (
      <div>
        <div className="module row" style={{display: 'flex'}}>
          <section className="section">
            <h1>Create an account</h1> 
            <h3>It's free and always will be!</h3>  
            <imports.TextField errorText={this.state.emailError} floatingLabelText="Email" hintText="Enter your email" value={this.state.email} onChange={this.changeEmail} name="email" /> 
          </section>
          <section className="section">
            <div className="feature-link-carousel-cell">
              <a href="https://www.glassdoor.com/blog/do-race-gender-play-a-role-in-salary-negotiations/" data-ga-category="homepage" data-ga-lbl="marketing-whatsnew" data-ga-action="whats-new-click">
                <img width="960" data-original="https://media.glassdoor.com/home/feature-link/reviews/iStock_81884597_MEDIUM.jpg" className="lazy lazy-loaded" src="https://media.glassdoor.com/home/feature-link/reviews/iStock_81884597_MEDIUM.jpg" alt="Do Race &amp; Gender Play a Role in Salary Negotiations? A New Study Says Yes" style={{opacity: 1}}>
                </img>
              </a>
            </div>
          </section>
        </div>
      </div>
    );
  }
}

import React，{Component}来自'React'；
从“物料界面/文本字段”导入文本字段；
const emailPattern=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@“]+）*（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{0-9]{1,3}.[1,3}.[0-9]{1,3}]）；（[a-zA Z-0-9]+-[a-zA 2]）/；
导出默认类寄存器扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电子邮件错误：“”，
电子邮件：“”
};
}
handleTouchTap=（）=>{
if（this.state.email=''| | this.state.email==null）{
这是我的国家({
emailError：“电子邮件不能为空”
});
}
如果（！emailPattern.test（this.state.email）和&this.state.email.length>0），则为else{
这是我的国家({
emailError：“输入有效的电子邮件”
});
}
}否则{
让数据={}；
data.email=this.state.email；
//this.props.registerUser（数据）；
}
};
更改电子邮件=（evt）=>{
这是我的国家({
电子邮件：evt.target.value
});
}
render（）{
返回(
创建帐户
它是免费的，永远都是！
);
}
}

• 在React中是否有最简单、最短的电子邮件验证方法

• 使用ES6有没有较短的方法

---

这确实是验证电子邮件最简单的方法

---

但是，因为您使用的是material ui组件，所以regex应该做到这一点
我在自己的项目中使用了这个简单的util函数：

function validateEmail (email) {
  const regexp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return regexp.test(email);
}

功能验证电子邮件（电子邮件）{
常量regexp=/^（[^（）[\]\\，；：\s@“]+（\.[^（）[\]\，；：\s@“]+）*）（“+”）@（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}]）；（[a-zA Z-0-9]+}.[a-zA 2]）；
返回regexp.test（电子邮件）；
}

---

如果输入是这样构造的：

username@domain.com

没有简单的答案。有很多不同的电子邮件正则表达式。为什么？因为有许多不同的电子邮件变体。强烈建议不要编写自己的正则表达式来验证电子邮件地址。这相当复杂，例如，请参见您的正则表达式需要支持才能正常工作的有效电子邮件地址列表：。只需使用如下npm包：