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

【问题标题】：Form validation in React Bootstrap with different validation conditions for each fieldReact Bootstrap 中的表单验证，每个字段的验证条件不同
【发布时间】：2021-06-13 10:22:13
【问题描述】：

我是 react-bootstrap 和 js 的新手，我正在尝试使用 2 个字段（名称和电子邮件）创建一个简单的表单验证，但我希望它们具有不同的验证逻辑（即电子邮件应该检查它是否是有效的电子邮件而名称应该检查它是否为空）。

查看documentation，这主要是我想要的，除了字段被认为是有效的部分，只要它们不为空，我无法弄清楚如何仅更改特定的验证逻辑场地。有办法吗？

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

【问题讨论】：

标签： javascript node.js react-bootstrap

【解决方案1】：

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

从here 开始，required 属性将检查它是否为空，type="email" 将使用等效的正则表达式进行基本电子邮件验证

/^[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=".+@gmail\.com"/>
          <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>
  );
}

【讨论】：