Javascript 日期验证（DD/MM/YYYY）和年龄检查答案

【问题标题】：Javascript Date Validation ( DD/MM/YYYY) & Age CheckingJavascript 日期验证（DD/MM/YYYY）和年龄检查
【发布时间】：2013-11-18 04:08:39
【问题描述】：

我最近开始研究 Javascript。我正在测试的是以有效格式检查 DoB。下一步将检查年龄。

我的 HTML 代码包含的内容如下

<form name="ProcessInfo" action="#" method="POST" enctype="multipart/form-data" target="_self" onsubmit="return checkForm();">
.
.
.
.
<br>
<label for="txtDOB">Date of Birth:* </label>
<input id="txtDOB" type="text" name="txtDOB" size="12">
format: ##/##/####
<br>
.
.
.
</form>
.
.

我在我的 .js 文件中做了以下操作

var errMessage = "";

function checkForm() {
    validateName();
    validateSurname();
    carSelect();
    validateDOB();

    if (errMessage == "") {
    } else {
        alert(errMessage);
    }
}

...

function validateDOB()
{
    var dob = document.forms["ProcessInfo"]["txtDOB"].value;
    var pattern = /^([0-9]{2})-([0-9]{2})-([0-9]{4})$/;
    if (dob == null || dob == "" || !pattern.test(dob)) {
        errMessage += "Invalid date of birth\n";
        return false;
    }
    else {
        return true
    }
}

我尝试使用正则表达式检查它是否有效，但即使我正确输入了日期，我也总是会收到警报。以及如何分开 DD / MM / YYYY 来计算年龄？

【问题讨论】：

您的模式由破折号 (-) 分隔，而不是斜线 (/)。你真正想要的是哪一个？此外，您可以将\d 用作[0-9] 的等效项。
感谢您的警告！我想使用 / 并认为我正在使用它来执行 /^ 当我将 - 更改为 / 时出现错误。
99/99/9999 是有效日期吗？
@BalusC 没有理由付出很多努力来禁止99/99/9999。如果用户想撒谎，他仍然可以输入有效但不正确的日期。像这样的验证应该仅用于在出现拼写错误的情况下提供反馈。
@Ingo: 只是想给一些思考的食物；）顺便说一下，\d 应该小心用于除 JS 之外的其他语言，例如 Java/C#。也就是匹配非拉丁数字，如希伯来文、中文、波斯文等。

标签： javascript html validation

【解决方案1】：

当我们只放置模式时，检查每个可能的日期组合并不简单。用户可以输入有效数字，例如 99/99/9999，但这不是有效日期。即使我们将天数和月份限制为更严格的值（30/31 天和 0-12 个月），我们仍然可能会遇到闰年、二月等情况，并且我们无法使用正则表达式正确验证它们。所以更好的方法是使用日期对象本身。

let InputDate = "99/99/9999"
let pattern =/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;
let editDate = InputDate.replace("\/","-")

let dateValidation = function validation(){
  
if(pattern.test(InputDate) && new Date(editDate) == 'Invalid Date'){
  return false;
}else{
  return true;
}

}

console.log(dateValidation()) //Return false

【讨论】：

【解决方案2】：

如果您使用的是moment，那么这是单行代码：

moment(date).format("DD/MM/YYYY").isValid()

【讨论】：

【解决方案3】：

您可以使用 html 标签的属性而不是来自 html 输入类型的验证 ="date" 可以用来代替验证它。这就是 html 5 带给你的好处

【讨论】：

【解决方案4】：

使用模式和检查验证：

var input = '33/15/2000';

var pattern = /^((0[1-9]|[12][0-9]|3[01])(\/)(0[13578]|1[02]))|((0[1-9]|[12][0-9])(\/)(02))|((0[1-9]|[12][0-9]|3[0])(\/)(0[469]|11))(\/)\d{4}$/;

alert(pattern.test(input));

【讨论】：

绝对模式:) +1

【解决方案5】：

var date=/^[0-9]{1,2}\-[0-9]{1,2}\-[0-9]{1,4}$/;

if(!date.test(form.date.value))

alert("Enter correct date");

else
alert(" working");

【讨论】：

没有。严重地。请为代码提供一些上下文和解释。 How to answer

【解决方案6】：

