在 React 中验证电子邮件的最简单和最短的方法是什么?
What is the simplest and shortest way for validating an email in React?
我有一张注册表,我想以更简单、更短的方式验证电子邮件。
现在我正在使用长正则表达式进行电子邮件验证,如下所示。
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 & Gender Play a Role in Salary Negotiations? A New Study Says Yes" style={{opacity: 1}}>
</img>
</a>
</div>
</section>
</div>
</div>
);
}
}
在 React 中是否有任何最简单和最短的验证电子邮件的方法?
ES6有没有更短的方法?
这确实是验证电子邮件的最简单方法 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email
但是,由于您使用的是 material ui 组件,正则表达式应该可以解决问题
我在自己的项目中使用这个简单的 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);
}
这是用 Regular Expression 完成的,如果输入是这样构造的 return true
:username@domain.com
我有一张注册表,我想以更简单、更短的方式验证电子邮件。
现在我正在使用长正则表达式进行电子邮件验证,如下所示。
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 & Gender Play a Role in Salary Negotiations? A New Study Says Yes" style={{opacity: 1}}>
</img>
</a>
</div>
</section>
</div>
</div>
);
}
}
在 React 中是否有任何最简单和最短的验证电子邮件的方法?
ES6有没有更短的方法?
这确实是验证电子邮件的最简单方法 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email 但是,由于您使用的是 material ui 组件,正则表达式应该可以解决问题
我在自己的项目中使用这个简单的 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);
}
这是用 Regular Expression 完成的,如果输入是这样构造的 return true
:username@domain.com