大佬教程收集整理的这篇文章主要介绍了为什么这个表单验证似乎绕过了`event.preventDefault();`?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试编写一个带有一些基本验证的简单表单,但是按下提交按钮会绕过 event.preventDefault();
并且表单仍然被提交。
function myFunction() {
if(document.getElementByID("username").val() == ''){
alert('Please enter a username');
event.preventDefault();
}
}
这是表单、用户名输入字段和提交按钮的代码:
<form method ="POST" action="db/registerinsert.PHP" class="content formregister" ID="registerform">
<div class="content formcontact">
<section class="section">
<div class="columns">
<div class="column is-8 is-offset-2">
<div class="fIEld">
<label class="label">Username</label>
<div class="control has-icons-right">
<input class="input" name="username" ID= "username" type="text" placeholder="" required="">
</div>
</div>
<div class="fIEld is-grouped">
<div class="control">
<button class="button is-link" type="submit" onclick="JavaScript:myFunction()" Value="submit">submit</button>
</div>
</div>
</div>
</div>
</section>
</div>
</form>
我在 required=""
字段上也有 <input>
,但将该字段留空也不会触发此操作。
有一些小错误。重要的是:
<input>
值submit
事件但使用过时的特性,如全局 event
或使用 onclick
属性最终也会导致麻烦。
<input>
值<input>
元素没有 val
方法。不要将 jQuery 与 the native DOM API 混淆。 jQuery 使用 val
方法,而原生 DOM API 使用 value
属性。
您的函数将在调用时抛出 Uncaught TypeError: document.querySelector(...).val is not a function
。
您要比较的值是以下之一:
document.getElementById("username").value // Native DOM; let’s stick with this one
document.querySelector("#username").value // Native DOM
$("#username").val() // jQuery
如果您也想禁止纯空格输入,您也可以将 .trim()
附加到其中任何一个。
==
和 !=
几乎是 never recommended。它们并不总是直观的传递,因为它们经常不必要地执行类型强制。改用 ===
和 !==
。
if
条件因此应如下所示:
if(document.getElementById("username").value === ""){ /* … */ } // Native DOM
您使用 event.preventDefault();
的方式使用过时的全局 window.event
。 It’s not recommended。请改用 event
argument。见What exactly is the parameter e (event) and why pass it to JavaScript functions?。
点击提交按钮只是提交表单的一种方式。您也可以按 Enter。想一想:你想阻止什么?您想阻止表单提交。所以听submit
event。您会在 <form>
而非 <button>
上执行此操作。只有 <form>
个事件调度 submit
个事件。
不是很重要,但为了避免在最后一步混淆,我将把 id="registerform"
重命名为 id="registerForm"
,因为 JavaScript uses camelCase 在几个地方。
内联事件处理程序如 onclick
或 onsubmit
是 not recommended。它们是一种注册事件的 obsolete,hard-to-maintain and unintuitive 方式。始终使用 use addEventListener
或 jQuery 的 .on
。
这是使用原生 DOM API 的事件绑定。它还使用 arrow functions。
document.getElementById("registerForm").addEventListener("submit",(event) => {
if(document.getElementById("username").value === ""){
event.preventDefault();
alert("Please enter a user name.");
}
});
使用 jQuery:
$("#registerForm").on("submit",(event) => {
if($("#username").val() === ""){
event.preventDefault();
alert("Please enter a user name.");
}
});
在 HTML 中,完全删除 onclick
。您还出于某种原因加入了 javascript:
label...
最后,<button>
并没有真正使用 value
属性。他们的标签内容已经是他们的价值所在。
<form id="registerForm" class="content formregister" method="POST" action="db/registerinsert.php">
<!-- Omitting stylistic containers -->
<input id="username" name="username" class="input" type="text" required="required">
<button class="button is-link" type="submit">Submit</button>
</form>
reportValidity
和 checkValidity
您添加了 required
属性。利用它的方法是在表单上调用 reportValidity
或 checkValidity
。请注意,截至 2021 年,这些方法尚不具备完整的浏览器支持。
document.getElementById("registerForm").addEventListener("submit",(event) => {
if(!event.target.reportValidity()){
event.preventDefault();
}
});
如果使用 reportValidity
,浏览器 UI 将显示一条消息,如“请填写此字段”(如果该字段为空)。类似的方法 checkValidity
在 JS 中也会以相同的方式工作,但不会向用户显示消息,因此可以重新引入您的自定义 alert
。
有关更多信息,请参阅关于 form validation 和 constraint validation 的 MDN 文章,例如设置 pattern
s。
requestSubmit
有一个名为 requestSubmit
的新 API,它简化了表单验证,但在 2021 年没有得到很好的支持。这依赖于 required
属性。
document.querySelector("registerForm button[type='submit']")
.addEventListener("click",({target}) => target.form.requestSubmit(target));
<form id="registerForm" class="content formregister" method="POST" action="db/registerinsert.php">
<!-- Omitting stylistic containers -->
<input id="username" name="username" class="input" type="text" required="required">
<button class="button is-link" type="submit">Submit</button>
</form>
上面的 JS 也使用了 destructuring assignment 和 the form
property。
我不确定这是否是您想要的,但是如果您想取消提交操作,您应该将事件作为参数传递给函数,如下所示:
const form = document.querySelector('form');
form.addEventListener('submit',myFunction);
`function myFunction(e) {
if(document.querySelector(".input").value == ''){
alert('Please enter a username');
e.preventDefault();
}
}
希望能帮到你
以上是大佬教程为你收集整理的为什么这个表单验证似乎绕过了`event.preventDefault();`?全部内容,希望文章能够帮你解决为什么这个表单验证似乎绕过了`event.preventDefault();`?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。