如何在 React 中使用 HTML5 验证？

IT技术 reactjs
2021-05-12 15:22:27

这是我的 React 渲染块。我在这里使用 HTML5 验证，使用 required。这东西应该可以正常工作。但它不起作用。谁能建议我如何在 React 中使用 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>
3个回答

我也遇到了这个问题，为我解决的是添加<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>

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

您可能需要将所有内容都包含在一个表单中，然后才完成 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>

这样的事情应该有帮助

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

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

其它你可能感兴趣的问题
上一篇在 ReactJS 中卸载组件时取消Promise 下一篇Netbeans IDE 中的 ReactJS/JSX 支持