6

ユーザーが日時を次の形式で入力するテキスト フィールドがありますdd/mm/YYYY hh:ii。これが有効な日付/時刻であるかどうかを JavaScript を使用して確認したいと思います。これには、2 月 29 日とすべてが含まれます。どうやってやるの？特別な月のため、正規表現は成功しません。

4

3 に答える 3

3

時間の確認に関する役立つ記事については、http://internotredici.com/article/checkdateinjavascript/を参照してください。

以下、記事全文

javascript で日付を確認する 2006 年 1 月 31 日に Scripting の下で公開された記事 プログラマーは、フォームに挿入された情報を検証する必要があり、その正確性を確認するために javascript を利用すると便利です。このチュートリアルでは、日付が有効かどうかを確認するために JavaScript を使用する方法について説明します。フォームの日付は 2 つの異なる方法で挿入されます。最初の方法では、ユーザーが異なるパターンに従ってデータを入力するテキスト フィールドを使用します (このチュートリアルでは、日付は dd-mm-yyyy 形式であると想定しています)。2 つ目は、代わりにプルダウン メニューを使用します。最初の解決策はより簡単に実行できますが、ユーザーによるエラーが発生しやすくなります (たとえば、無効な文字を挿入したり、計画された形式とは異なる形式で日付を頻繁に入力したりするなど)。

<form id="test_form" action="get" method="/checkdatejavascript" 
onsubmit="return(check_form(this)); return false;">
<input type="text" name="datefield" id="datefield" />
</form>

挿入されたデータの正確性をチェックするには、check_form 関数を使用します。

function check_form()
{
// Regular expression used to check if date is in correct format
var pattern = new RegExp([0-3][0-9]-(0|1)[0-9]-(19|20)[0-9]{2});
if(document.getElementById('datefield').value.match(pattern))
{
  var date_array = document.getElementById('datefield')
                   .value.split('-');
  var day = date_array[0];

  // Attention! Javascript consider months in the range 0 - 11
  var month = date_array[1] - 1;
  var year = date_array[2];

  // This instruction will create a date object
  source_date = new Date(year,month,day);

  if(year != source_date.getFullYear())
  {
     alert('Year is not valid!');
     return false;
  }

  if(month != source_date.getMonth())
  {
     alert('Month is not valid!');
     return false;
  }

  if(day != source_date.getDate())
  {
     alert('Day is not valid!');
     return false;
  }
}
else
{
  alert('Date format is not valid!');
  return false;
}

return true;

ご覧のとおり、青色で示されている正規表現は、挿入された日付がデフォルトの割り当てられた形式に従うかどうかを制御するために使用されます。パターンが有効な場合、関数は次のステップに進みます。そうでない場合、エラー メッセージが発生し、フォームは送信されません (さらに、日付を空にすることは正規表現によって保証されます)。日付を検証するには、javascript が提供する Date オブジェクトを使用します。(赤で示されているコードを確認してください)。アルゴリズムは非常に単純です。ユーザーによって挿入された情報を使用して Date オブジェクトを作成し、メソッド getFullYear、getMonth、getDate を使用して、それぞれに関連付けられた年、月、日を表す 3 つの値を生成します。これらの値がユーザーによって挿入された値と等しい場合、日付は正しいです。次の例を考えてみましょう。

ユーザーはテキスト フィールドに文字列 09-01-1976 を挿入します 文字列から作成された日付オブジェクトは 09-01-1976 です 日付は有効です

ユーザーはテキスト フィールドに文字列 31-02-2006 を挿入します 文字列から作成された日付オブジェクトは 03-03-2006 です 日付が無効です

o が 1 月で 11 が 12 月であると仮定すると、月は 0 から 11 の範囲と見なされるため、プログラマーは特に注意を払う必要がありました (緑色で示されているコードを確認してください)。プルダウン メニューを使用して日付を挿入する場合、日付形式を検証するために正規表現が必要ないため、コントロールはより単純になります。

  <form id="test_form" action="get" method="/checkdatejavascript" 
   onsubmit="return(check_form(this)); return false;">
  <select name="dateday" id="dateday">
  <option value="1">1</option>
     […]
  </select>
  <select name="datemonth" id="datemonth">
  <option value="0">January</option>
     […]
   </select>
   <select name="dateyear" id="dateyear">
  <option value="2006">2006</option>
     […]
  </select>
  </form>

日付の正確さを制御するJavaScript関数は

 function check_form()
{
 var day = document.getElementById('dateday').value;
 var month = document.getElementById('datemonth').value;
 var year = document.getElementById('dateyear').value;

 // This instruction will create a date object
 source_date = new Date(year,month,day);

 if(year != source_date.getFullYear())
{
   alert('Year is not valid!');
   return false;
}

if(month != source_date.getMonth())
{
  alert('Month is not valid!');
  return false;
}

if(day != source_date.getDate())
{
  alert('Day is not valid!');
  return false;
}

 return true;
}

更新: 正規表現に問題があったため、コードを更新しました。アドバイスをくれたアレックスに感謝

于 2013-02-04T19:15:42.360 に答える
2

moment.js を使用しても問題ない場合は、http://momentjs.com/docs/#/parsing/string-format/ で日時解析ユーティリティを確認できます。例えば：

moment("29/02/2014 11:45", "DD/MM/YYYY hh:mm", true).isValid()
于 2014-12-28T04:15:40.743 に答える