基于验证保持和失去对文本框的关注答案

【问题标题】：Retain and lose focus on Textbox based on validation基于验证保持和失去对文本框的关注
【发布时间】：2018-11-06 05:46:36
【问题描述】：

我有一个文本框，它只允许用户以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"/>

P.S：使用 Datepicker 不是要求的一部分，我知道会容易得多。任何有关这方面的线索将不胜感激。

编辑：我找到了可行的解决方案并更新了上面的代码，但此代码仅适用于 Chrome，不适用于 IE11

【问题讨论】：

作为旁注，我会考虑转换日期服务器端。这增加了可用性。
@KuebelElch15 有什么想法或链接可以让我探索这种可能性吗？

标签： javascript jquery html internet-explorer textbox

【解决方案1】：

此片段检查日期是否有效以及格式是否正确。

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

我个人会考虑使用this 之类的输入掩码，以便用户更轻松地使用您的代码。也不要忘记验证服务器端的日期。我会使用一个名为 Carbon 的库来表达日期。

参考代码：Stackoverflow

【讨论】：

【解决方案2】：

您不需要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"/>

【讨论】：

【解决方案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" />

输出如下：

【讨论】：