Regex不匹配javascript中电子邮件地址的前导空格和尾随空格

Question

当前，我使用此电子邮件正则表达式：

/^[a-zA-Z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$/

我尝试验证电子邮件如下：

if (!event.target.value.match(/^[a-zA-Z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$/)) {
setEmailStatus('Enter valid email address');
}

但是当使用尾随空格和前导空格输入时，它不会抛出任何错误。例如[e-mail]

如何验证上面正则表达式的空格？

这是完整的代码：

const [ usernamevalues, setUsername ] = React.useState({ username: '' });
const [ emailvalues, setEmail ] = React.useState({ email: '' });
const [ usernameStatus, setUsernameStatus ] = React.useState('');
const [ emailStatus, setEmailStatus ] = React.useState('');
const handleChangeEmail = (prop) => (event) => {
event.preventDefault();
if (event.target.value.length === 0) {
setEmailStatus('This field is required');
} else if (!event.target.value.match(/^[a-zA-Z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$/)) {
setEmailStatus('Enter valid email address');
} else {
setEmailStatus('');
}
/*if (validator.isEmpty(event.target.value)) {
setEmailStatus('This field is required');
}*/
setEmail({ ...emailvalues, [prop]: event.target.value });
};

基于这些错误，我正在尝试启用提交按钮。我正在维护上述字段的状态。

let isEnabled = usernamevalues.username !== '' && usernamevalues.username.length >= 1
&& emailvalues.email !== '' && usernameStatus !== 'This field is required' && usernameStatus !== 'Enter valid username'
&& emailStatus !== 'This field is required' && emailStatus !== 'Enter valid email address'
<TextField
label='Email'
id='outlined-margin-normal'
placeholder='Email'
value={emailvalues.email}
type='email'
className={classes.textField}
margin='normal'
variant='outlined'
onChange={handleChangeEmail('email')}
InputLabelProps={{
classes: {
root: classes.cssLabel,
focused: classes.cssFocused
}
}}
InputProps={{
endAdornment: (
<InputAdornment position='end'>
<EmailOutlinedIcon htmlColor='#1C5FAB' opacity={0.5} />
</InputAdornment>
),
classes: {
root: classes.cssOutlinedainput,
focused: classes.cssFocused,
notchedOutline: classes.notchedOutline,
input: classes.input
}
}}
error={emailStatus ? emailStatus : ''}
helperText={emailStatus !== '' ? emailStatus : null}
/>
<Typography className={classes.error}>{error}</Typography>
<Button
variant='outlined'
className={classes.button}
onClick={handleSubmit}
disabled={!isEnabled}
style={{ backgroundColor: isEnabled ? '#1c60ab' : '#DCE2EB'}}
>
Submit
</Button>

Answer 1

您不需要regex。使用trim()(文档(

使用您的示例：

if (!event.target.value.trim().match(/^[a-zA-Z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$/)) {
setEmailStatus('Enter valid email address');
}

Answer 2

let email = event.target.value.trim();
if (!email.match(/^[a-zA-Z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$/)) {
setEmailStatus('Enter valid email address');
}