如何在React中使用HTML5验证？

Question

这是我的React Render Block.我在这里使用HTML5验证,使用必需的.这个东西应该可以正常工作.但它没有用.任何人都可以建议我如何使用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>'s 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>

像这样的东西应该有帮助