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

P.S：使用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"/>

我个人考虑使用this这样的输入掩码，以使用户更轻松地使用您的代码。同样不要忘记验证服务器端的日期。我会使用名为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" />

输出如下：

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

3 个答案: