jquery - 带日期限制的屏蔽输入插件

Question

我在输入文本字段上使用屏蔽输入来获取 MM/YYYY 格式的日期。(http://digitalbush.com/projects/masked-input-plugin/)

我的 JavaScript 代码:

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

和 HTML 代码:

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

当我开始写东西时，它会将值 12/2099 写入字段，并且不可能写其他东西。

如果在 javascript 掩码中我写了 99/9999，用户可能会写出错误的日期......所以我不知道我必须做什么？

我希望用户可以从 01/1990 开始写到 12/2099，可能会添加日期值 + 20 年或类似的限制...

Answer 1

嗯，我认为屏蔽输入很好，但我更喜欢验证输入值，因为此类插件通常在内部与正则表达式一起使用。

我的解决方案可能是:

(已编辑和测试)

为消息添加 div

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

js:

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

希望这有帮助。

问候。