如何在反应中验证表单输入元素？

Question

我正在使用requiredhtml5 的属性来确保该字段不为空。我有一个提交按钮，按下此按钮后会触发验证。我只想保留此验证而不提交表单。

render() {
  <form role="form">
    <input type="number" value={this.state.value} required/>
    <button type="submit" onClick={this.onFinish.bind(this)}>Submit</button>
  </form>
}

onFinish(event) {
    // event.target.checkValidity(); // something like this?
    event.preventDefault();
  }

当我使用event.preventDefault()表单时，未提交但验证也未运行。我怎样才能做到这一点？我不想为必需的东西编写自定义验证，因为它们已经可用，并且我想使用现有的验证。

Answer 1

抱歉，我参加聚会迟到了。您可以使用e.target.checkValidity()which 检查元素是否有任何约束以及是否满足这些约束。如果元素未达到其约束，浏览器会在该元素上触发可取消的无效事件，然后返回 false。与提交时一起使用。我是这样做的：

handleSubmit(e){
  e.preventDefault();
  if(e.target.checkValidity()){ // use can also use e.target.reportValidity
   // submitForm
 }
}
render(){
 return(
  <form onSubmit={e => this.handleSubmit(e)}>
    <input type="number" value={this.state.value} required/>
    <button type="submit">Submit</button
  </form>
 )
}

刚刚添加onSubmit到表单并通过了事件。

Answer 2

通过反复试验，我找到了一个似乎工作正常的解决方案。如果您知道更好或不同的方式，请告诉我。这就是我所做的：

render() {
  <form role="form" onSubmit={this.onFinish.bind(this)>
    <input type="number" value={this.state.value} required/>
    <button type="submit">Submit</button>
  </form>
}

onFinish(event) {
    // All Validations triggered and this function is only called
    // when everything is valid, so I do my custom post here.
  }

只是将提交按钮的方法表单 onClick 移至表单的 onSubmit 。