react+antd 简单表单验证

//验证函数

validate(){
    let that =this
    let data = {
      msg: '',
      el:null
    }

    var getEl = {
      0(key) {
        return ReactDOM.findDOMNode(that.refs[key])
      },
      1(key) {
        return ReactDOM.findDOMNode(that.refs[key]).firstElementChild
      },
      2(key) {
        return ReactDOM.findDOMNode(that.refs[key]).getElementsByTagName('input')[0]
      }
    }
 
    //验证规则
    let msgGroup = [
      {
        key: 'tenantPhone',
        msg: '手机号不合法哦',
        validate: function(data, key) {
          let val = data[key]
          if(!/^1[345678]\d{9}$/.test(val)) {
            return true
          }
        }
      },
      {
        key: 'startTime',
        msg: '日期不合法哦'
      }
    ]

    let {stateData} = this.state

    //遍历数据 返回提示
    msgGroup.some((v) => {
      if(v.validate ? v.validate(stateData, v.key) : !stateData[v.key]) {
        data = {
          msg: v.msg,
          el: getEl[v.el||0](v.key)
        }
        return true
      }
    })

    return data
  }

//错误信息提示
showWarn(el) {
    let className = el.className

    if(el.getAttribute('isWarn')) {
      return
    }

    el.setAttribute('isWarn', '1')

    el.className = className + ' ui--error'
    el.scrollIntoView()
    setTimeout(function() {
      el.className = className
      el.setAttribute('isWarn', '')
    }, 3000)
  }


//提交表单 触发验证
onSave =()=>{
    var data = this.validate()
    if(data.msg) {
      message.error(data.msg, 3)
      data.el && this.showWarn(data.el)
      return
    }

ajax.post('xxxx')

}


//render
 this.setState({
      tenantPhone: e.target.value
    })
  }
  onBlur={() => {
    if(!/^1[345678]\d{9}$/.test(tenantPhone)) {
      if(!tenantPhone) {
        message.error('手机号不可为空！')
        return
      }
       message.error('手机号不合法哦')
    }
   }}
 />