我如何验证 React 输入不是空的且有效的电子邮件？

Question

现在表单允许将空的和无效的电子邮件字符串存储到我的 firestore。

在常规 html 输入标签中，我知道使用 required 和 type=email 强制验证。有没有类似使用查克拉的东西Ui？

const SubscribeForm = () => {
    const [input, setInput] = useState("");
    const isError = input === ''

    const handleSubmit = (e) => {

        console.log("saved to firestore , input: " + input)
        e.preventDefault();
        saveEmail(input);
        setInput("Thanks for subscribing!");
    };

    const saveEmail = async (input) => {
        try {
            const docRef = await addDoc(collection(db, "sub-emails"), {
                email: input
            });

            console.log("Document written with ID: ", input);
        } catch (e) {
            console.error("Error adding document: " + input, e);
        }
    };

    return (
        <FormControl isRequired >
            <Text paddingBottom="10px" fontSize="14px" color="white" > Get updated when site goes live!</Text>
            <Input
                isRequired
                value={input}
                onChange={(e) => setInput(e.target.value)} fontSize="13px" placeholder="example@gmail.com" bgColor="white" id='email' type='email' />
            <Button
                onClick={handleSubmit}
                mt={4}
                colorScheme='teal'
                type='submit'
            >
                Submit
            </Button>
        </FormControl>
    )
}

export default SubscribeForm

isRequired 和 type='email' 似乎不起作用

Answer 1

像这样创建自定义函数：

const isValidEmail = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g;

const validateEmail = (e) => {
  if(e.target?.value && e.target.value.match(isValidEmail)){
    showNoValidEmail(false);
    setInput(e.target.value)
  }else{
    showNoValidEmail(true);
  }
}

其中 showNoValidEmail 是一个布尔状态，可以与自定义 html 消息一起使用。

现在，在您的 handleSubmit 中，您可以这样做：

const handleSubmit = (e) => {
        console.log("saved to firestore , input: " + input)
        e.preventDefault();
        if(input && input.length && input.match(isValidEmail)){
          saveEmail(input);
            setInput("Thanks for subscribing!");
        }else{
          //show a error message or something like that
        }
};

我如何验证 React 输入不是空的且有效的电子邮件？

How can I validate React input is not empty and valid email?

reactjs

chakra-ui