JavaScript日期验证脚本在特定HTML文件失效问题求助

我帮你找出了导致脚本失效的两个核心原因，还有一个可以让验证逻辑更严谨的优化点，具体如下：

1. 函数名大小写不匹配（直接导致验证不触发） #

你的HTML表单里写的是onsubmit="return checkForm()"（注意大写的F），但JavaScript里定义的函数是checkform()（小写的f）——JavaScript是严格区分大小写的，浏览器找不到对应的函数，自然不会执行任何验证逻辑。

2. JavaScript代码未引入到当前HTML文件 #

在你提供的HTML代码里，完全没有看到引入JavaScript的部分：既没有内嵌的<script>标签，也没有外部JS文件的引用链接。就算函数名写对了，浏览器也不知道有这个验证函数存在，脚本肯定无法运行。

可选优化：让日期验证逻辑更严谨 #

原有的日期比较逻辑有个小细节：new Date()会生成包含当前时分秒的日期对象，而<input type="date">的value转成Date时，是当天的00:00:00。比如今天是5月20日下午3点，用户选今天的日期，d是2024-05-20T00:00:00，n是2024-05-20T15:00:00，这时候d >=n是false，验证通过，这没问题；但如果刚好在午夜前几秒提交，可能会因为跨天出现误判。

我们可以把当前日期的时分秒清零，让比较只针对日期部分：

function validateDate(doa) { 
  var d = new Date(doa); 
  var n = new Date();
  // 清零时分秒，只保留日期部分
  n.setHours(0, 0, 0, 0);
  // 如果要允许选择今天，就用d > n；如果要严格禁止今天，就用d >= n
  if (d > n) { 
    alert("Date cannot be greater than today."); 
    return false; 
  } 
  return true; 
}

修复后的完整HTML示例 #

我已经把JS代码内嵌到<head>里，同时修正了函数名的大小写问题：

