Javascript 使用dd/mm/yyyy进行年龄验证

我正在尝试使用javascript验证一个表单，但它似乎不起作用。。不知道为什么

基本上输入的是出生日期：dd/mm/yyyy，我需要确保提交表格的人的年龄在15-80岁之间。。我尝试过用这种方法验证，但似乎不起作用

Html

Javascript

var birthDate = document.getElementById("DOB").value;

if (2019 - birthDate < 15 || 2019 - birthDate > 80) {
  errMsg =errMsg + "your age must be between 15 and 80\n";
  result = false;
}

if (errMsg !== "") {
  alert(errMsg);
}

return result;

document.getElementByIdDOB.value；将为您提供类似于10/10/2000的信息，对该字符串执行算术运算将导致NaN。那一定是个问题

验证日期比您想象的要复杂。有很多事情你需要考虑。使用诸如moment之类的库来帮助您验证日期

---

编辑：使用方法计算年龄。

您可以使用内置的最小值和最大值道具进行输入。试试这样的

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="15" max="80" required>
<button onclick="myFunction()">OK</button>

<p>If the age is less than 15 or greater than 80, an error message will be 
displayed.</p>

 <p id="demo"></p>

  <script>
function myFunction() {
 var inpObj = document.getElementById("id1");
 if (!inpObj.checkValidity()) {
  document.getElementById("demo").innerHTML = inpObj.validationMessage;
 } else {
 document.getElementById("demo").innerHTML = "Input OK";
 } 
} 
</script>

---

理论上这应该是可行的

因此，根据您的评论，您有这样一个文本框：

<form>
    <input type="text" name="birth date" id="DOB" placeholder="dd/mm/yyyy" maxlength="10" pattern="\d{1,2}\/\d{1,2}\/\d{4}" required="required"/></label>
</form>

如您所见，我还使用了getFullYear，这样我们就不会硬编码固定的当前年份

但是如果使用元素而不是文本框，则可能会更简洁。

document.getElementByIdDOB.value是字符串，而不是日期，因此需要对其进行转换。因为有不同的方法；一种是将字符串转换为YYYY-MM-DD格式，并将其传递给日期构造函数

此外，某人的年龄在生日时改变，而不是在日历年的变化时改变，因此你需要一种不同的逻辑来获得他们的年龄。一种方法是预先计算15年前和81年前的日期，并测试输入的出生日期是否介于这两个极端之间

var DOB=document.getElementByIdDOB； var输出=document.getElementByIdoutput； var go=document.getElementByIdgo； var fifteenYearsAgo=新日期； fifteenYearsAgo.setFullYearfifteenYearsAgo.getFullYear-15； var八十一年Sago=新日期； 八十一年sago.setfullyear八十一年sago.getFullYear-81； //当年龄正常时，函数返回true，否则返回false 功能检查{ var birthDate=new DateDOB.value.replace/.\/.\/.\/.../，$3-$2-$1； 返回出生日期八十一年； } go.addEventListener单击，函数{ 如果检查{ output.textContent=您的年龄还行； }否则{ output.textContent=您的年龄必须在15到80岁之间； } }; 生日：去吧 由于您使用的是模式，并且是必需的，所以我假设您希望在年龄超出范围时向用户显示错误消息，就像输入的日期格式错误或丢失一样。这可以通过setCustomValidity实现

如果在DOB元素上添加输入事件的事件侦听器，则可以运行一个函数来检查输入的年龄是否处于rage状态。如果年龄超出范围或输入的日期无效，它将设置自定义错误消息。否则，如果错误丢失或模式错误，浏览器将处理该错误