这是两个问题 - 斜线位置是否正确，日期是否有效。我建议您捕捉输入更改并将斜线放在自己身上。（对用户来说很烦人）

有趣的问题是他们是否输入了有效的日期，我建议利用 js 的灵活性：

function isValidDate(str) {
  var newdate = new Date();
  var yyyy = 2000 + Number(str.substr(4, 2));
  var mm = Number(str.substr(2, 2)) - 1;
  var dd = Number(str.substr(0, 2));
  newdate.setFullYear(yyyy);
  newdate.setMonth(mm);
  newdate.setDate(dd);
  return dd == newdate.getDate() && mm == newdate.getMonth() && yyyy == newdate.getFullYear();
}
console.log(isValidDate('jk'));//false
console.log(isValidDate('290215'));//false
console.log(isValidDate('290216'));//true
console.log(isValidDate('292216'));//false

【讨论】：

可以在一行而不是四行中定义var newdate = new Date(yyyy, mm, dd);。

【解决方案7】：

我使用我找到的代码@.w3resources

代码负责

月份小于 12，
不到 32 天
甚至适用于闰年。在我的项目中使用闰年时，我修改了代码，例如

如果 ((lyear==false) && (dd>=29))
{
alert('日期格式无效！');
返回错误;
}

如果 ((lyear==false) && (dd>=29))
{
alert('不是闰年的二月不能超过 28 天');
返回错误;
}

而不是抛出对用户没有多大意义的通用“日期格式无效”错误。我修改了其余代码以提供有效的错误消息，例如月份不能超过 12、天不能超过 31 等，

使用正则表达式的问题是很难准确地确定哪里出了问题。它要么给出一个 True 要么给出一个 false - 没有任何失败的原因。我们必须编写多个正则表达式来对这个问题进行排序。

【讨论】：

【解决方案8】：

日期和月份前导零

var pattern =/^(0[1-9]|1[0-9]|2[0-9]|3[0-1])\/(0[1-9]|1[0-2])\/([0-9]{4})$/;

并且在日期和月份中都有前导零/没有前导零

var pattern =/^(0?[1-9]|1[0-9]|2[0-9]|3[0-1])\/(0?[1-9]|1[0-2])\/([0-9]{4})$/;

【讨论】：

【解决方案9】：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
    function dateCheck() {
        debugger;

        var inputValues = document.getElementById('dateInput').value + ' ' + document.getElementById('monthInput').value + ' ' + document.getElementById('yearInput').value;

        var d = new Date();
        var n = d.getHours();
        var m = d.getMinutes();
        var p = d.getSeconds();

        var date = document.getElementById("dateInput").value;
        var month = document.getElementById("monthInput").value;
        var year = document.getElementById("yearInput").value;

        var dateCheck = /^(0?[1-9]|[12][0-9]|3[01])$/;
        var monthCheck = /^(0[1-9]|1[0-2])$/;
        var yearCheck = /^\d{4}$/; 

        if (month.match(monthCheck) && date.match(dateCheck) && year.match(yearCheck)) {

            var ListofDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

            if (month == 1 || month > 2) {
                if (date > ListofDays[month - 1]) {
                    alert('Invalid date format!');
                    return false;
                }
            }

            if (month == 2) {
                var leapYear = false;
                if ((!(year % 4) && year % 100) || !(year % 400)) {
                    leapYear = true;
                }

                if ((leapYear == false) && (date >= 29)) {
                    alert('Invalid date format!');
                    return false;
                }

                if ((leapYear == true) && (date > 29)) {
                    alert('Invalid date format!');
                    return false;
                }

            }
            var flag = 1
        }

        else {
            alert("invalid date");


        }
        if (flag == 1) {
            alert("the date is:" + inputValues + " " + "The time is:" + n + ":" + m + ":" + p);
        }

        clear();
    }

    function clear() {
        document.myForm.dateInput.value = "";
        document.myForm.monthInput.value = "";
        document.myForm.yearInput.value = "";
    }


</script>

</head>