<head> 
<title>Customer Feedback Survey</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" type="text/css" href="furpaws.css"> 
<!-- 内嵌JavaScript代码 -->
<script>
function checkform() { 
  answ = validateDate(document.getElementById("doa").value); 
  if (answ == false) { 
    return false; 
  } else { 
    return true; 
  } 
} 
function validateDate(doa) { 
  var d = new Date(doa); 
  var n = new Date();
  n.setHours(0, 0, 0, 0);
  if (d > n) { 
    alert("Date cannot be greater than today."); 
    return false; 
  } 
  return true; 
}
</script>
</head> 
<body> 
<!--Header--> 
<table bgcolor="#F172A1" height="10%" width="100%" class="tab" /> 
<tr> 
<td width="1%" rowspan="2" height="5%" align="center" valign="middle"> 
<a class="bleft"><img src="webpublogo.png" height="13%" /></a> 
</td> 
</tr> 
</table> 
<!--End of Header--> 
<br/> 
<!--Caption and Info--> 
<h2 align="center">Customer Feedback Survey</h2> 
<hr> 
<p class="particulars"> Please fill in the form<br> Required fields are marked with an asterisk *<br> </p> 
<hr> 
<!--End of Caption and Info--> 
<br> 
<!--Particulars--> 
<table class="form"> 
<!-- 修正了onsubmit里的函数名大小写 -->
<form action="feedbackresult.html" onsubmit="return checkform()"> 
<tr> 
<td><label for="firstname">First Name: </label></td> 
<td><input type="text" name="first" id="firstname"></td> 
</tr> 
<tr> 
<td><label for="lastname">Last Name: </label></td> 
<td><input type="text" name="last" id="lastname"></td> 
</tr> 
<tr> 
<td><label for="mobileNo">Handphone No:* </label></td> 
<td><input type="tel" name="hpno" id="mobileNo" placeholder="e.g 91234567" maxlength="8" minlength="8" required></td> 
</tr> 
<tr> 
<td><label for="doa">Date of Appointment:* </label></td> 
<td><input type="date" name="date" id="doa" min="2000-01-01" required></td> 
</tr> 
</table> 
<!--End of Particulars--> 
<br/> 
<!--Survey--> 
<table align="center" border="0" width="80%" height="50%" cellspacing="0" cellpadding="0"> 
<col width="3%"> 
<col width="0.4%"> 
<col width="0.4%"> 
<col width="0.4%"> 
<col width="0.4%"> 
<col width="0.4%"> 
<tr> 
<td class="column" style="text-align:center"> Please rate the following areas:</td> 
<td class="columnrating2">Very Poor</td> 
<td class="columnrating">Poor</td> 
<td class="columnrating2">Fair</td> 
<td class="columnrating">Good</td> 
<td class="columnrating2">Very Good</td> 
</tr> 
<tr> 
<td class="row2">*Grooming Services</td> 
<td class="rowrating2"><input type="radio" name="groomingServices" id="veryPoor" required></td> 
<td class="rowrating2"><input type="radio" name="groomingServices" id="Poor"></td> 
<td class="rowrating2"><input type="radio" name="groomingServices" id="fair"></td> 
<td class="rowrating2"><input type="radio" name="groomingServices" id="good"></td> 
<td class="rowrating2"><input type="radio" name="groomingServices" id="veryGood"></td> 
</tr> 
<tr> 
<td class="row">*Customer Service</td> 
<td class="rowrating2"><input type="radio" name="customerService" id="veryPoor" required></td> 
<td class="rowrating2"><input type="radio" name="customerService" id="Poor"></td> 
<td class="rowrating2"><input type="radio" name="customerService" id="fair"></td> 
<td class="rowrating2"><input type="radio" name="customerService" id="good"></td> 
<td class="rowrating2"><input type="radio" name="customerService" id="veryGood"></td> 
</tr> 
<tr> 
<td class="row2">*Hospitality of your pets</td> 
<td class="rowrating2"><input type="radio" name="hospitality" id="veryPoor" required></td> 
<td class="rowrating2"><input type="radio" name="hospitality" id="Poor"></td> 
<td class="rowrating2"><input type="radio" name="hospitality" id="fair"></td> 
<td class="rowrating2"><input type="radio" name="hospitality" id="good"></td> 
<td class="rowrating2"><input type="radio" name="hospitality" id="veryGood"></td> 
</tr> 
<tr> 
<td class="row">*Groomers were polite</td> 
<td class="rowrating2"><input type="radio" name="groomers" id="veryPoor" required></td> 
<td class="rowrating2"><input type="radio" name="groomers" id="Poor"></td> 
<td class="rowrating2"><input type="radio" name="groomers" id="fair"></td> 
<td class="rowrating2"><input type="radio" name="groomers" id="good"></td> 
<td class="rowrating2"><input type="radio" name="groomers" id="veryGood"></td> 
</tr> 
<tr> 
<td class="row2">*Cleanliness of environment</td> 
<td class="rowrating2"><input type="radio" name="environment" id="veryPoor" required></td> 
<td class="rowrating2"><input type="radio" name="environment" id="Poor"></td> 
<td class="rowrating2"><input type="radio" name="environment" id="fair"></td> 
<td class="rowrating2"><input type="radio" name="environment" id="good"></td> 
<td class="rowrating2"><input type="radio" name="environment" id="veryGood"></td> 
</tr> 
<tr> 
<td class="row">&nbsp;Remarks</td> 
<td colspan="6" class="rowrating2"><textarea style="vertical-align:top;"> </textarea></td> 
</tr> 
<tr> 
<td colspan="6" align="center"> 
<input type="submit" value="Submit" class="buttons"> 
</td> 
</tr> 
</form> 
</table> 
<!--End of Survey--> 
<br/> 
<br/> 
</body>

最后补充 #

• 优先解决前两个核心问题，脚本就能正常运行了；
• 日期逻辑的优化是可选的，根据你的业务需求调整即可；
• 另外注意下表单嵌套的问题：你现在是把<form>放在<table>里面，虽然浏览器能兼容，但更规范的写法是让<form>包裹整个<table>，不过这个不影响脚本功能。

内容的提问来源于stack exchange，提问作者Mark M.