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

  • 相关阅读:
    Element+Vue.js 选择器常用属性
    常用xml头文件
    【链接】调查显示:超20%美国大学生曾花学生贷款投
    Quartz遇到的问题
    List去重
    SpringDataJPA
    IDEA:Error during artifact deployment. See server log for details.详解
    Quartz定时任务
    多线程条件通行工具——CountDownLatch
    多线程同步工具——Lock
  • 原文地址:https://www.cnblogs.com/chen-cheng/p/10259019.html
Copyright © 2011-2022 走看看