如何在 React 中使用 HTML5 验证？

Question

这是我的 React 渲染块。我在这里使用 HTML5 验证，使用 required。 这东西应该可以正常工作。但它不起作用。谁能建议我如何使用 HTML5 验证和反应？

            <div >
                <div className="modal-dialog">
              <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

                        <div class="col-sm-10">

                            <input type="email" className="form-control" name="email" required
                                   placeholder="Enter a valid email address" id='email' ref="email"/>


                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>

                        <div class="col-sm-10">
                            <input type="password" className="form-control" id='password' ref="password" required
                                   placeholder="Password must be 10 character long"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="button" input type="submit" className="btn btn-success"
                                    onClick={this.saveNewUser}>Register
                            </button>
                        </div>
                    </div>


                    <div>

                    </div>

                </div>
            </div>

Answer 1

我也遇到了这个问题，为我解决的问题是添加<form> 标签，并将处理程序从按钮输入移动到<form> 的onSubmit：

<form onSubmit={this.saveNewUser}>
  <input type="email" className="form-control" name="email" required placeholder="Enter a valid email address" id='email' ref="email" />
  <button type="submit" className="btn btn-success" />
</form>

看起来提交按钮可以是<button> 或<input>，只要它具有type="submit" 属性即可。

Answer 2

您可能需要将所有内容都包含在一个表单中，然后才能完成 html5 验证。

<form>
<input type="email" className="form-control" name="email" required placeholder="Enter a valid email address" id='email' ref="email"/>
<input type="submit" className="btn btn-success" onClick={this.saveNewUser} />
</form>

这样的事情应该会有所帮助

Answer 3

呃，HTML5 验证不起作用的原因是该代码不是有效的 HTML5。您在表单之外有表单元素，您正在编写内联 JSX（这不是有效的 HTML）等等。

React 是 javascript，而不是 HTML。即使您解开代码，HTML5 验证器也不会在此运行。