如何验证输入仅包含电子邮箱合法字符，阻止用户输入非法邮箱字符？

你原有代码的正则是用于校验完整邮箱格式的，要实现实时字符校验，只需把正则规则调整为匹配所有合法邮箱允许的字符集合即可，不需要强制匹配完整邮箱结构，只要输入内容中不存在非法字符就返回true。

实现代码 #

function validateEmailAllowedChars(inputStr) {
    // 匹配所有邮箱允许的合法字符，空输入也视为合法
    const allowedCharRegex = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~@-]*$/
    return allowedCharRegex.test(inputStr)
}

功能说明 #

• 入参支持单个字符、未完成的邮箱前缀、完整邮箱地址等任意字符串
• 只有当输入内容中包含邮箱不支持的非法字符时，返回false，其余场景均返回true
• 可直接绑定到输入框的input/keydown事件中，实时拦截非法输入

使用示例 #

validateEmailAllowedChars('m') // true
validateEmailAllowedChars('myaddress') // true
validateEmailAllowedChars('myaddress@') // true
validateEmailAllowedChars('myaddress@mail.com') // true
validateEmailAllowedChars('my address') // 含非法空格，返回false
validateEmailAllowedChars('my<address>@mail.com') // 含非法尖括号，返回false

额外提示：你原有完整邮箱校验代码的逻辑写反了，匹配上正则规则的是合法邮箱，但原代码匹配上正则后反而弹出非法提示，使用时可以调整对应逻辑。

内容的提问来源于stack exchange，提问作者John Glabb