マスクされた入力プラグインと日付の制限

Question

MM/YYYY形式の日付の入力テキストフィールドにマスク入力を使用します。 （http://digitalbush.com/projects/masked-input-plugin/）

私のjavascriptのコード：

jQuery(function($){ 
    $(".date").mask("12/2099"); 
}); 

HTMLコード：

<input type="text" class="date"> 

私はそれがフィールドに値2099分の12を取る何かを書き始めると、それはすることは不可能だとき他のものを書く。

JavaScriptマスクで99/9999と書くと、ユーザーは偽の日付を書くことができます...私は何をしなければならないのですか？私は、彼らが+ 20年またはそのような何かの日付の値を制限するために追加し、2099分の12まで01/1990に始まる可能書くことができることをユーザーにしたい

...

Answer 1

まあ、私はマスクされた入力を持つと良いと思いますが、これらのプラグインは一般的に内部からの正規表現で動作するため、入力値を検証したいと考えています。

このため私のソリューションは、次のようになります。

（編集、テスト済み）

メッセージ

<form id="frm"> 
    <input type="text" class="date"> 
    <div id="msg"></div> 
    <input type="submit" value="Click Me"/> 
</form> 

jsのためのdivを追加：

 <script type="text/javascript"> 

      function verifyDate(datevalue) { 

       var done = false; 

       if(datevalue != null || datevalue != ''){ 

       //split the date as a tmp var 
       var tmp = datevalue.split('/'); 

       //get the month and year 
       var month = tmp[0]; 
       var year = tmp[1]; 

       if(month >= 1 && month <= 12){ 
        if(year >= 1990 && year <= 2099){ 

        //clean the message 
        clean(); 

        //finally, allow the user to pass the submit 
        done = true; 

        } else { 
        $('#msg').html('Year must be from 1990 - 2099.'); 
        } 
       } else { 
        $('#msg').html('Month is invalid.'); 
       } 
      } 
      return done; 
      } 

      function clean() { 
      $('#msg').html(''); 
      } 

      jQuery(function($) { 

      //mask the input 
      $(".date").mask("12/2099"); 

      $('#frm').submit(function() { 
       var datevalue = $('.date').val(); 
       return verifyDate(datevalue)   
      }); 

      $(".date").keyup(function(){ 
       //get the date 
       var datevalue = $(this).val(); 

       //only if the date is full like this: 'xx/xxxx' continue 
       if(datevalue.length == 7) {    
        verifyDate(datevalue); 
       } else { 
        clean(); 
       } 
      }); 

      }); 

    </script> 

希望をこれは役に立ちます。

よろしくお願いいたします。

Answer 2

私は追加の解決策を提案できます。オスカーの解を少し修正しました。 Josh Bush'sマスク入力プラグインを使用しました。このプラグインは、検証なしにユーザーの入力を導くためにのみ開発されました。私はバリデーションとリーディングを組み合わせました。 ここに私のコード：もちろん

<script src="@Links.Scripts.MaskedInput_js"></script> 
<script> 
$.mask.definitions['y'] = '[12]'; 
$.mask.definitions['m'] = '[01]'; 
$.mask.definitions['d'] = '[0-3]'; 
$("#BirthDay").mask("d9/m9/y999", { placeholder: " " }); 

$("#BirthDay").keyup(function() { 
    var datevalue = $(this).val(); 
    if (datevalue.trim().length == 10) { 
     verifyDate(datevalue); 
    } 
}) 

function verifyDate(datevalue) { 
    var done = false; 
    if (datevalue != null || datevalue != '') { 
     var tmp = datevalue.split('/'); 
     var day = tmp[0]; 
     var month = tmp[1]; 
     var year = tmp[2]; 
     var fromYear = 1900; 
     var now = new Date(); 

     if (day >= 1 && day <= 31) { 
      if (month >= 1 && month <= 12) { 
       if (year >= fromYear && year <= now.getFullYear()) { 
        clean(); 
        done = true; 
       } else { 
        $('#msg').html('Year must be between' + " " + fromYear + " - " + now.getFullYear()); 
       } 
      } else { 
       $('#msg').html('Month is invalid'); 
      } 
     } else { 
      $('#msg').html('Day is invalid'); 
     } 
    } 
    return done; 
} 

function clean() { 
    $('#msg').html(''); 
} 
</script> 

、これは（例えば、30/02/2013ような日付を検証するここには能力がない）、包括的なクライアント側の日付の検証ではありません。私はそのサーバー側の日付検証に使用する必要があります。

しかし、このソリューションはクライアントの間違いを軽減します。