如何让 jQuery 验证允许数字包含破折号

Question

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

有人看到我做错了吗？

$('#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");

添加 numericdashe 角色

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>