reactjs - 在使用 YUP 的电子邮件验证中只允许 ASCII 字符

Question

我正在使用 React 和 Yup 来验证电子邮件地址。

我的架构如下所示：

const registrationSchema = yup.object().shape({
  email: yup.string().email().required()
})

我的代码是这样的：

const handleOnSubmit = async () => {
    const formData = {
      email: props.emailInput
    }
    const isValid = await registrationSchema.isValid(formData)
    setInputErrorState(isValid ? false : true)
  }

上面的代码正在进行验证，但如果我输入一个非 ASCII 字符，如日文或中文字符，它就不起作用。例如：ハロー@ハロー.com正在通过验证。

如何在 YUP 验证中只允许 ASCII 或罗马字符？

理想场景：

• [e-mail] ✅</li>
• [e-mail] ✅</li>
• ハロー@ハロー.com ❌</li>

标签： reactjsyup

Answer 1

使用正则表达式试试这个

 const isEmail = email => {
         const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

         if (re.test(String(email).toLowerCase())) {
              return email;
         } else {
             return false;
         }
   };