来自 DOB 的用于下拉选择的 JavaScript 年龄验证

Question

我已经看到很多来自 DOB 代码的年龄验证，但我似乎无法使用我的代码。

基本上，我的 TAFE 类(class)需要创建一个表格，其中包含名字、姓氏、电子邮件地址、联系电话号码、出生日期和感兴趣的领域(这是一个包含 child 和成人书籍的下拉框)。

我需要验证出生日期的格式是否正确。我已经成功地做到了这一点，它等同于 30 天的月份和闰年。

下一部分需要兴趣区域下拉框来验证提交人的年龄是否超过 18 岁。但是。只有选择的感兴趣领域是成人书籍。

现在，我可以做一些简单的事情，这样所有 1996 年及以上的年龄都将被拒绝，但我宁愿创建一个验证来从输入的 DOB 执行此操作，因为我认为这是应该的预期。

DOB的输入格式为DD/MM/YYYY。

这是我目前所拥有的:

<script language="JavaScript" type="text/javascript">
function validateForm()
{
    *snipped firstname, surname, email validation*
    var dob = document.getElementById("dateofbirth").value;
    *snipped dob validation*
    var area = document.getElementById("areaofinterest").value;
    if (area == "")
    {
        alert("Please select an Area of Interest!");
        return false;
    }
    var now = new Date();
    var birthdate = dob.split("/");
    var born = new Date(dob[2], dob[0], dob[1] * 1 - 1);
    var age = Math.floor((now.getTime() - born.getTime()) / (365.25 * 24 * 60 * 60 * 1000));
    if (area == "adults" && age<18)
    {
        alert("You need to be 18 years of age and older for the Adults books!");
        return false;
    }
return true;
}
</script>

我只是 JavaScript 的初学者，所以这段代码可能存在非常明显的错误。但基本上写的是我想要达到的。

如果选择成人图书感兴趣区，请查看出生日期是否超过 18 岁。

可以在下面看到我所拥有的 HTML:

<form method="post" name="form1" onsubmit="return validateForm()" action="">
    Fields marked with * are required to be filled out!
    <br />
    First Name*: 
    <input type="text" id="firstname" name="First Name" placeholder="e.g. John" />
    <br />
    Surname*:
    <input type="text" id="surname" name="Surname" placeholder="e.g. Smith" />
    <br />
    Email address*:
    <input type="text" id="emailaddress" name="Email Address" placeholder="e.g. john.smith@example.com" />
    <br />
    Contact phone number:
    <input type="text" id="phonenumber" name="Contact Phone Number" placeholder="e.g. 0410 224 567" />
    <br />
    Date of Birth*:
    <input type="text" id="dateofbirth" name="Date of Birth" placeholder="DD/MM/YYYY" />
    <br />
    Area of Interest*:
    <select id="areaofinterest" name="Area Of Interest" />
    <option value="">Select interest</option>
    <option value="children">Books for children</option>
    <option value="adults">Books for adults</option>
    </select>
    <br />
    <input type="submit" value="Submit" /><input type="reset" value="Reset" />
</form>

我很感激任何反馈。如果已经回答了这个问题，我很抱歉。我知道它有但我似乎无法让它为我的目的工作。我可能犯了一个简单的格式错误或忘记了一些东西。这可能是非常明显的事情。

Answer 1

演示:http://jsfiddle.net/mkginfo/LXEHp/7/

使用这个 JavaScript。经过测试并且运行良好。注意:请使用此代码检查您的所有代码。您会发现您过去的代码中几乎没有错误。我建议使用“console.log”和 Firebug 来检查值。

  function validateForm()
    {
        //*snipped firstname, surname, email validation*
        var dob = document.getElementById("dateofbirth").value;
       // *snipped dob validation*
        var area = document.getElementById("areaofinterest").value;
        if (area == "")
        {
            alert("Please select an Area of Interest!");
            return false;
        }

        var now = new Date();
        var birthdate = dob.split("/");
        var born = new Date(birthdate[2], birthdate[0]-1, birthdate[1]);
        age=get_age(born,now);
        if (area == "adults" && age<18)
        {
            alert("You need to be 18 years of age and older for the Adults books!");
            return false;
        }

    }

    function get_age(born, now) {
      var birthday = new Date(now.getFullYear(), born.getMonth(), born.getDate());
      if (now >= birthday) 
        return now.getFullYear() - born.getFullYear();
      else
        return now.getFullYear() - born.getFullYear() - 1;
    }