Question

我想创建一个小表单的HTML页面。

它包含

名称
性别
出生日期
我同意复选框
提交按钮

应该有条件。如果年龄介于20和20岁之间。 25 [根据DOB计算]应激活“我同意”复选框，否则应将其停用。

停用意味着，我同意框不应接受任何支票输入。

    
    function myAgeValidation() {
    
        var lre = /^\s*/;
        var datemsg = "";
       
        var inputDate = document.as400samplecode.myDate.value;
        inputDate = inputDate.replace(lre, "");
        document.as400samplecode.myDate.value = inputDate;
        datemsg = isValidDate(inputDate);
            if (datemsg != "") {
                alert(datemsg);
                return;
            }
            else {
                //Now find the Age based on the Birth Date
                getAge(new Date(inputDate));
            }
    
    }
    
    function getAge(birth) {
    
        var today = new Date();
        var nowyear = today.getFullYear();
        var nowmonth = today.getMonth();
        var nowday = today.getDate();
    
        var birthyear = birth.getFullYear();
        var birthmonth = birth.getMonth();
        var birthday = birth.getDate();
    
        var age = nowyear - birthyear;
        var age_month = nowmonth - birthmonth;
        var age_day = nowday - birthday;
       
        if(age_month < 0 || (age_month == 0 && age_day <0)) {
                age = parseInt(age) -1;
            }
        //alert(age);
       
        if ((age <= 25 ) && ( age >= 20)) {
    document.as400samplecode.agree.disabled=false;
    
    }
        else {
            alert("age limit is 20 - 25");
        }
    
    }
    
    function isValidDate(dateStr) {
    
       
        var msg = "";
     
        var datePat = /^(\d{1,2})(\/|-)(\d{1,2})\2(\d{4})$/;
    
        var matchArray = dateStr.match(datePat); // is the format ok?
        if (matchArray == null) {
            msg = "Date is not in a valid format.";
            return msg;
        }
    
        month = matchArray[1]; // parse date into variables
        day = matchArray[3];
        year = matchArray[4];
    
       
        if (month < 1 || month > 12) { // check month range
            msg = "Month must be between 1 and 12.";
            return msg;
        }
    
        if (day < 1 || day > 31) {
            msg = "Day must be between 1 and 31.";
            return msg;
        }
    
        if ((month==4 || month==6 || month==9 || month==11) && day==31) {
            msg = "Month "+month+" doesn't have 31 days!";
            return msg;
        }
    
        if (month == 2) { // check for february 29th
        var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
        if (day>29 || (day==29 && !isleap)) {
            msg = "February " + year + " doesn't have " + day + " days!";
            return msg;
        }
        }
    
        if (day.charAt(0) == '0') day= day.charAt(1);
       
        //Incase you need the value in CCYYMMDD format in your server program
        //msg = (parseInt(year,10) * 10000) + (parseInt(month,10) * 100) + parseInt(day,10);
       
        return msg;  // date is valid
    }

<html>
    <head>
    </head>
    <body>
    
  
    <form name="as400samplecode">
    
    Name: <input type="text" name="namee" required><br>
    <br>
    gender: <input type="radio" name="sex" value="male">Male<br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="female">Female<br>
    <br>
    <input type="text" name="myDate" size=10 maxlength=10> (in MM/DD/YYYY format)<br>
    <br>
    <br>
    <br>
    <input type = "checkbox" name="agree" disabled  >I, Agree<br>
    <br>
    <br>
    <input type="button" value="Submit"  onclick="Javascript:myAgeValidation()" >
    </form>
    
    </body>
    
    </html>

Answer 1

一种解决方案是在myDate输入元素中添加"oninput" event，每当输入元素的值发生变化时，该元素执行myAgeValidation函数。

<input type="text" name="myDate" size=10 maxlength=10 oninput="myAgeValidation()">(in MM/DD/YYYY format)

如果元素的值是有效日期，则下一步是检查年龄范围。如果该值在20 - 25范围内，则可以启用该复选框。只需确保将复选框设置为禁用，以防某人进入可接受的20-25岁，然后将其更改回其他内容。

请参阅此处的示例解决方案： https://jsfiddle.net/z6hnu7qn/

可选：我根据日期的可接受性在输入字段中添加了绿色，粉红色和红色css边框。

我还建议您查看验证日期字符串的其他方法。如果它是有效的，只返回一个空字符串，并检查datemsg是否为空字符串，这可能会导致问题。

这是一个在javascript中解决日期验证的问题：

How to validate date with format "mm/dd/yyyy" in JavaScript?

还有一些流行的图书馆，比如angularjs，可以进行日期验证。

使用javascript验证HTML表单中的条件

1 个答案: