表单onsubmit事件未等待验证函数返回，提交无效数据至后端

核心问题 #

你验证函数的关键错误：直接操作DOM元素的length属性，而非输入框的实际输入值。document.getElementById("inputPhone")返回的是DOM节点对象，它的length属性是子元素数量（通常为0），导致手机号长度判断永远不生效，函数直接返回true，表单自然会跳过验证提交。

修正步骤 #

1. 修复验证函数的取值逻辑
   获取输入框的value属性后再做长度判断，同时可添加用户提示和日期字段的验证：

   function val() {
     // 获取输入框的值并去除首尾空格
     var phone = document.getElementById("inputPhone").value.trim();
     var date = document.getElementById("inputdate").value.trim();
   
     // 验证手机号长度
     if (phone.length < 10) {
       alert("手机号长度不能少于10位");
       return false;
     }
     // 补充日期验证（示例：检查是否为空）
     if (!date) {
       alert("请填写日期");
       return false;
     }
     return true;
   }
   

2. 保留onsubmit的return写法
   你的表单onsubmit="return val();"写法是正确的，不要去掉return——只有返回false时，浏览器才会阻止表单的默认提交行为。

3. 额外容错方案（若仍有异步干扰）
   如果页面存在其他异步代码影响提交流程，可以手动阻止默认行为，验证通过后再手动提交：

   function val(event) {
     // 先阻止默认提交行为
     event.preventDefault();
     
     var phone = document.getElementById("inputPhone").value.trim();
     var date = document.getElementById("inputdate").value.trim();
   
     if (phone.length < 10 || !date) {
       alert("请检查手机号和日期是否填写正确");
       return;
     }
     // 验证通过，手动提交表单
     document.getElementById("frmOrder").submit();
   }
   

   对应的表单代码修改为：

   <form id="frmOrder" onsubmit="val(event);"></form>
   

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