HTML/JS实现的表单验证未触发alert弹窗，故障原因是什么？

问题原因 #

1. 校验逻辑重复绑定：你同时给form标签加了onsubmit校验、给提交按钮加了onclick校验，按钮的onclick调用没有接收返回值，会触发逻辑冲突，导致alert还没弹出表单就直接提交了。
2. 校验函数缺少合法场景的返回值：当所有输入都符合要求时，你的函数没有返回true，部分浏览器会把无返回值的函数调用判定为undefined，直接跳过校验逻辑提交表单。
3. 没有处理输入内容的首尾空格：如果用户只输入空格，当前的校验逻辑会判定为输入合法，不符合非空校验的要求。

修复方案 #

• 删除提交按钮上的onclick="FormValidation()"属性，仅保留form标签的onsubmit绑定即可
• 在校验函数末尾添加return true，保证校验通过后表单可以正常提交
• 给获取的输入值添加.trim()方法，过滤首尾空格，避免空字符绕过校验

修复后完整代码 #

JavaScript代码 #

function FormValidation() { 
    var Name = document.getElementById("Name").value.trim();
    if (Name === ""){
        alert("请输入您的姓名！");
        return false;
    } 
    var BDate = document.getElementById("BDate").value.trim();
    if (BDate === ""){
        alert("请输入您的出生日期！");
        return false;
    }
    return true;
 }

HTML代码 #

<form onSubmit="return FormValidation()">
<table class="information"> 
  <tr>
    <td><label for="Name">全名</label></td> 
    <td> <input type="text" id="Name" name="Name"><br><br></td>  
  </tr>
  <tr>
    <td><label for="BDate">出生日期</label></td>
    <td><input type="text" id="BDate" name="BDate"><br><br></td>   
  </tr> 
</table> 
<input type="submit" style="border-radius:15px;width:40%;background-color:green;text-align:center;color:white" value="提交">
</form>

CSS代码（无修改） #

body {
  background-color: #90AFC5;
  color: black; 
  width: 400px;
}

内容的提问来源于stack exchange，提问作者pingu