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>        
  • 相关阅读:
    最新屏蔽微信举报方法
    C# WIN 生成机器码
    Quartz.net的快速简单上手使用以及防止IIS回收停止Job的处理
    MVC、Web API 请求接口报错“自定义错误模块不能识别此错误。”解决
    获取微信短链接的官方接口
    Window 通过cmd查看端口占用、相应进程、杀死进程
    微信域名检测、防封,微信跳转技术揭秘(二) -- 微信跳转揭秘
    微信域名检测、防封,微信跳转技术揭秘(一) -- 域名检测原理及防封方案
    各种比较方便给力的小工具
    《Git学习指南》学习笔记(三)
  • 原文地址:https://www.cnblogs.com/rachelch/p/15498970.html
Copyright © 2011-2022 走看看