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={{ width: '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)} /> )}