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?
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})$/;
Je suggère d'utiliser moment.js , qui fournit une méthode facile à utiliser pour le faire.
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>
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.
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}$/;
<!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>
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
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));
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})$/;
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
J'utilise le code que j'ai trouvé @. w3resources
Le code prend en charge
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.
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})$/;
Si vous utilisez moment
, alors c'est le code à ligne unique:
moment(date).format("DD/MM/YYYY").isValid()
Pour obtenir les valeurs, utilisez pattern.exec () au lieu de pattern.test () (le .test () renvoie une valeur booléenne).
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
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");