javascript - 使用 JavaScript 强制手机号码字段中的数字不得超过/不少于 11 位

Question

我试图确保人们在提交表单之前在字段中输入不少于/不多于 11 位数字。这是当前的脚本:

$(document).ready(function(){

  $("#form_submission_phone_number").keypress(function(e){
  if(this.value.length!=11){
   $('.nom').remove();
      $(this).after('<span class="nom" style="font-size: 14px; font-weight: bold; color: #FF0000; opacity: 0.6;margin-top: -2px;display: block;">please enter full 11-digit mobile number starting with 1</span>');
  }else{
      $('.nom').remove();
  }
    var keyCode = e.which;
    /*
    8 - (backspace)
    32 - (space)
    48-57 - (0-9)Numbers
    */
    if ( (keyCode != 8 || keyCode ==32 ) && (keyCode < 48 || keyCode > 57)) { 
      return false;
    }
    
    
    
    if(this.value.length==11){
        return false;
    }
  });
   $('#form_submission_phone_number').keyup(function(e){if(e.keyCode == 8)$(this).val('');})  
});

Answer 1

这是我对您的代码的看法。首先，我移动了隐藏或显示 span 的部分。到keyup监听器，因为那时您就知道输入的最终长度。另外，我用了 .hide()和.show()而不是每次删除元素并重新创建它。

我注释掉了导致退格键删除整个输入的最后部分，因为它对我来说似乎没有必要，但如果需要，您可以保留它。我还稍微改变了if决定是否接受某个字符的语句，因此在这种情况下您可能需要添加 keyCode == 8符合这些条件。

$(document).ready(function(){

  $("#form_submission_phone_number").keypress(function(e) {
    
    var keyCode = e.which;
    /*
    8 - (backspace)
    32 - (space)
    48-57 - (0-9)Numbers
    */
    if ( keyCode == 32 || keyCode < 48 || keyCode > 57) { 
      return false;
    }

    if (this.value.length == 11) {
      return false;
    }
  });
      
  $('#form_submission_phone_number').keyup(function(e) {
    if (this.value.length != 11) {
      $('.nom').show();
      $('#submit').attr('disabled', 'disabled');
    } else {
      $('.nom').hide();
      $('#submit').removeAttr('disabled');
    }
    /*if (e.keyCode == 8)
      $(this).val('');
    }*/
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<form>
    <input type="text" id="form_submission_phone_number" /><br>
    <span class="nom" style="font-size: 14px; font-weight: bold; color: #FF0000; opacity: 0.6;margin-top: -2px;display: block;">please enter full 11-digit mobile number starting with 1</span><br>
    <input type="submit" id="submit" value="Submit" disabled />
</form>