Question

我想创建一个带有文本字段的html表单，该表单检查DD-MM-YYYY是否正确输入到字段中，并在不是这种情况时提醒用户。我怎样才能用javascript来解决这个问题？

Answer 1

难道你不能只制作3个<input>字段 - 一个月，一天和一年？

Answer 2

在JS中，在用户密钥关闭或命中输入后，您可以测试该值（假设<input>的id为inpdate，例如）：

var val = document.getElementById('inpdate').value;
var check = /^\s*\d{2}-\d{2}-\d{4}\s*$/;
if(check.test(val)){
    // it's good
}
else {
    // not valid
}

我将\s*放入允许前导和尾随空格。如果你想允许的话，由你决定。

Answer 3

JS Fiddle

稍微过分（并且它仍然不健壮），但它允许您将格式（MM-DD-YYYY）更改为其他类似（YYYYMMDD）。

HTML

<input type="text" name="date" id="date-input" onkeyup="checkDate.call(this)" />
<pre id="debug"></pre>

JS

var debug = document.getElementById('debug');

var checkDate = function(){
   var format = 'MM-DD-YYYY';
   var delim  = '-';
   var inputs = { object  : this
                , day     : { order  : undefined
                            , length : undefined
                            , value  : undefined
                            }
                , month   : { order  : undefined
                            , length : undefined
                            , value  : undefined
                            }
                , year    : { order  : undefined
                            , length : undefined
                            , value  : undefined
                            }
                };

   // Decipher Format Positioning
   var temp = ['Y','M','D'];
   var pos  = [];
   for (var i=0,n=temp.length; i<n; i++){
      pos[i]    = [];
      pos[i].push(format.indexOf(temp[i]));                // start
      pos[i].push(temp[i]);                                // letter
      pos[i].push(format.lastIndexOf(temp[i])-pos[i][0]);  // length
   }
   pos.sort();

   // Store the positions
   for (var i=0,n=pos.length; i<n; i++){
      switch (pos[i][1]){
         case 'D': inputs.day.order   =i; inputs.day.length   =pos[i][2]; break;
         case 'M': inputs.month.order =i; inputs.month.length =pos[i][2]; break;
         case 'Y': inputs.year.order  =i; inputs.year.length  =pos[i][2]; break;
      }
   }

   // Build Regex
   //alert(format);
   var temp = format.split(/[^a-zA-Z]/);
   var regex = '';    
   for(var i=0,n=temp.length; i<n; i++){
       regex += '(\\d{' + temp[i].length + '})';
   }
   var re = new RegExp(regex);
   var matches = re.exec(inputs.object.value.replace(/[^0-9]/g,''));  
   if (matches && matches.length>0){
      inputs.day.value   = matches[inputs.day.order   +1];
      inputs.month.value = matches[inputs.month.order +1];
      inputs.year.value  = matches[inputs.year.order  +1];

      debug.innerHTML = 'Valid Date: \n'
                      + '\tDay:   ' + inputs.day.value + '\n'
                      + '\tMonth: ' + inputs.month.value + '\n'
                      + '\tYear:  ' + inputs.year.value + '\n';
   } else {
      debug.innerHTML = 'Not a valid date!';
   }

};

如何在javascript中创建带有输入掩码的表单

3 个答案:

JS Fiddle