函数validateDOBevent{ 常数最小值=15，最大值=80； //没有自定义错误消息。如果输入不在 //正确的形式，或者由于元素具有模式和 //而且是必需的。 这是有效性； //检查是否有任何其他错误 if！this.validity.valid返回； //检查输入的格式，并将其拆分为多个部分 const dobArrayText=this.value.trim.match/^\d{1,2}\/\d{1,2}\/\d{4}$/； //如果格式不正确，则dobArrayText为null。让broswer处理错误。 if！dobArrayText返回； //将dobArrayText解码为日期构造函数可以使用的数值。 常数dob={ 年份：+dobArrayText[3]， 月份：+dobArrayText[2]-1，//在date对象中，月份为零。 日期：+dobArrayText[1] } const dobDate=新日期dob.year、dob.month、dob.day； //检查日期的有效性。日期对象将接受2000-99-99作为输入和 //将日期调整为2008-07-08。为防止出现这种情况，请确保输入 //dobDate是有效日期，我检查输入的日期是否与解析的日期相同。 如果 ！多布达特 ||dob.year！==dobDate.getFullYear ||dob.month！==dobDate.getMonth ||dob.day！=dobDate.getDate { 此.setCustomValidity为“无效日期”； 回来 } //计算minAgeDate和maxAgeDate const minAgeDate=新日期dob.year+minAge，dob.month，dob.day； const maxAgeDate=新日期年+最大日期、月、日； //获取今天的日期并将小时、分钟、秒和毫秒设置为0。 const todayTimestamp=新日期.setHours0,0,0； //检查有效性，必要时设置自定义错误消息。 如果Today时间戳=maxAgeDate，则为else{ this.setCustomValidity`对不起，您必须小于${maxAge}岁'； } } 功能模板{ document.getElementById'DOB'。addEventListenerinput，validateDOB； } addEventListener'DOMContentLoaded'，formInit； 出生日期: 提交

---

---

id为DOB的元素是否为日期类型的输入？或者是什么？一个小提示，当计算一个人的年龄时，你不能只使用他们出生的年份。如果一个婴儿在2018年12月30日出生，它还不是1，是吗如果birthdate是一个dd/mm/yyyy格式的字符串，那么是什么让您认为可以从2019年减去它，javascript就会知道您想要年份1。使用输入类型=日期。2.使用.valueasdate3。这里和这里的文档复制链接中被接受的答案是不使用任何库，但正如他的免责声明所说，为了获得更好的结果，使用一个库要容易得多。OP没有使用type=date，使用type=text，但是你的答案的其余部分仍然是相关的更新我的答案不是所有的东西都需要库，虽然这一刻是美好的，但它绝对不值得包括在其中calculation@DBS如果你想让计算准确，并考虑闰年和夏令时等变量，就必须这样做@APAD1不需要库：创建一个日期对象，第一个日期为dob=newDateyear，month-1，date，然后创建另一个日期为minDate=newDateyear+15，month-1，date，然后您可以将其与今天的日期进行比较。有关详细信息，请参阅我的答案。它必须是dd/mm/yyyy格式，否则我已经这样做了，然后我建议使用内置函数。getFullYear，如上所述。或者，如果你真的想搞清楚，你可以考虑新的日期。查看此文档。不，这是纯javascript。@卢卡，但正如我在评论中提到的，年龄计算可能长达一年，有人可能是14岁或81岁，你仍然允许他们，可以吗？这很好，但不起作用。。。。它仍然允许我提交，即使有error@Luca哦，好吧，有一种方法可以防止提交。我会编辑我的答案。@Luca你也编辑了你的HTML来阅读吗？这是目前为止最好的答案，我唯一要说的是确保FifteetneyarSago是一天的开始，而EightyearSago是一天的开始。因为你的生日也不会在中午改变。HTML5是在2014年发布的，这个问题使用了HTML5的功能，并带有必需的和模式。HTML5支持和自定义错误，这些错误显示在字段中而不添加特殊元素。根据上述评论更新了答案。

<form>
    <input type="text" name="birth date" id="DOB" placeholder="dd/mm/yyyy" maxlength="10" pattern="\d{1,2}\/\d{1,2}\/\d{4}" required="required"/></label>
</form>

onload = function() {
    var form = document.getElementById("form"); //assuming this is your form's ID
    form.onsubmit = validate;
}

function checkAge() {
  var currentYear = new Date().getFullYear();
  var birthDate = document.getElementById("DOB").value;
  var errMsg = ""; //this line was missing from my code, and preventing it from working.

  //turning "dd/mm/yyyy" into an array of the form { "dd", "mm", "yyyy" }, and taking the "yyyy" part
  var birthYear = birthDate.split("/")[2];

  var age = currentYear - birthYear;
  if (age < 15 || age > 80) {
    errMsg =errMsg + "your age must be between 15 and 80\n";
    result = false;
  }

  if (errMsg !== "") {
    alert(errMsg);
    return false; //form won't submit
  }

  return true; //form will submit
}