正则表达式与 javascript 中 email 地址的前导和尾随空格不匹配

Question

目前，我使用这个 email 正则表达式：

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

我尝试验证 email，如下所示：

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

但是当使用尾随和前导空格输入时，它不会引发任何错误。 例如hello@gmail.com

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

这是完整的代码：

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 });
};

根据错误，我正在尝试启用提交按钮。 我正在为上述字段维护 state。

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

你不需要正则表达式。 使用trim() ( 文档)

使用您的示例：

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