目前 ， 我 使用 这个 电子 邮件 正则 表达式 ：

/^[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');
 }

格式
但是 ， 当 输入 带有 尾随 空格 和 前导 空格 时 ， 它 不会 抛出 任何 错误 。 例如 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 });
};

格式
根据 错误 ， 我 正在 尝试 启用 提交 按钮 。 我 正在 维护 上述 字段 的 状态 。

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>

格式