根据验证保留和失去对文本框的关注

Question

我有一个文本框，仅允许用户以mm-dd-yyyy格式输入日期。 如果日期有效，则用户可以将焦点移出文本框，但如果无效，则焦点应保留在文本框内，直到用户更正为止。 目前，我正在使用正则表达式来验证文本框输入，并且能够在无效日期的情况下成功地将焦点集中在文本框内。 我面临的问题是，即使我要更正无效的日期，焦点也不会移出文本框。

 var dateCheck = function() { var value = $("#txtbox1").val() if (/^(0[1-9]|1[0-2])-(0[1-9]|1\\d|2\\d|3[01])-(19|20)\\d{2}$/.test(value)) { $("#txtbox1").blur(); return true; } else { $("#txtbox1").focus().on('blur', function () { $(this).focus(); return false; }); } }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" size="12" class="form-control" onfocusout="dateCheck()" id="txtbox1"/> 

PS：使用Datepicker不是要求的一部分，我知道它会容易得多。 任何对此的线索将不胜感激。

编辑 ：我找到了一个可行的解决方案，并更新了上面的代码，但是此代码仅在Chrome中有效，而在IE11中不起作用

Answer 1

您不需要else部分。 您可以使用HTMLElement.blur（）从元素上移除焦点。 您可以轻松地this元素传递给函数，以便可以在函数内部引用当前元素。 我还将建议您使用oninput事件而不是onfocusout 。

请尝试以下方式：

 var dateCheck = function(el) { var value = $(el).val(); if (/^(0[1-9]|1[0-2])-(0[1-9]|1\\d|2\\d|3[01])-(19|20)\\d{2}$/.test(value)) { el.blur(); } }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" size="12" class="form-control" oninput="dateCheck(this)" id="txtbox1"/> 

Answer 2

此摘要会检查日期是否有效以及日期格式是否正确。

 var dateMMDDYYYRegex = "^[0-9]{2}/[0-9]{2}/[0-9]{4}$"; /* isValidData source: http://stackoverflow.com/questions/5812220/how-to-validate-a-date */ function isValidDate(s) { var bits = s.split('/'); var d = new Date(bits[2], bits[0] - 1, bits[1]); return d && (d.getMonth() + 1) == bits[0] && d.getDate() == Number(bits[1]); } var dateCheck = function() { var value = $("#txtbox1").val(); if(value.match(dateMMDDYYYRegex) && isValidDate(value)){ $("#txtbox1").blur(); return true; } else { $("#txtbox1").focus().on('blur', function () { $(this).focus(); return false; }); } }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <input type="text" size="12" class="form-control" onfocusout="dateCheck()" id="txtbox1"/> 

我个人会考虑使用像这样的输入掩码，以使用户更容易使用您的代码。 同样不要忘记验证服务器端的日期。 我将使用一个名为Carbon的库来表示日期。

参考代码： Stackoverflow

Answer 3

您可以使用onblur事件，而不是使用onfocusout事件。 请参考以下代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
    var dateCheck = function () {
        var value = $("#txtbox1").val()
        if (/^(0[1-9]|1[0-2])-(0[1-9]|1\d|2\d|3[01])-(19|20)\d{2}$/.test(value)) {
            $("#txtbox1").blur();
        }
        else {
            $("#txtbox1").focus();
        }
    };
</script>
<input type="text" size="12" class="form-control" onblur="dateCheck()" id="txtbox1" />

输出如下：