使用javascript以HTML形式验证条件

Validate a condition in HTML form using javascript

本文关键字：验证条件 HTML javascript 使用更新时间：2023-09-26

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

它包含

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

应该有一个条件。如果年龄在20&25[根据出生日期计算]"我同意"复选框应被激活，否则应被停用。

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

    
    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>

一种解决方案是向myDate输入元素添加一个"oninput"事件，该事件在每次输入元素的值更改时执行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进行日期验证的问题：

如何使用格式"验证日期；mm/dd/yyyy"；在JavaScript中？

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