在html表单中验证正确年龄的问题

Question

我想确保年龄与出生年份正确，其中两个值都以html形式提交，与当前年份一致。然而，当输入一个不能满足我要求的值时，它不会给我一个警告。

function formError() {
if (document.getElementById('name').value == "") {
alert('Please enter your name.');
document.getElementById('name').style.borderColor = "red";
return false;
}
if (document.getElementById('yearborn').value == "") {
alert('Please enter the year you were born.');
document.getElementById('yearborn').style.borderColor = "red";
return false;
}
if (document.getElementById('age').value == "") {
alert('Please enter your age.');
document.getElementById('age').style.borderColor = "red";
return false;
}
var d = new Date();
var n = d.getFullYear();
var age = document.getElementById('age').value;
var yearBorn = getElementById('yearborn').value;
if (n - age !== yearBorn) {
alert('Please make sure that your age and year born is correct.');
return false;
}
}

<fieldset>
<form id="frmName" method=post action="#" onsubmit="return formError()">
<h1>Inf115 compulsory assignment 3</h1>
<p>
<b>Name:</b><input type="text" id="name" name="name" maxlength="20" />
</p>
<p>
<b>Year of birth:</b><input type=int id="yearborn" maxlength="4" />
</p>
<p>
<b>Age:</b><input type=int id="age" maxlength="3" />
</p>
<p>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</p>
</form>
</fieldset>

Answer 1

1. document.getElementById 中缺少文档

2. 年龄错误-用户可能还没有n岁出生

3. 无效的HTML，字段集应在表单中

4. 我强烈建议使用eventListener并在错误之前重置颜色

如果你不想要这些建议，那么

const diff = n - yearBorn - age ;
if (diff !== 0 && diff !== 1) {

够了吗

window.addEventListener("load", function() {
document.getElementById("frmName").addEventListener("submit", function(e) {
const errors = [];
let obj;
obj = document.getElementById('name');
obj.classList.toggle("error", 0)
if (obj.value == "") {
errors.push('Please enter your name.');
obj.classList.toggle("error", 1)
}
obj = document.getElementById('yearborn');
obj.classList.toggle("error", 0)
if (obj.value == "") {
errors.push('Please enter the year you were born.');
obj.classList.toggle("error", 1)
}
obj = document.getElementById('age');
obj.classList.toggle("error", 0)
if (document.getElementById('age').value == "") {
errors.push('Please enter your age.');
obj.classList.toggle("error", 1)
}
const n = new Date().getFullYear();
const age = +document.getElementById('age').value;
const yearBorn = +document.getElementById('yearborn').value;
const diff = n - yearBorn - age ;
if (diff !== 0 && diff !== 1) {
errors.push('Please make sure that your age and year born is correct.');
obj.classList.toggle("error", 1)
}
if (errors.length > 0) {
alert(errors.join("n"));
e.preventDefault();
}  
});
});

.error {
border-color: red;
}

<form id="frmName" method=post action="#">
<fieldset>
<h1>Inf115 compulsory assignment 3</h1>
<p>
<b>Name:</b><input type="text" id="name" name="name" maxlength="20" />
</p>
<p>
<b>Year of birth:</b><input type=int id="yearborn" maxlength="4" />
</p>
<p>
<b>Age:</b><input type=int id="age" maxlength="3" />
</p>
<p>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</p>
</fieldset>
</form>