Question

如果输入数据与yyyy/mm/dd格式不匹配，我想删除输入数据！我尝试了以下操作，但只删除了字母和特殊字符...

例如

20144必须删除最后4个
  2014 //必须删除last /
  2014/01/123->必须删除最后3个

$("input").on("keyup", function() {
   console.log(this.value);
   this.value = this.value.replace(/[^(\d{4})\/(\d{1,2})\/(\d{1,2})]/g, '');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text">

Answer 1

一旦您真正分解了想要的逻辑，该策略实际上非常简单。因此，您想将用户输入强制为YYYY/MM/DD格式。我们可以分步进行：

用/字符分隔输入的值。现在，您得到一个数组。
我们保留数组的前三个元素，它们分别对应于YYYY，MM和DD。我们将忽略之后出现的任何片段，因为它们不是有效日期的一部分。可以在阵列上使用.slice(0,3)。
解析数组的每个部分：
- 在索引0中，您有年份片段。使用.substring(0,4)，以便将其修剪为最多4个字符
- 在索引1或2下，分别具有月/日片段。使用.substring(0,2)，以便将其修剪为最多2个字符
使用.join('/')重新加入结果数组。
如果数组包含空元素，则最终将在字符串中重复//。只需使用正则表达式.replace(/\/(\/)+/, '/')

您会发现，按照我的逻辑，我没有添加填充数字，例如。将天数从1转换为01。用户输入时无法执行此操作，因为您永远不知道用户是否打算输入一位或两位数。如果需要，您将不得不重新解析输入onblur，因为那是您知道用户已经完成输入的时候。

请参见下面的概念验证：

$('input').on('keyup', function() {
  var valueParts = this.value.split('/');
  if (!valueParts.length) {
    return;
  }

  // Only keep the first 3 elements of array
  valueParts = valueParts.slice(0, 3);
  
  // Substring array (keep first 4 characters for year, and first 2 characters for month/day)
  var substringCounts = [4, 2, 2];
  substringCounts.forEach(function(substringCount, index) {
    // If index does not exist in array, skip it
    if (!valueParts[index])
      return;
      
    valueParts[index] = valueParts[index].substring(0, substringCount);
  });

  // Join remaining elements
  var parsedString = valueParts.join('/');

  // Trim extraneous slashes
  parsedString = parsedString.replace(/\/(\/)+/, '/');

  this.value = parsedString;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text">

注意：如果要填充数字，则必须在上面提到的内容的上方加上

：

// Pad numbers on blur
$('input').on('blur', function() {
  var valueParts = this.value.split('/');
  if (!valueParts.length) {
    return;
  }

  // Only keep the first 3 elements of array
  valueParts = valueParts.slice(0, 3);

  // Pad lengths (year to 4 digits, month to 2 digits, day to 2 digits)
  var padLengths = [4, 2, 2];
  padLengths.forEach(function(padLength, index) {
    // If index does not exist in array, skip it
    if (!valueParts[index])
      return;

    valueParts[index] = valueParts[index].padStart(padLength, '0');
  });

  // Join remaining elements
  var parsedString = valueParts.join('/');

  // Trim extraneous slashes
  parsedString = parsedString.replace(/\/(\/)+/, '/');

  this.value = parsedString;
});

牢记这一点，如果要将上述两种逻辑结合在一起，则可以抽象化处理“连接剩余元素”和“修剪多余的斜杠”的部分。我已经隐藏了下面的代码段，因为它非常冗长，并且大多数包含与上述相同的逻辑：

// Helper method: joins array using '/' and trims duplicated joining characters
function joinAndTrimSlashes(valueArray) {
  // Join remaining elements
  var parsedString = valueArray.join('/');

  // Trim extraneous slashes
  parsedString = parsedString.replace(/\/(\/)+/, '/');
  
  return parsedString;
}

$('input').on('keyup', function() {
  var valueParts = this.value.split('/');
  if (!valueParts.length)
    return;

  // Only keep the first 3 elements of array
  valueParts = valueParts.slice(0, 3);

  // Substring array (keep first 4 characters for year, and first 2 characters for month/day)
  var substringCounts = [4, 2, 2];
  substringCounts.forEach(function(substringCount, index) {
    // If index does not exist in array, skip it
    if (!valueParts[index])
      return;

    valueParts[index] = valueParts[index].substring(0, substringCount);
  });

  this.value = joinAndTrimSlashes(valueParts);
});

// Pad numbers on blur
$('input').on('blur', function() {
  var valueParts = this.value.split('/');
  if (!valueParts.length)
    return;

  // Only keep the first 3 elements of array
  valueParts = valueParts.slice(0, 3);

  // Pad lengths (year to 4 digits, month to 2 digits, day to 2 digits)
  var padLengths = [4, 2, 2];
  padLengths.forEach(function(padLength, index) {
    // If index does not exist in array, skip it
    if (!valueParts[index])
      return;

    valueParts[index] = valueParts[index].padStart(padLength, '0');
  });

  this.value = joinAndTrimSlashes(valueParts);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text">

Answer 2

由于我确实认为纯正则表达式将很难解决此问题，因此您可以进行手动传递，例如

this.Controls.Add(sideBar);
sideBar.BringToFront();

Answer 3

$("input").on("keyup", function() {
   var validationRegex = new RegExp(/([12]\d{3}\/(0[1-9]|1[0-2])\/(0[1-9]|[12]\d|3[01]))/);
   if(!validationRegex.test(this.value)){
     this.value = '';
   }
});

这将仅匹配格式YYYY/MM/DD。

Answer 4

非常感谢您的回答！我参考了您的答案，可以解决我的愿望。

I believe there have much better solution so answer here if you guy have better one

 var format = ["number","number","number","number","slash","number","number","slash","number","number"];
    $("input").on("keyup", function() {
       if(this.value.length > format.length) {
         this.value = this.value.slice(0,format.length);
         return;
       }
       for(var i in this.value) {
          if(format[i] == "number") {
            if(!this.value[i].match(/[0-9]/)) {
              this.value = this.value.slice(0,i);
            }
          } else {
            if(this.value[i] != "/") {
              this.value = this.value.slice(0,i);
            }
          }
       }
    });

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input type="text">

如果不是yyyy / mm / dd格式，请删除当前输入吗？

4 个答案: