javascript - 如何使用 reactjs 在表单中添加动态验证

Question

我ant design在我的演示应用程序中使用。我想dynamic validation在我的应用程序中添加手机号码。

在我的表格中有两个字段

1. 选择字段
2. 输入字段

我想在输入字段中添加验证select field（mobile手机号码应为 10 位数字）。换句话说，我只想在用户 从选择框中选择时在输入字段上添加手机号码验证mobile

https://ant.design/components/form/

这是我的代码 https://codesandbox.io/s/holy-voice-o4wbj

<Form.Item>
          {getFieldDecorator("value", {
            rules: [
              { required: true, message: "Please input search value!" },
              { pattern: /[2-9]{2}\d{8}/, message: "Please input !" }
            ]
          })(
            <Input
              style={{ width: 180 }}
              // prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
              placeholder="searchValue"
            />
          )}
        </Form.Item>

我们可以添加这个验证吗？

Answer 1

您需要rules根据一些条件进行设置，如下所示：

 const rules = mobileValidation
    ? [
        { required: true, message: "Please input a number!" },
        { pattern: /^[2-9]{2}\d{8}$/, message: "Please input 10 digit number!" }
      ]
    : null;

由于您只需要 10 位数字，因此您需要在模式^的开头和$结尾添加，regex即/^[2-9]{2}\d{8}$/

jsx

import React, { useState } from "react";
import { Form, Icon, Input, Button, Select } from "antd";

const { Option } = Select;
const SearchForm = props => {
  const [mobileValidation, setMobileValidation] = useState(false);
  const [isOptionSelected, setIsOptionSelected] = useState(false);

  const { getFieldDecorator, getFieldsError } = props.form;

  const handleSubmit = e => {
    e.preventDefault();

    mobileValidation && props.form.validateFields({ force: true });
  };
  const handleChange = value => {
    setIsOptionSelected(true);
    setMobileValidation(value === "mobile no");
  }; 
  const rules = mobileValidation
    ? [
        { required: true, message: "Please input a number!" },
        { pattern: /^[2-9]{2}\d{8}$/, message: "Please input 10 digit number!" }
        // { pattern: /^\d{10}$/, message: "Please input 10 digit number!" }
      ]
    : null;

  return (
    <div style={{ height: 80, display: "flex", justifyContent: "flex-end" }}>
      <Form layout="inline" onSubmit={handleSubmit}>
        <Form.Item>
          {getFieldDecorator("searchBy", {
            // initialValue: this.props.transactionEditableMode ? this.props.transactionEditableModeData.from : '',
            rules: [{ required: true, message: "Please select your From!" }]
          })(
            <Select
              style={{ width: 180 }}
              placeholder="Select a option"
              onChange={handleChange}
            >
              {[
                { text: "Caf Nos", value: "cafs" },
                { text: "mobile no", value: "mobile no" }
              ].map(i => {
                return (
                  <Option key={i} value={i.value}>
                    {i.text}
                  </Option>
                );
              })}
            </Select>
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator("value", {
            rules
          })(
            <Input
              style={{ width: 180 }}
              // prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
              placeholder="search a number"
              name="input"
            />
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Search
          </Button>

          {!isOptionSelected && <h3>Select an option</h3>}
        </Form.Item>
      </Form>
    </div>
  );
};

const WrappedSearchForm = Form.create({ name: "search_form" })(SearchForm);

export default WrappedSearchForm;

那是你要找的吗？让我知道

旁注：阅读validateFields()

Answer 2

那行得通

<Form.Item>
          {getFieldDecorator("value", {
            rules : mobileValidation ? [
                  { required: true, message: "Please input a number!" },
                  { pattern: /^[2-9]{2}\d{8}$/, message: "Please input 10 digit number!" }] : []
          })(
            <Input
              style={{ width: 180 }}
              // prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
              placeholder="search a number"
              name="input"
            />
          )}