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>        
  • 相关阅读:
    Membership provider Role provider 机制详解
    android Toast大全(五种情形)建立属于你自己的Toast
    android:scaleType属性
    Android接收短信同时获取短信内容
    JAVA三大框架的各自作用
    Android短信监听器
    ImageView / ImageButton 图片太大或者太小解决方法
    Android LayoutInflater详解
    Android开发之Intent.Action
    Android实现短信监听并且转发到指定的手机号,转发后不留痕
  • 原文地址:https://www.cnblogs.com/rachelch/p/15498970.html
Copyright © 2011-2022 走看看