zoukankan      html  css  js  c++  java
  • 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>        
  • 相关阅读:
    设计数据密集型应用(中英双语)
    缓存设计中的热点问题讨论
    Python Twisted
    Python-memcached的使用用法
    四款免费好用的Bootstrap ui编辑器
    8个强大的基于Bootstrap的CSS框架
    盘点国内网站常用的一些 CDN 公共库加速服务
    分布式缓存系统 Memcached 快速入门
    函数缓存 (Function caching)
    Golang新开发者要注意的陷阱和常见错误
  • 原文地址:https://www.cnblogs.com/rachelch/p/15498970.html
Copyright © 2011-2022 走看看