有几个小错误。重要的是：
但是使用像全局这样过时的特性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()如果您也想禁止纯空格输入，也可以将 a 添加到其中任何一个。
比较
==并且!=几乎从不推荐。它们并不总是直观地传递，因为它们经常不必要地执行类型强制。使用===and!==代替。
因此，if条件应如下所示：
if(document.getElementById("username").value === ""){ /* … */ } // Native DOM
事件对象
您使用的方式event.preventDefault();使用过时的 global window.event。不推荐。请改用该event参数。请参阅参数 e（事件）到底是什么以及为什么将其传递给 JavaScript 函数？.
正确的事件类型和事件目标
单击提交按钮只是提交表单的一种方式。你也可以按Enter。想一想：你想防止什么？您想阻止表单提交。所以改为听submit事件。您将在 上执行此操作<form>，而不是在<button>. 只有<form>事件派发submit事件。
命名约定
不是很重要，但为了避免在最后一步混淆，我将重命名id="registerform"为id="registerForm"，因为JavaScript 在多个地方使用 camelCase。
绑定事件并将所有内容放在一起
内联事件处理程序喜欢onclick或onsubmit不推荐。它们是一种过时、难以维护且不直观的事件记录方式。总是使用addEventListenerjQuery.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:标签……</p>
最后，<button>s 并没有真正使用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