ant Design表单验证笔记

1、pattern正则验证

<Col md={12} sm={24}>
                <FormItem {...formItemLayout} label="班数">
                  {form.getFieldDecorator('classNum', {
                    rules: [{ required: true, message: '请输入开设班数' },
                    {
                      pattern:new RegExp(/^[0-9]*$/),
                      message:'请输入正确的开设班数'
                    }],
                  })(<Input placeholder="请输入开设班数" />)}
                </FormItem>
              </Col>

2、validator自定义校验

const validateEnrollTimelChange = (rule, value, callback) => {
      if (value && value !== form.getFieldValue('enrollStartTime')) {
        const startime = value.format('YYYY-MM-DD HH:mm');
        const endtime = form.getFieldValue('enrollStartTime').format('YYYY-MM-DD HH:mm');
        if (startime && endtime >= startime) {
          callback('报名结束时间不能小于报名开始时间');
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
<FormItem {...formLayout} label="报名结束时间">
                {getFieldDecorator('enrollEndTime', {
                  rules: [
                    { required: true, message: '请输入报名结束时间' },
                    {
                      validator: validateEnrollTimelChange,
                    },
                  ],
                  initialValue: manageData.enrollEndTime,
                })(
                  <DatePicker
                    style={{  '100%' }}
                    disabled={opertype === 'detial' || examStatus === 3 || examStatus === 4 || examStatus === 5}
                    format="YYYY-MM-DD HH:mm"
                    showTime
                  />
                )}
              </FormItem>

文本框验证长度

<FormItem {...formItemLayout} style={{ marginBottom: 3 }} label="学生账号" required>
                  {form.getFieldDecorator('studentAccount', {
                    rules: [{ required: true, message: '请输入学生账号' }, { type: 'string', max: 15, message: '最多15个字符' }],
                    initialValue: studentAccount,
                  })(isNew === 'true' ? <Input placeholder="请输入学生账号" /> : <span>{studentAccount}</span>)}
                </FormItem>
                <FormItem {...formItemLayout} style={{ marginBottom: 3 }} label="学生姓名" required>
                  {form.getFieldDecorator('studentName', {
                    rules: [{ required: true, message: '请输入学生姓名' }, { type: 'string', max: 10, message: '最多10个字符' }],
                    initialValue: studentName,
                  })(<Input placeholder="请输入学生姓名" />)}
                </FormItem>

{ getFieldDecorator('name', { validateTrigger: ['onChange', 'onBlur'], rules: [{ required: true, whitespace: true, message: "请输入选项内容" }, { type: 'string', max: 100, message: '最多100个字符' }], initialValue: item.name })( <Input placeholder="选项内容" onChange={this.oContentChange(index)} /> )}

文本框验证长度

相关推荐