AAAA) et vérification de l'âge

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

Ce que mon code HTML inclut 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 si elle est valide avec une 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 DD / MM / AAAA pour calculer l'âge?

Si vous souhaitez utiliser des barres obliques dans le format, vous devez vous échapper avec des barres obliques dans la regex:

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

http://jsfiddle.net/P9TER/

Je suggère d'utiliser moment.js qui fournit une méthode facile à utiliser pour ce 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 un moment dans votre page, vous pouvez utiliser CDNJS:

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

J'utiliserais l'objet Date construite pour effectuer la validation pour moi. Même après avoir passé de - à / vous devez toujours vérifier si le mois se situe entre 0 et 12, la date se situe 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; }

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

Si vous souhaitez utiliser des barres obliques dans le format, vous devez vous échapper avec des barres obliques dans la regex:

 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>

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

Si vous avez besoin de ce format, utiliser DD / MM / AAAA

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

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

  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 valide le format de date DD / MM / YY

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 points de tête zéro / sans menacer 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})$/;

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

Le code prend soin de

Mois étant inférieur à 12,
Jours de moins de 32 ans
Travaille même avec des années bissextiles. Pendant l'utilisation dans mon projet pour l'année bissextile, je modifie le code comme

Si ((lyear == false) && (dd> = 29))
{
Alerte ('Format de date invalide!');
Renvoyer faux;
}

Si ((lyear == false) && (dd> = 29))
{
Alerte ('pas une année bissextile février ne peut pas avoir plus de 28 jours');
Renvoyer faux;
}

Plutôt que de lancer l'erreur générique "format de date invalide" erreur qui n'a pas beaucoup de sens pour l'utilisateur. Je modifie le reste du code pour fournir un message d'erreur valide comme mois ne peut pas dépasser 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é. Il donne soit un Vrai ou un faux – sans aucune raison pour laquelle il a échoué. Nous devons écrire plusieurs expressions régulières pour trier ce problème.

Il s'agit de deux problèmes: les barrages sont les bons et c'est une date valide. Je vous suggère d'attraper les changements d'entrée et de mettre les barreaux en vous-même. (Ennuyeux pour l'utilisateur)

Le problème intéressant est de savoir s'ils mettent une date valide et je suggère d'exploiter la flexibilité de 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 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");