Reactjs 仅允许使用YUP在电子邮件验证中使用ASCII字符

我正在使用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)
  }

我的代码是这样的：

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或罗马字符

理想情况：


攻击。titan@gmail.com ✅
black@clover.com ✅
ハロー@ハロー.通用域名格式❌
使用正则表达式尝试此操作

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

const isEmail=email=>{
常量re=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@“]+）*）（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]124；（[a-zA Z-0-9]++]；
if（重新测试（字符串（email）.toLowerCase（））{
回复邮件；
}否则{
返回false；
}
};
我删除了
是的，我使用了易卜拉欣·沙玛建议的答案

以下是解决方案（RFC5322兼容）：

utils.tsx

// Regex taken from https://emailregex.com/
export 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 true;
  }
  return false;
};

import React from 'react';
import {isEmail} from '../utils'
export interface ComponentInterface {
 emailInput:string
 setEmailInput: (e: any) => void
}
 
const Component : React.FC<ComponentInterface> = (props:ComponentInterface) => {
 const [inputErrorState, setInputErrorState] = useState(false)
  const handleOnChange = (e) => {
    if (inputErrorState) {
      setInputErrorState(false)
    }
    props.setEmailInput(e.target.value)
  }
  const handleOnSubmit = () => {
    const isValid = isEmail(props.emailInput)
    setInputErrorState(isValid ? false : true)
  }
  return ( <div> 
           <input
            type='email'
            id='props.emailInput'
            value={emailInput}
            onChange={handleOnChange}
          ></input>
        {inputErrorState && (
          <p>Your error message</p>
        )}
 </div> );
}
 
export default Component;