我想写一个简单的表单与一些基本的验证，但按下提交按钮绕过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>
我在<input>字段上也有required=""，但留下空白字段也不会触发此
有一些小错误。重要的是:
- 获取
<input>值错误 - 未监听
submit事件
但是使用过时的功能，如全局event或使用onclick属性，最终也会导致麻烦。
<input>值
<input>元素没有val方法。不要将jQuery与原生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()。
==和!=几乎不被推荐。它们并不总是直观地传递，因为它们经常不必要地执行类型强制转换。使用===和!==代替。
if条件应该是这样的:
if(document.getElementById("username").value === ""){ /* … */ } // Native DOM
事件对象
您使用event.preventDefault();的方式使用了过时的全局window.event。不建议这么做。使用event参数代替。参见参数e (event)到底是什么，为什么要把它传递给JavaScript函数?
正确的事件类型和事件目标
单击提交按钮只是一种提交表单的方式。您也可以按输入。想想看:你想要阻止的是什么?您希望防止表单提交。因此，侦听submit事件。你会在<form>上这样做，而不是<button>。只有<form>事件调度submit事件。
命名约定不重要，但为了避免在最后一步中混淆，我将把id="registerform"重命名为id="registerForm"，因为JavaScript在几个地方使用camelCase。
绑定事件并将所有内容组合在一起
不建议使用内联事件处理程序，如onclick或onsubmit。它们是一种过时的、难以维护的、不直观的注册事件的方式。始终使用addEventListener或jQuery的.on代替。
这是事件绑定，使用本地DOM api。它还使用箭头函数。
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:标签…
最后，<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。
请参阅MDN关于表单验证和约束验证的文章了解更多信息，例如设置patterns。
备选项:requestSubmit
有一个新的API，称为requestSubmit，它简化了表单验证，但到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还使用了解构赋值和form属性。
我不确定这是否是你想要的，但是如果你想取消提交操作，你应该将事件作为参数传递给函数，像这样:
const form = document.querySelector('form');
form.addEventListener('submit', myFunction);
`function myFunction(e) {
if(document.querySelector(".input").value == ''){
alert('Please enter a username');
e.preventDefault();
}
}
希望能有所帮助