React Bootstrap 表单验证 - isInvalid 不设置表单无效

Question

我的表单上有两个文本框，如下：

<div className="row">
<div className="col-md-6">
    { /* Password */}
    <Form.Group>
        <label>Password</label>
        <Form.Control
            required
            type="password"
            isInvalid={formErrors && formErrors.password}
            onChange={(e) => setField("password", e.target.value)}
            value={form.password ?? ""}
        />
        <Form.Control.Feedback className="text-danger" type="invalid">
            {formErrors.password}
        </Form.Control.Feedback>
    </Form.Group>
</div>
<div className="col-md-6">
    { /* Confirm Password */}
        <Form.Group>
            <label>Confirm Password</label>
            <Form.Control
                required
                type="password"
                isInvalid={formErrors && formErrors.confirmPassword}
                onChange={(e) => setField("confirmPassword", e.target.value)}
                value={form.confirmPassword ?? ""}
            />
            <Form.Control.Feedback className="text-danger" type="invalid">
                {formErrors.confirmPassword}
            </Form.Control.Feedback>
        </Form.Group>
</div>

在提交表单时，我会进行以下验证：

setFormErrors({
    
    password: form.password == undefined || form.password == "" ? "Password is required" : "",
    confirmPassword: form.confirmPassword == undefined || form.confirmPassword == "" ? "Please confirm the password" : form.password != form.confirmPassword ? "Passwords do not match" : "",
});


if (event.currentTarget.checkValidity()) {
    console.log("Submitting...", form)
}

如果文本框留空，那么它工作正常，两者都突出显示为红色并且表单不会提交。但是，如果您输入不匹配的密码，该字段会正确突出显示红色，指示错误，但表单仍会提交。

当页面上有标记为无效的控件时，为什么 checkValidity() 会失败？

Answer 1

我强烈建议您依赖库，而不是手动制定表单验证，例如是的。

查看官方 React Bootstrap 文档，您会找到验证表单的好例子。还有 有很多很棒的文档，比如这篇文章 ，祝你好运！