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?

javascripthtmlvalidation
10
A. Mesut Konuklar

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