在文本框 ontype 内以 YYYY-MM-DD HH:MM 格式验证日期答案

【问题标题】：Validating Date in YYYY-MM-DD HH:MM format inside textbox ontype在文本框 ontype 内以 YYYY-MM-DD HH:MM 格式验证日期
【发布时间】：2017-08-21 01:11:14
【问题描述】：

我想验证一个需要接受格式的文本框 YYYY-MM-DD HH:MM 中的日期，使用

<!DOCTYPE html>
<html>
<body>

<form action="/action_page_post.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

<p>If you click submit, without filling out the text field,
your browser will display an error message.</p>

</body>
</html>

如果不是上述格式，它应该变成红色或发光。

【问题讨论】：

此链接帮助访问：jsfiddle.net/jquerybyexample/EywSP
需要 css 来发光 ontype 验证
给他们一个日期时间选择器
不，为了兼容性问题，我不想让日期时间选择器看到这里 - stackoverflow.com/questions/7372038/…

标签： jquery html css datetime-format client-side-validation

【解决方案1】：

这将测试

模式
有效日期

function isValid(str) {
  var isPattern = /^20[1-9][0-9]-[0-1][0-2]-[0-3][0-9] [0-2][0-4]:[0-5][0-9]$/.test(str);
  if (!isPattern) return false;
  var d = new Date(str);
  return (!isNaN(d));
}
window.onload=function() {
  document.querySelector("input[name=date]").onkeyup=function() {
    var val = this.value;
    this.className = isValid(val)?"":"glow"
  }
}

.glow { background-color:pink }

<form>
<input type="text" name="date" required>
  <input type="submit" value="Submit">
</form>

【讨论】：

完美运行！不错
你想要括号吗？
那么你的connnent是什么意思？

【解决方案2】：

只是掩饰它怎么样？

JSfiddle

Array.prototype.forEach.call(document.body.querySelectorAll("*[data-mask]"), applyDataMask);

function applyDataMask(field) {
    var mask = field.dataset.mask.split('');
    
    // For now, this just strips everything that's not a number
    function stripMask(maskedData) {
        function isDigit(char) {
            return /\d/.test(char);
        }
        return maskedData.split('').filter(isDigit);
    }
    
    // Replace `_` characters with characters from `data`
    function applyMask(data) {
        return mask.map(function(char) {
            if (char != '_') return char;
            if (data.length == 0) return char;
            return data.shift();
        }).join('')
    }
    
    function reapplyMask(data) {
        return applyMask(stripMask(data));
    }
    
    function changed() {   
        var oldStart = field.selectionStart;
        var oldEnd = field.selectionEnd;
        
        field.value = reapplyMask(field.value);
        
        field.selectionStart = oldStart;
        field.selectionEnd = oldEnd;
    }
    
    field.addEventListener('click', changed)
    field.addEventListener('keyup', changed)
}

ISO Date: &lt;input type="text" value="" data-mask="____-__-__  __:__"/&gt;

Source

【讨论】：

为什么要重复一个答案？