web-dev-qa-db-fra.com

Validation de la date Javascript (JJ/MM/AAAA) et vérification de l'âge

J'ai commencé à travailler sur Javascript récemment. Ce que je teste vérifie le DoB dans un format valide. La prochaine étape consistera à vérifier l'âge. 

Ce que mon code HTML comprend est ci-dessous

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

et j'ai fait ce qui suit dans mon fichier .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
    }
}

J'ai essayé de vérifier sa validité avec l'expression régulière mais je reçois toujours une alerte même si je tape la date correctement Et comment puis-je séparer le JJ/MM/AAAA pour calculer l'âge?

10

Si vous souhaitez utiliser des barres obliques dans le format, vous devez vous échapper avec des barres obliques inverses dans l'expression régulière:

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

http://jsfiddle.net/P9TER/

21
Drahcir

Je suggère d'utiliser moment.js , qui fournit une méthode facile à utiliser pour le faire.

démo interactive

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

Pour inclure moment dans votre page, vous pouvez utiliser CDNJS:

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

J'utiliserais l'objet Date intégré pour effectuer la validation pour moi. Même après que vous passiez de - à /, vous devez toujours vérifier si le mois est compris entre 0 et 12, la date est entre 0 et 31 et l'année entre 1900 et 2013 par exemple.

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

Voir https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Example:_Using_parse pour plus d'informations.

7
Lim H.

Si vous souhaitez utiliser des barres obliques dans le format, vous devez vous échapper avec des barres obliques inverses dans l'expression régulière:

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

5
user1089766
<!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>
4
Mayur Narula

Il y a deux problèmes: les barres obliques sont-elles au bon endroit et s'agit-il d'une date valide .. Je vous suggère de prendre connaissance des modifications apportées aux entrées et de mettre les barres obliques en vous-même. (ennuyeux pour l'utilisateur)

Le problème intéressant est de savoir s'ils ont mis une date valide et je suggérerais d'exploiter à quel point js est flexible:

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

1
Rune Jeppesen

En utilisant pattern et check valider: 

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
rung

Vous avez utilisé une expression régulière pour ce format: DD - MM - AAAA

Si vous avez besoin de ce format JJ/MM/AAAA, utilisez 

var pattern =/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;
1
abhiklpm
         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;
                }

Ce code validera le format de date JJ/MM/AA

0
Sri

J'utilise le code que j'ai trouvé @. w3resources

Le code prend en charge 

  • mois étant inférieur à 12, 
  • jours étant moins de 32 
  • même travaille avec des années bissextiles . Tout en utilisant dans mon projet pour les années bissextiles, je modifie le code comme

    if ((lyear == false) && (dd> = 29))
    {
    alert ('Format de date invalide!');
    return false;

    if ((lyear == false) && (dd> = 29))
    {
    alert ('pas une année bissextile, février ne peut avoir plus de 28 jours');
    return false;
    }

Plutôt que de générer l'erreur "Format de date non valide" générique qui n'a pas beaucoup de sens pour l'utilisateur . Je modifie le reste du code pour fournir un message d'erreur valide, car le mois ne peut pas être supérieur à 12, les jours ne peuvent pas dépasser 31 etc.,

Le problème avec l'utilisation de l'expression régulière est qu'il est difficile d'identifier exactement ce qui a mal tourné. Cela donne un vrai ou un faux - sans aucune raison pour laquelle cela a échoué. Nous devons écrire plusieurs expressions régulières pour résoudre ce problème.

0
Ananda

avec zéro pour le jour et le mois

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

et avec les deux zéro en tête/sans zéro pour le jour et le mois

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

Si vous utilisez moment, alors c'est le code à ligne unique:

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

0
Kuldeep Saxena

Pour obtenir les valeurs, utilisez pattern.exec () au lieu de pattern.test () (le .test () renvoie une valeur booléenne).

0
drk

Vous pouvez utiliser les attributs de la balise html au lieu de la validation. Vous pouvez utiliser le type d'entrée HTML = "date" au lieu de la valider. C'est le benifits html 5 vous donne 

0
vikas Madaan
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");
0
sanket kumar