仅允许在使用 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)
  }

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

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

理想场景：

• [e-mail] ✅
• [e-mail] ✅
• ハロー@ハロー.com ❌

解决方法

使用正则表达式试试这个

 const isEmail = email => {
         const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[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;
         }
   };

,

我删除了 yup 并使用了 Ibrahim shamma 建议的答案。

这是解决方案（符合RFC5322）：

utils.tsx

// Regex taken from https://emailregex.com/
export const isEmail = email => {
  const re = /^(([^<>()\[\]\\.,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  if (re.test(String(email).toLowerCase())) {
    return true;
  }
  return false;
};

Component/index.tsx

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;