JavaScript通过出生日期验证年龄以进行下拉选择。

3

我看到了许多基于出生日期的年龄验证代码,但似乎没有一个可以在我的代码中正常工作。

基本上,我的TAFE课程要求我创建一个表单,包括名字、姓氏、电子邮件地址、联系电话号码、出生日期和兴趣领域(下拉框中有儿童和成人图书)。

我需要验证出生日期是否符合正确格式。我已成功完成了这个任务,它也考虑了30天月份和闰年。

接下来的部分要求兴趣领域下拉框在提交时进行验证,以确保该人的年龄超过18岁。但是只在所选择的兴趣领域为成人图书时才进行验证。

现在,我可以简单地做一些事情,使所有1996年及其以上的年龄都被拒绝,但我更愿意创建一个从输入的出生日期中进行验证的程序,因为我认为这是预期的操作。

出生日期以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>

我很感谢任何反馈。如果此问题已经得到解答,我很抱歉。我知道可能已有解答,但我似乎无法使其在我的用途中正常工作。可能我犯了一个简单的格式错误或者遗漏了某些东西。这可能是非常明显的问题。


基本上代码不起作用,只是通过。我认为其中一个日期格式错误,因为当调用年龄时,它返回NaN。 - Curley5959
感谢您的纠正。对于错误我很抱歉 :) - Curley5959
4个回答

5

演示: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;
    }

1
这个好使了!! 我成功地让ManKum的代码在IE和Firefox中工作了,但是在Google Chrome中不行。这个可以在所有三个浏览器上运行。谢谢! - Curley5959

0

我刚刚发现你的年龄返回值为NaN存在一个小错误。

请尝试按照以下方式替换born变量:

    var born = new Date(dob.toString());

注意:问题出在日期解析上!希望这可以帮到你!如果不行,请告诉我。

年龄仍然返回NaN。 - Curley5959
当我调用alert(dob)时,它会显示正确的格式,例如31/01/1990。但是当我调用alert(born)时,它会显示无效日期。 - Curley5959
嗯,日期仍然无效。我本以为这也会修复它,但显然不是。 - Curley5959
这很奇怪!对我来说它是有效的。无论如何,你用什么浏览器来测试这个? - ManKum
谷歌浏览器。我刚在火狐浏览器中尝试了一下,它可以工作。我还尝试了完整的年龄验证代码,在火狐和IE中也可以工作。哇。真不敢相信它居然能够工作。但是我不明白为什么无法获取born变量来显示有效日期。 - Curley5959
糟糕-浏览器总是不一致!以下是一些帖子: (https://dev59.com/lW025IYBdhLWcg3wyJCV), (https://dev59.com/JGsy5IYBdhLWcg3w3Rzc), (https://dev59.com/tHA65IYBdhLWcg3w6DJO), (http://stackoverflow.com/questions/12784337/date-time-format-issue-with-chrome), (http://stackoverflow.com/questions/2928794/date-format-in-chrome-5)。 - ManKum

0

与其减去每年的平均毫秒数,不如尝试确定这个人今年是否过生日(这取决于时区)。然后从当前年份中减去出生年份,并在此基础上减去1(如果这个人今年还没有过生日)以获取年龄。代码示例:

function 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;
}

你能用代码的形式表达这个吗?我不确定我该如何编写它。 - Curley5959
添加了一些代码,假设您可以正确地将日期解析为JavaScript日期。 - jakber
我想不出来。抱歉。:/ 就像我说的,我只懂基本的JavaScript。不确定如何成功地在函数内嵌套函数。 - Curley5959

0
U can calculate exact age validation by this code. 
<head runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript">
        function AgeValidation(ageOfCustomer)
        {
            var date=saildates.split('/')[2];
            var d = new Date();
            var lipday=((d.getFullYear()-date)/4);
            var month = d.getMonth()+1;
            var day = d.getDate();
            var output = day + '/' + month + '/' + d.getFullYear();
            var age=((daydiff(parseDate(output), parseDate(saildates))-lipday)/365);
            if(age > 18.000 || age== 18.000)
            {
                return true;
            }
            else
            {
                alert('Your age should be 18 or greater than 18 yrs!!!');
            }
        }
        function parseDate(str)
        {
            var mdy = str.split('/')
            return new Date(mdy[2], mdy[1]-1, mdy[0]);
        }
        function daydiff(first, second) 
        {
            return (first-second)/(1000*60*60*24)
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server"     OnClientClick="AgeValidation(this.form.TextBox1.value);"
            Text="Button" onclick="Button1_Click" />
    </div>
    </form>
</body>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接