使用HTML和Vuejs进行表单验证 _HTML

他们说大多数网络应用只是html表单。好吧，表单需要验证，谢天谢地，HTML5带有许多优秀的内置表单验证功能，可用于电子邮件，数字，最大值，分钟等。您甚至可以使用模式编写自己的验证规则。在本文中，我将讨论如何在覆盖无聊的默认值时利用HTML5验证，以便您可以根据需要显示验证错误。我将与Vuejs合作，但即使你不使用Vue，你也可以随时跟进。
让我们从Bootstrap示例的Checkout表单的开始，这样我们就不必过于担心样式了。您可以在此处克隆器。设置应如下所示：

文章插图

使用Vuejs Starter进行HTML验证
默认的HTML5验证不会立即显示所有表单错误。具有讽刺意味的是，一旦用户提交，浏览器实际上就知道所有无效字段，所以现在我们所要做的就是检查它们然后显示我们喜欢的内容。
现在让我们为表单和一个使用Vuejs捕获提交事件的监听器添加一个id 。
<form class="needs-validation" id="validated-form"> <div class="row"> <div class="col-md-6 mb-3"> <label for="firstName">First name</label> <input type="text" class="form-control" id="firstName" placeholder="" value=https://www.isolves.com/it/cxkf/yy/html5/2019-08-12/"" required>

Valid first name is required.