web-dev-qa-db-ja.com

Javascriptの日付検証（DD / MM / YYYY）および年齢チェック

最近、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
    }
}

正規表現で有効かどうかを確認しようとしましたが、日付を正しく入力しても常にアラートが表示されます。どうすればDD/MM/YYYYを分離して年齢を計算できますか？

javascripthtmlvalidation
10
A. Mesut Konuklar

形式でスラッシュを使用する場合は、正規表現でバックスラッシュを使用してエスケープする必要があります。

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

http://jsfiddle.net/P9TER/

21
Drahcir

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>
13
Brigand

組み込みの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 を参照してください。

7
Lim H.

形式でスラッシュを使用する場合は、正規表現でバックスラッシュを使用してエスケープする必要があります。

   
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

それは2つの問題です-適切な場所をスラッシュすることであり、それは有効な日付です。入力の変更をキャッチして、自分にスラッシュを付けることをお勧めします。 （ユーザーにとって迷惑です）

興味深い問題は、有効な日付を入力するかどうかであり、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
1
Rune Jeppesen

パターンを使用して、検証を確認します。

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

このフォーマットに正規表現を使用しました：DD-MM- YYYY

この形式のDD/MM/YYYYが必要な場合は、

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

このコードは日付形式DD/MM/YYを検証します

0
Sri

@ . w3resources で見つけたコードを使用します

コードが面倒を見る

  • 月が12未満
  • 32日未満

  • うるう年でも動作します。うるう年のプロジェクトで使用している間に、コードを次のように変更します

    if（（lyear == false）&&（dd> = 29））
    {
    alert（ 'Invalid date format！'）;
    falseを返します。
    }

    if（（lyear == false）&&（dd> = 29））
    {
    alert（「うるう年ではない2月は28日を超えることはできません」）;
    falseを返します。
    }

一般的な「無効な日付形式」エラーをスローするのではなく、ユーザーにとってあまり意味がありません。月が12以下、日が31以下など、有効なエラーメッセージを提供するように残りのコードを変更します。

正規表現を使用する場合の問題は、何が間違っていたのかを正確に特定することが難しいことです。 Trueまたはfalseを返します。失敗した理由はありません。この問題をソートするには、複数の正規表現を作成する必要があります。

0
Ananda

日と月の先頭にゼロを付けます

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

momentを使用している場合、それは1行のコードです。

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

0
Kuldeep Saxena

値を取得するには、pattern.test（）ではなくpattern.exec（）を使用します（.test（）はブール値を返します）。

0
drk

Html入力タイプ= "date"からの検証の代わりにhtmlタグの属性を使用できます。検証する代わりに使用できます。これがHTML 5が提供する利点です

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