Javascript Date Validation ( DD/MM/YYYY) & Age Checking

Javascript Date Validation ( DD/MM/YYYY) & Age Checking

本文关键字:amp Checking Age MM Validation Date DD Javascript YYYY      更新时间:2023-09-26

我最近开始研究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
    }
}

试图用正则表达式检查它是否有效,但即使我正确输入日期,我也总是收到警报。我怎样才能分开日/毫米/年来计算年龄?

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

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

http://jsfiddle.net/P9TER/

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

互动演示

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>

我会利用内置的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;
}

有关详细信息,请参阅 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Example:_Using_parse。

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

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

<!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>

使用模式和检查验证:

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));

您为此格式使用了正则表达式:日-月-年

如果您需要此格式的日/月/年使用

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

这是两个问题 - 斜杠是否在正确的位置以及它是否是一个有效的日期。我建议您捕获输入更改并将斜杠放入自己。(用户烦恼)

有趣的问题是他们是否输入了一个有效的日期,我建议利用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

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

         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

和月的前导零

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})$/;

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

代码负责

  • 月小于 12,

  • 天数少于 32

  • 甚至适用于闰年。在我的闰年项目中使用时,我修改了代码,例如

    if ((

    lyear==false) && (dd>=29))
    {
    警报("日期格式无效!返回 false;
    }

    if ((

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

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

使用正则表达式的问题在于很难准确确定出了什么问题。它给出一个真或假 - 没有任何失败的原因。我们必须编写多个正则表达式来解决这个问题。

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");

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

如果您使用的是moment那么这就是单行代码:

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

当我们只放置模式时,检查每个可能的日期组合并不简单。用户可以输入有效的数字,如 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