表单验证联动

import {Picker, Card, WingBlank, WhiteSpace ,List,InputItem} from 'antd-mobile';
import { Component } from 'react';
import { connect } from 'dva';
import styles from './IndexPage.css';

const colors = [
  {
    label:'其他',
    value: '01',
    reg: /^[0-9]+$/
  },
  {
    label:'二代身份证',
    value: '02',
    reg: /^(\d{6})(19)(\d{2})(0|1)(\d)([0-3])(\d)(\d{3})([0-9]|X|x)$/
  },
  {
    label:'护照',
    value: '03',
    reg: /^[0-9]+$/
  },
];

class Self  extends Component{
  state = {
    error: '',
    data: [],
    val: '',
    cols: 1,
    validate: false,
    colorValue: ['01'],
    numReg: /^(\d{6})(19)(\d{2})(0|1)(\d)([0-3])(\d)(\d{3})([0-9]|X|x)$/
  };
  
  onChangeColor = (color) => {
    console.log(color)
    this.setState({colorValue: color});
    this.validateInfo(color, this.state.val)
  };
  handleInputVal = val => {
    this.setState({val: val});
    this.validateInfo(this.state.colorValue, val)
  }

  validateInfo = (type, val) =>{
    const that = this
    const colorObj = colors.filter(item => that.state.colorValue.includes(item.value))
    const validate = colorObj.length ? colorObj[0].reg.test(val) : false 
    this.setState({ error: validate ? '' : styles.error, validate: validate })
  }

    render(){
            return(
                <div>
     <WingBlank size="lg">
        <WhiteSpace size="lg" />
        <Card>
          <Card.Header
            title="This is title"
            
          />
          <Card.Body>
          <Picker
          data={colors}
          value={this.state.colorValue}
          cols={1}
          onChange={this.onChangeColor}
        >
          <List.Item arrow="horizontal">证件类型</List.Item>
        </Picker>


        <InputItem
            onChange={this.handleInputVal}
            placeholder="请输入证件号码"
            moneyKeyboardAlign="left"
            error={this.state.error}
          >证件号码</InputItem>
          </Card.Body>
          <Card.Footer content="footer content" extra={<div>extra footer content</div>} />
        </Card>
        <WhiteSpace size="lg" />
      </WingBlank>
                </div>
            )
       
    }
}

export default connect()(Self)