如何获得 jQuery 验证以允许数字包含破折号

Question

我发现这个问题之前有人问过，看到建议是添加一个名为 alphanumeric 的方法。我尝试添加此方法，但验证仍不接受 phone 带破折号的数字。

有没有人看出我做错了什么？

$('#phone').keyup(function() {
  jQuery.validator.addMethod("alphanumeric", function(value, element) {
   return this.optional(element) || /^[a-z0-9\-]+$/i.test(value);
  }, "Numbers and dashes only");
 });
  $('#salesforce_submit').validate({
  rules: {
   phone: {
    required: true,
    //digits: true,
    minlength: 10,
    alphanumeric: true  
   }
  },
  messages: {
   phone: {
    required: "Please enter your phone number",
    digits: "Please enter a valid phone number with only numbers",
    minlength: "Your number seems a bit short, doesn't it?"
   }
  },
  submitHandler: function(form) {
   event.preventDefault();
   var datastring = $('#salesforce_submit').serialize();
   $.ajax({
    url: '/php/quoteSend.php',
    type: 'POST',
    data: datastring
    ,
    success: function(data) {
     console.log(data);
     if (data == 'Error!') {
      alert('Unable to submit form!');
     } else {
     }
    },
    error: function(xhr, textStatus, errorThrown) {
     alert(textStatus + '|' + errorThrown);
     console.log('error');
    }
   });
   }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<form id="salesforce_submit" method="POST" enctype="multipart/form-data">
  <div><input id="phone" placeholder="Phone*" class="input block" maxlength="12" name="phone" type="phone"></div>
    <input type="Submit" Value="Submit">
</form>

Answer 1

您可以使用此代码允许数字和破折号

jQuery.validator.addMethod("numericdashe", function (value, element) {
console.log(value);
  if (/^[0-9\-]+$/i.test(value)) {
      return true;
  } else {
      return false;
  };
}, "Numbers and dashes only");

添加数字破折号角色

phone: {
            required: true,
            //digits: true,
            minlength: 10,
            //alphanumeric: true
            numericdashe: true      
        }
    },

无需在 keyup 侦听器中添加 jQuery.validator.addMethod。

Answer 2

您的正则表达式有问题。

This regex 有效：/^[+][(]{0,1}[0-9]{1,3}[)]{0,1}[- \s./0-9]$/i

working fiddle

$('#phone').keyup(function() {
  jQuery.validator.addMethod("alphanumeric", function(value, element) {
   return this.optional(element) || /^[+]*[(]{0,1}[0-9]{1,3}[)]{0,1}[-\s\./0-9]*$/i.test(value);
  }, "Numbers and dashes only");
 });
  $('#salesforce_submit').validate({
  rules: {
   phone: {
    required: true,
    //digits: true,
    minlength: 10,
    alphanumeric: true  
   }
  },
  messages: {
   phone: {
    required: "Please enter your phone number",
    digits: "Please enter a valid phone number with only numbers",
    minlength: "Your number seems a bit short, doesn't it?"
   }
  },
  submitHandler: function(form) {
   event.preventDefault();
   var datastring = $('#salesforce_submit').serialize();
      
   $.ajax({
    url: '/php/quoteSend.php',
    type: 'POST',
    data: datastring
    ,
    success: function(data) {
     console.log(data);
     if (data == 'Error!') {
      alert('Unable to submit form!');
     } else {
     }
    },
    error: function(xhr, textStatus, errorThrown) {
     alert(textStatus + '|' + errorThrown);
     console.log('error');
    }
   });
   }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<form id="salesforce_submit" method="POST" enctype="multipart/form-data">
  <div><input id="phone" placeholder="Phone*" class="input block" maxlength="12" name="phone" type="phone"></div>
    <input type="Submit" Value="Submit">
</form>

如何获得 jQuery 验证以允许数字包含破折号

How to get jQuery validate to allow numbers to include dashes

javascript

jquery

alphanumeric

jquery-validate