zoukankan      html  css  js  c++  java
  • 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)} /> )}

  • 相关阅读:
    0X04-Twisted Teactor TCP Server
    0X03-SocketServer TCP服务器-Studying
    Python3---UDP服务器Studying
    Python3---学习TCP服务器
    (BFS)HDU 4784 Dinner Coming Soon
    (树状数组)HDU
    (状压dp)HDU 4778 Gems Fight!
    (二分)Codeforces Round #425 (Div. 2) C
    (LCA)Codeforces Round #425 (Div. 2) D
    (树的重心/DFS/构造)AtCoder Grand Contest 018 D
  • 原文地址:https://www.cnblogs.com/chen-cheng/p/10259019.html
Copyright © 2011-2022 走看看