React Bootstrap中的表单验证，每个字段具有不同的验证条件

Question

我刚接触到react bootstrap和js，正在尝试创建一个简单的表单验证，其中只有两个字段-名称和电子邮件，但我希望它们有不同的验证逻辑(即电子邮件应该检查它是否是有效的电子邮件，而名称应该检查它是不是空的(。

查看文档，这基本上是我想要的，除了字段被认为是有效的部分，只要它们不是空的，并且我不知道如何仅更改特定字段的验证逻辑。有办法做到这一点吗？

如果不清楚，我希望文本框的行为与文档中的行为相同，在单击提交按钮后，当用户在不再次单击提交按钮的情况下分别键入有效或无效输入时，文本框将更新为绿色或红色边框。

Answer 1

我在浏览HTML输入属性后发现了这一点。我必须添加pattern并将type更改为email。

从这里开始，required属性将检查它是否为空，type="email"将使用与等效的regex进行基本的电子邮件验证

/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}
[a-zA-Z0-9])?(?:.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

如果需要更高级的验证，则添加pattern属性以指定自定义正则表达式。

从我的文章中的文档中稍微编辑一下代码。

function FormExample() {
const [validated, setValidated] = useState(false);
const handleSubmit = (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
};
return (
<Form noValidate validated={validated} onSubmit={handleSubmit}>
<Form.Row>
<Form.Group as={Col} md="6" controlId="validationCustom03">
<Form.Label>Name</Form.Label>
<Form.Control type="text" placeholder="Name" required/>
<Form.Control.Feedback>Looks good!</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">Please provide a valid name.</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="3" controlId="validationCustom04">
<Form.Label>Gmail</Form.Label>
<Form.Control type="email" placeholder="Gmail" required pattern="[e-mail]"/>
<Form.Control.Feedback type="invalid">Please provide a valid gmail.</Form.Control.Feedback>
<Form.Control.Feedback type="valid">Looks good!</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Button type="submit">Submit form</Button>
</Form>
);
}