正則表達式與 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');
}