Question

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

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

我遇到了同样的问题，但我需要onClick句柄，因为我有几个提交按钮。

我想区分两个按钮，仍然使用内置表单验证所需的字段。

这对我有用：

render() {
  <form role="form" ref="submitForm">
    <input type="number" value={this.state.value} required/>
    <button type="submit"
            onClick={this._onFinishOne.bind(this)}>
      Submit One
    </button>
    <button type="submit"
            onClick={this._onFinishTwo.bind(this)}>
      Submit Two
    </button>
  </form>
}

_onFinishOne(event) {
    if (this.refs.submitForm.reportValidity()) {
      event.preventDefault();
      // do something here
    }
}

_onFinishTwo(event) {
    if (this.refs.submitForm.reportValidity()) {
      event.preventDefault();
      // do something here
    }
}

Answer 2

如果您不想在点击按钮时提交表单，为什么不从按钮中删除type =“submit”并改为使用type =“button”？

似乎您在提交表单的问题上称之为验证操作，导致此问题。您能否在此处或在提琴手上粘贴其余代码以获得更好的输入？

此致萨钦

Answer 3

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

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.
  }

只需将提交按钮上的方法表单移动到onSubmit of form。

Answer 4

有多种方法可以验证表单，我使用语义ui框架，所以我更喜欢内置验证，对于特殊情况，我在提交函数处理程序中验证数据，

所以它只是一个选择问题，你更喜欢验证。此外，我不使用普通表单提交，因此我的案例中的所有表格都是ajax表单，数据提交由Actions处理

Answer 5

对不起，我迟到了。您可以使用<pluginManagement>来检查元素是否有约束，以及是否满足约束。如果该元素未能通过其约束，则浏览器将在该元素上引发可取消的无效事件，然后返回false。与on一起使用。这是我的操作方式：

<plugins>

只是将e.target.checkValidity()添加到表单中并通过了事件。

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

5 个答案: