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>        
  • 相关阅读:
    如何启用EMGrid/Cloud Control的HTTP而非HTTPS协议登陆
    Oracle Enterprise Manager 12c 新特性:实时RealTime Addm
    php 面向对象三大特征
    C++ 运算符重载
    C++面向对象_复制构造函数+构造函数+析构函数+static+友元
    位运算符和位运算
    SqlHelper.class.php
    C++ 流
    C++ 虚函数与多态
    C++ 继承与派生
  • 原文地址:https://www.cnblogs.com/rachelch/p/15498970.html
Copyright © 2011-2022 走看看