jQuery 点击函数，输入值长度和模式

Question

我有一个问题，我已经苦苦挣扎了 2 天。我有一个网页要求输入 phone 号码，我正在尝试在输入选项卡中为 phone 号码制作一个 "validator"，但我似乎无法弄清楚如何检查输入选项卡的最小长度，无论是如何只接受数字字符。这是代码：

    $("#start").click(function(){ // click func
    if ($.trim($('#phonenr').val()) == ''){
     $("#error").show();

我尝试添加：

     if ($.trim($('#phonenr').val()) == '') && ($.trim($('#phonenr').val().length) < 15)

但这行不通。任何帮助，将不胜感激。另外请告诉我如何让它只允许数字？

谢谢！

最终代码，在@Saumya Rastogi 的帮助下。 $("#start").click(函数(){

    var reg = /^\d+$/;
    var input_str = $('#phonenr').val();
   chopped_str = input_str.substring(0, input_str.length - 1);
   if(!reg.test(input_str)) {
    $("#error").show();
    return;
}
if(($.trim(input_str) == '') || ($.trim(input_str).length < 15)) {
  $("#error").show();
} else {

Answer 1

如果您使用的是 HTML5，则可以使用新的 number 输入类型

<input type="number" name="phone" min="10" max="10">

您还可以使用 pattern 属性将输入限制为特定的正则表达式。

Answer 2

您可以进行验证。

您可以使用test (Regex Match Test) for accepting only digits in the input text. Just use javascript's substring来截断输入的非数字字符，如下所示：

$(function() {
 $('#btn').on('click',function(e) {
   var reg = /^\d+$/; // <------ regex for validatin the input should only be digits
    var input_str = $('#phonenr').val();
    chopped_str = input_str.substring(0, input_str.length - 1);
    if(!reg.test(input_str)) {
     $('label.error').show();
        return;
    }
    if(($.trim(input_str) == '') || ($.trim(input_str).length < 15)) {
      $('label.error').show();
    } else {
      $('label.error').hide();
    }
  });
})

label.error {
  display: none;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="phonenr" type="text" value=""><br>
<label class='error'>Invalid Number</label>
<br><br>
<button id="btn">Click to Validate</button>

希望对您有所帮助！

Answer 3

如果您正在寻找根据模式检查输入并根据有效性显示消息的最简单方法，那么您需要使用正则表达式：

// Wait until the DOM has been fully parsed
window.addEventListener("DOMContentLoaded", function(){

  // Get DOM references:
  var theForm = document.querySelector("#frmTest");
  var thePhone = document.querySelector("#txtPhone");
  var btnSubmit = document.querySelector("#btnSubmit");
  
  // Hook into desired events. Here, we'll validate as text is inputted
  // into the text field, when the submit button is clicked and when the 
  // form is submitted
  theForm.addEventListener("submit", validate);
  btnSubmit.addEventListener("click", validate);
  thePhone.addEventListener("input", validate);
  
  // The simple validation function
  function validate(evt){
    var errorMessage = "Not a valid phone number!";
    
    // Just check the input against a regular expression
    // This one expects 10 digits in a row.
    // If the pattern is matched the form is allowed to submit,
    // if not, the error message appears and the form doesn't submit.
    !thePhone.value.match(/\d{3}\d{3}\d{4}/) ? 
      thePhone.nextElementSibling.textContent = errorMessage : thePhone.nextElementSibling.textContent = ""; 
      evt.preventDefault();
  }
 
});

span {
  background: #ff0;
}

<form id="frmTest" action="#" method="post">
  <input id="txtPhone" name="txtPhone"><span></span>
  <br>
  <input type="submit" id="btnSubmit">
</form>

或者，您可以更好地控制流程并使用 pattern HTML5 属性和正则表达式来验证条目。长度和位数同时检查。

然后您可以通过 HTML5 验证 API 和 setCustomValidity() 方法实现您自己的自定义错误消息。

<form id="frmTest" action="#" method="post">
  <input type="tel" id="txtPhone" name="txtPhone" maxlength="20"
         placeholder="555-555-5555" title="555-555-5555"
         pattern="\d{3}-\d{3}-\d{4}" required>
  <input type="submit" id="btnSubmit">
</form>

Stack Overflow 的代码片段环境不能很好地处理表单，但可以看到有效的 Fiddle here.

jQuery 点击函数，输入值长度和模式

jQuery Click Function, input value length and pattern

javascript

jquery

html

javaquery