在提交时仅执行浏览器默认表单验证,可以通过以下几种方式实现:
required
属性来标记必填字段,使用pattern
属性来指定输入的格式等。这些属性会触发浏览器默认的验证行为。示例代码:
<form>
<input type="text" required>
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="submit" value="Submit">
</form>
novalidate
属性:可以在form
标签上添加novalidate
属性,告诉浏览器不要执行表单验证。这样提交表单时,将只执行浏览器默认的表单提交行为,而不会触发验证。示例代码:
<form novalidate>
<input type="text" required>
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="submit" value="Submit">
</form>
submit
事件中使用preventDefault()
方法取消默认的提交行为,然后手动调用form.submit()
方法提交表单。示例代码:
<form id="myForm">
<input type="text" required>
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // 取消默认的提交行为
this.submit(); // 手动提交表单
});
</script>
需要注意的是,以上方法只能实现浏览器默认的表单验证,如果需要更复杂的验证逻辑,仍然需要使用JavaScript来实现。
领取专属 10元无门槛券
手把手带您无忧上云