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

Question

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

查看 documentation，这主要是我想要的，除了字段被认为有效的部分，只要它们不为空，我不知道如何更改验证逻辑只针对特定领域。有办法吗？

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

Answer 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 属性以指定自定义正则表达式。

根据我的 post.

中的文档稍微编辑代码

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>
  );
}

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

Form validation in React Bootstrap with different validation conditions for each field

javascript

node.js

react-bootstrap