如何使用reactjs在表单中添加动态验证 [英] how to add dynamic validation in form using reactjs

问题描述

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

I am using ant design in my demo application. I want to add dynamic validation of mobile number in my application.

在我的表单中有两个字段

In my form there two field

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

我想在mobile中的select field时在输入字段中添加验证(手机号码应为10位数字).换句话说，我想在输入字段中添加手机号码的验证仅当用户从选择框中选择mobile时

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

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>

我们可以添加此验证吗?

can we add this validation ?

推荐答案

有效

<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"
            />
          )}

这篇关于如何使用reactjs在表单中添加动态验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！