javascript - 如何使用reactjs在表单中添加动态验证(how to add dynamic validation in form using reactjs)

Question

I am using ant design in my demo application.(我在演示应用程序中使用了ant design 。)

I want to add dynamic validation of mobile number in my application.(我想在应用程序中添加手机号码的dynamic validation 。) In my form there two field(在我的表格中有两个字段) select field(选择栏位) input field(输入栏) I want to add validation in the input field when select field in mobile (mobile number should be 10 digits).in other words I want to add validation of mobile number on input field only when user select mobile from select box(我想在mobile select field （手机号码应为10位数）时在输入字段中添加验证。换句话说，我只想在用户从选择框中选择mobile时在输入字段中添加手机号码的验证) https://ant.design/components/form/(https://ant.design/components/form/) here is my code https://codesandbox.io/s/holy-voice-o4wbj(这是我的代码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> can we add this validation ?(我们可以添加此验证吗？)   ask by user944513 translate from so

Answer 1

You need to set rules as per some conditions like so:(您需要按照某些条件设置rules ，例如：)

const rules = mobileValidation ? [ { required: true, message: "Please input a number!" }, { pattern: /^[2-9]{2}d{8}$/, message: "Please input 10 digit number!" } ] : null; Since you need only 10 digit number, you need to add ^ at the start and $ at the end of the regex pattern ie /^[2-9]{2}\d{8}$/(由于您只需要10位数字，因此您需要在regex模式的开头添加^ ，在结尾添加$ ，即/^[2-9]{2}\d{8}$/) jsx(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; Is that what you were looking for?(那是您要找的东西吗？) let me know(让我知道) Side note: Read about validateFields()(旁注：了解validateFields（）)