表单提交信息验证时机

表单提交信息验证时机

1、表单修改的时候验证一次
2、表单提交的时候再次验证

代码（部分）

constructor(options) {
    super(options);
    this.state = {
      WorkId: '',//工号
      ValidateWorkId: {
        len: 6,
        validate: true,//是否正确
        msgWrong: '工号是6位数', //错误提示信息
      },
      Psw: '',//密码
      ValidatePsw: {
        minLen: 3,
        validate: true,
        msgWrong: '密码至少是3位数',
      }
    }
  }



{/* 工号 */}
<div className="tr">
  <div className="title"><strong>*</strong><label htmlFor="workId" >工号&nbsp;&nbsp;</label></div>
  <div className="content">
    <input
      type="text"
      id="workId"
      name="WorkId"
      onChange={this.handlerChange}
      value={this.state.WorkId}
      placeholder="请输入工号"
    />
  </div>
</div>
{/* 工号错误提示 */}
{
  !this.state.ValidateWorkId.validate &&
  <div className="tr" style={{ marginTop: 2 }}>
    <div className="title"></div>
    <div className="content">
      <span className="wrong">{this.state.ValidateWorkId.msgWrong}</span>
    </div>
  </div>
}


//1.表单修改的时候验证一次
  // 获取表单中工号、密码的值 并校验
  handlerChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    }, () => {
      //每次获取表单的值之后立马校验
      e.target.name === 'WorkId' && this.validateWorkId()
      e.target.name === 'Psw' && this.validatePsw()
    })
  }

//2.、表单提交的时候再次验证
  // 上传表单信息  处理提交
  handlerSubmit = (e) => {
    e.preventDefault();//阻止表单提交
    const { WorkId, Psw, date } = this.state
    let { record } = this.state
    record = record.filter(function (n) { return n })//去除数组中的空元素
    let giveData = { WorkId, Psw, date, record }//要提交的数据
    // 1.表单校验
    if (this.validateWorkId() && this.validatePsw()) {
      // 2.表单提交到后台的axios请求
      axios.post('XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', giveData)
        .then(res => {
          console.log('提交数据成功', res)
          alert('提交成功')
        }).catch(error => {
          console.log('提交数据失败', error)
          alert('提交失败')
        })
    }
  }

//验证方法
 // 校验方法  校验state的状态  
  validateWorkId() {//验证工号
    let { WorkId, ValidateWorkId } = this.state
    const leng = WorkId.length
    const len = ValidateWorkId.len
    let validateTemp = len === leng
    this.setState(preState => {
      return Object.assign({}, preState, {
        ValidateWorkId: Object.assign({}, preState.ValidateWorkId, {
          validate: validateTemp
        })
      })
    })
    return validateTemp
  }
  validatePsw() {//验证密码
    let { Psw, ValidatePsw } = this.state
    const leng = Psw.length
    const minLen = ValidatePsw.minLen
    let validateTemp = leng >= minLen
    this.setState(preState => {
      return Object.assign({}, preState, {
        ValidatePsw: Object.assign({}, preState.ValidatePsw, {
          validate: validateTemp
        })
      })
    })
    return validateTemp
  }