react+antd 简单表单验证_antd react函数校验

//验证函数
 
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
<Input
  className="item-input"
  placeholder="请输入11位数字"
  maxLength="11" type="phone"
  ref="tenantPhone"
  value={tenantPhone||undefined}
  onChange={
    e => this.setState({
      tenantPhone: e.target.value
    })
  }
  onBlur={() => {
    if(!/^1[345678]\d{9}$/.test(tenantPhone)) {
      if(!tenantPhone) {
        message.error('手机号不可为空！')
        return
      }
       message.error('手机号不合法哦')
    }
   }}
 />