<body>  
    <div>  
        <form name="myForm" action="#">   
            <table>
                <tr>
                    <td>Enter Date</td>
                    <td><input type='text' name='dateInput' id="dateInput" placeholder="Date"  maxlength="2" onclick="dateCheck(document.myForm.dateInput)" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));"/></td>
                    <td><span id="span1"></span></td>
                </tr>
                <tr>
                    <td>Enter Month</td>
                    <td><input type='text' name='monthInput' id="monthInput" placeholder="Month"  maxlength="2" onclick="dateCheck(document.myForm.dateInput)" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));"/></td>
                    <td><span id="span2"></span></td>
                </tr>
                <tr>
                    <td>Enter Year</td>
                    <td><input type='text' name='yearInput' id="yearInput" placeholder="Year" minlength="4" maxlength="4" onclick="dateCheck()" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));"/></td>
                    <td><span id="span3"></span></td>
                </tr>

                <tr>
                    <td></td>
                    <td><input type="submit" name="submit" value="Submit" onclick="dateCheck()"/></td>
                </tr>
            </table>
        </form>  
    </div>   
</body>  
</html>
<td>

【讨论】：

【解决方案10】：

我会利用内置的Date 对象为我进行验证。即使从- 切换到/，您仍然需要检查月份是否在 0 到 12 之间，日期是否在 0 到 31 之间，年份是否在 1900 到 2013 之间。

function validateDOB(){

    var dob = document.forms["ProcessInfo"]["txtDOB"].value;
    var data = dob.split("/");
    // using ISO 8601 Date String
    if (isNaN(Date.parse(data[2] + "-" + data[1] + "-" + data[0]))) {
        return false;
    }

    return true;
}

【讨论】：

你知道这个小东西吗：“与 NaN 的相等比较总是评估为假”
建议：使用 isNan()
@decebal 不，我想我在写答案时不知道这一点。谢谢

【解决方案11】：

如果要在格式中使用正斜杠，则需要在正则表达式中使用反斜杠进行转义：

   
var dateformat = /^(0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])[\/\-]\d{4}$/;

【讨论】：

【解决方案12】：

我建议使用moment.js，它提供了一种易于使用的方法。

interactive demo

function validate(date){
    var eighteenYearsAgo = moment().subtract(18, "years");
    var birthday = moment(date);

    if (!birthday.isValid()) {
        return "invalid date";    
    }
    else if (eighteenYearsAgo.isAfter(birthday)) {
        return "okay, you're good";    
    }
    else {
        return "sorry, no";    
    }
}

要在页面中包含时刻，您可以使用 CDNJS：

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment.min.js"></script>

【讨论】：

+1。一种矫枉过正，但比重新发明轮子更可靠。
这是否检查日期是否有效，即 1995 年 2 月 29 日 == 无效日期
@Skytiger 在交互式演示中尝试一下：-p
我只是简单地复制/粘贴，它就像一个魅力。谢谢！正是我需要的。

【解决方案13】：

         if(!/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{2}$/.test($(this).val())){
                     alert('Date format incorrect (DD/MM/YY)');
                     $(this).datepicker('setDate', "");
                     return false;
                }

此代码将验证日期格式 DD/MM/YY

【讨论】：

使用正则表达式的问题是很难准确识别是什么导致日期无效。它要么给出 True 要么给出 false - 没有任何理由可以帮助用户修复。我们必须编写多个正则表达式来对这个问题进行排序。

【解决方案14】：

要获取值，请使用 pattern.exec() 而不是 pattern.test()（.test() 返回一个布尔值）。

【讨论】：

【解决方案15】：

您已为此格式使用了正则表达式： DD - MM- YYYY

如果您需要这种格式 DD/MM/YYYY，请使用

var pattern =/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;

【讨论】：

为什么你的回答和 Drahcir 2 分钟前回答的完全一样？
我在点击提交按钮时可能慢了一秒。 :)

【解决方案16】：

如果要在格式中使用正斜杠，则需要在正则表达式中使用反斜杠进行转义：

var pattern =/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;

http://jsfiddle.net/P9TER/

【讨论】：

您可能还想考虑将{2} 更改为{1,2}，以允许像3/6/1990 这样的日期——如果您愿意的话。当然，您可以强制用户填充零。
感谢您的提示！用正则表达式分隔值后，我可以直接解析它们还是应该在“/”存在时拆分它们并将它们放入新变量中以计算年龄？
这是不正确的，因为它可以接受像 20/20/2010 这样的日期
答案不完整。不存在日期和月份的范围检查。
它接受未来的年份，这不是预期的。