Question

在我的表格中，我有[天] [月] [年]这些元素，使用户可以输入

<form id="mail" action="form.php" method="post" onsubmit="validateForm()">
    <label for="dateOfBirth">Date of Birth</label>
     <input type="number" id="day" name="day" max="31" placeholder="Day" >
     <input type="number" id="month" name="month" placeholder="Month" max="12" >
     <input type="number" id="year" name="year" placeholder="Year" max="2016"/>
    <input type="submit" value="submit">
    </form>

按下提交按钮时，应检查用户是否超过18岁。如果他年满18岁，表格应提交。如果用户未满18岁，则应显示错误。验证年龄的代码是有效的，唯一的问题是我不确定如何放置代码

   var day = getElementById("day").value;
   var month = getElementById("day").value;
   var year = getElementById("day").value;
   var age = 18;
   var mydate = new Date();
   mydate.setFullYear(year, month-1, day);

   var currdate = new Date();
   var setDate = new Date();         
   setDate.setFullYear(mydate.getFullYear() + age, month-1, day);

   function validateForm() {

    if ((currdate - setDate) > 0){


        preventDefault();                               // Prevent it being sent
        var details = $('#mail').serialize();         // Serialize form data
        $.post('form.php', details, function(data) {  // Use $.post() to send it
        $('#mail').html(data);                    // Where to display result
    });

        alert("above 18");
    }else{

        alert("below 18");
        $("form").submit(function(e){
            alert('submit intercepted');
            e.preventDefault(e);
        });
    }
}

检查年龄的代码http://jsfiddle.net/Ttsa8/5/

Answer 1

如果你想计算日期输入字段（日，月，年）和当前时间之间的年龄，那么你可以通过jquery这样做。
当您更改字段的值或提交表单时，它将检查年龄 The idea was based on this.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>calculates the age between the date input fields and the current time</title>
    <meta charset="utf-8">

    <script
            src="https://code.jquery.com/jquery-3.1.1.min.js"
            integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous"></script>
</head>

<body>

<form id="form">
    <label for="dateOfBirth">Date of Birth</label>
    <input type="number" id="day" name="day" max="31" placeholder="Day" >
    <input type="number" id="month" name="month" placeholder="Month" max="12" >
    <input type="number" id="year" name="year" placeholder="Year" max="2016"/>
    <input type="submit" id="mail" value="submit">
</form>

<script>

    function validate()
    {
        if (!$("#day").val()) {
            return false;
        }

        if (!$("#month").val()) {
            return false;
        }

        if (!$("#year").val()) {
            return false;
        }

        return true;
    }


    function calculateAge()
    {
        var ageLimit = 18;

        var day   = $("#day").val();
        var month = $("#month").val();
        var year  = $("#year").val();

        if (!validate()) {
            console.log('invalid form');
            return false;
        }

        todayDate  = new Date();
        todayYear  = todayDate.getFullYear();
        todayMonth = todayDate.getMonth();
        todayDay   = todayDate.getDate();

        diffYear = todayYear - year;

        if (todayMonth < (month - 1))
        {
            diffYear--;
        }

        if ((month - 1) == todayMonth && todayDay < day)
        {
            diffYear--;
        }

        if (diffYear >= ageLimit){
            // you are above 18
            console.log('above 18');
            return true;
        }

        console.log('below 18');


        return false;
    }

    $('#form').on('submit', function(e) {

        if (!validate()) {
            console.log('invalid form');
            return false;
        }

        if (calculateAge()) {
            // the post will happen here if the form is valid and it is above the age limit
            console.log('submit fired');
            return true;
        }
        console.log('submit blocked');
        return false;
    });

    $('#month').on('change', function(e) {
        calculateAge();
    });

    $('#day').on('change', function(e) {
        calculateAge();
    });

    // This is a shortcut for .on("change", handler)
    $('#year').change(function() {
        calculateAge();
    });

</script>

</body>

</html>

如何继续检查表单更新Javascript

1 个答案: