antd 表单输入立即校验和点击确认按钮校验

输入立即校验格式:

        <FormItem label='数据值' required={false}>
              {getFieldDecorator('accountValue', {
                validateTrigger: ['onChange', 'onBlur'],
                initialValue: undefined,
                validateFirst: true,
                rules: [
                  {
                    pattern: type === '1020003' && REG_IMSI,
                    message: '请输入正确的IMSI',
                  },
                  {
                    pattern: type === '1020004' && REG_MOBILE,
                    message: '请输入正确的手机号',
                  },
                  {
                    pattern: type === '1020002' && REG_MAC,
                    message: '请输入正确的MAC',
                  },
                  {
                    pattern: type === '1030036' && REG_WX,
                    message: '请输入正确的微信',
                  },
                  {
                    pattern: type === '1030001' && REG_QQ,
                    message: '请输入正确的QQ',
                  },
                  {
                    pattern: type === '1021901' && REG_IMEI,
                    message: '请输入正确的IMEI',
                  },
                  {
                    pattern: type === '1330000' && REG_WEIBO,
                    message: '请输入正确的微博',
                  },
                ],
              })(<Input
                autoComplete="off"
                addonAfter={
                  getFieldDecorator('accountType', {
                    initialValue: type || undefined,
                    onChange: this.accountTypeChange.bind(this),
                  })(
                    <Select style={{ 80}}>
                      <Option value="1020003">IMSI</Option>
                      <Option value="1020004">手机号</Option>
                      <Option value="1021901">IMEI</Option>
                      <Option value="1020002">MAC</Option>
                      <Option value="1030036">微信</Option>
                      <Option value="1030001">QQ</Option>
                      <Option value="1330000">微博</Option>
                    </Select>
                  )}
                style={{  '100%', marginRight: 8 }}
                placeholder="请输入数据值"
                allowClear
              />)}
            </FormItem>

点击确认按钮进行格式校验:

            <FormItem label='数据值' required={false}>
              {getFieldDecorator('accountValue', {
                validateTrigger: ['onSubmit'],
                initialValue: undefined,
                validateFirst: false,
                rules: [
                  {
                    pattern: type === '1020003' && REG_IMSI,
                    message: '请输入正确的IMSI',
                  },
                  {
                    pattern: type === '1020004' && REG_MOBILE,
                    message: '请输入正确的手机号',
                  },
                  {
                    pattern: type === '1020002' && REG_MAC,
                    message: '请输入正确的MAC',
                  },
                  {
                    pattern: type === '1030036' && REG_WX,
                    message: '请输入正确的微信',
                  },
                  {
                    pattern: type === '1030001' && REG_QQ,
                    message: '请输入正确的QQ',
                  },
                  {
                    pattern: type === '1021901' && REG_IMEI,
                    message: '请输入正确的IMEI',
                  },
                  {
                    pattern: type === '1330000' && REG_WEIBO,
                    message: '请输入正确的微博',
                  },
                ],
              })(<Input
                autoComplete="off"
                addonAfter={
                  getFieldDecorator('accountType', {
                    initialValue: type || undefined,
                    onChange: this.accountTypeChange.bind(this),
                  })(
                    <Select style={{ 80}}>
                      <Option value="1020003">IMSI</Option>
                      <Option value="1020004">手机号</Option>
                      <Option value="1021901">IMEI</Option>
                      <Option value="1020002">MAC</Option>
                      <Option value="1030036">微信</Option>
                      <Option value="1030001">QQ</Option>
                      <Option value="1330000">微博</Option>
                    </Select>
                  )}
                style={{  '100%', marginRight: 8 }}
                placeholder="请输入数据值"
                allowClear
              />)}
            </FormItem>        
原文地址:https://www.cnblogs.com/rachelch/p/15498970.html