如何仅验证工作电子邮件以及如果用户未输入工作电子邮件，则向他显示 react js antdesing 中的错误

Question

这是表单输入字段

  <Form.Item
                    className="form-elemnt"
                    name="email"
                    label="Email"
                    rules={[
                      {
                        type: 'email',
                        message: 'The input is not valid E-mail!',
                      },
                      {
                        required: true,
                        message: "Please input your Email",
                      },
                     
                    ]}
                  >
                    <Input
                      size="large"
                      type="email"
                      onChange={(e) => {
                        handleEmail(e)
                      }}
                      value={email}
                    />
                  </Form.Item>

这是排除@gmail、@yahoo @outlook @hotmail 的逻辑。只接受工作电子邮件，如 johndoe@stack.com 等

const handleEmail=(e)=>{
    const value = e.target.value
    let domain = value.substring(value.lastIndexOf("@"))
    if(domain == "@gmail.com" || domain == "@yahoo.com" || domain == "@hotmail.com" || domain == "@outlook.com"){

    }
    else{
      setEmail(value)
    }
  }

我希望如果用户输入@gmail @yahoo @outlook @hotmail 之类的电子邮件，输入字段下方应该会显示一条错误消息，请仅输入工作电子邮件

Answer 1

您可以在 handleEmail 中使用 regex 来排除 gmail、yahoo 和 hotmail。

const handleEmail=(e)=>{
  const value = e.target.value
  if (/^([\w.-]+)@(\[(\d{1,3}\.){3}|(?!hotmail|gmail|yahoo)(([a-zA-Z\d-]+\.)+))([a-zA-Z]{2,4}|\d{1,3})(\]?)$/.test(value)){
    // Code...    
  }
  else{
    setEmail(value)
  }
}

如何仅验证工作电子邮件以及如果用户未输入工作电子邮件，则向他显示 react js antdesing 中的错误

How to validate Only working emails & if working email is not input by user show him an error in react js antdesing

reactjs

antd