可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm having issues with the jquery validator validating phone numbers. So in a form where I have an input for phone number, I use jquery's additional methods to validate the phone. Here's the code:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>stuff/title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(e) {
    var val = $('#everything').validate({
        onkeyup: false,
        errorClass: "req_mess",
        ignore: ":hidden",
        rules: {
            phone: {
                required: true,
                minlength: 10,
                phoneUS: true
            }
        },
        messages: {
            phone: {
                required: "Please enter your phone number",
                phoneUS: "Please enter a valid phone number: (e.g. 19999999999 or 9999999999)"
            }
        }
    });
});
</script>
<form name="everything" id="everything" action="Private/Insert.php" method="post" style="display:none;" >
    Phone Number: <input type="text" name="phone" id="phone"/>
</form>
</body>
</html>

And the database ends up looking like this for the phone number column:

Sometimes it inserts the full phone number (crossed out in red) properly, but then sometimes it just inserts 3 digits. I don't know why. Is this something to do with Internet Explorer maybe? Has anyone come across this problem? Does anyone know why this is happening? Here's the entirety of the jquery validation code if anyone needs it

回答1:

You are using the phoneUS validation method for the phone number, which accepts both of the inputs below (examples):

949-101-2020
9491012020

Since the first example is considered valid, you attempt to store it directly into your database, and it seems that you are using an integer or number column. Many databases, including MySQL will attempt to coerce that value into an integer by simply dropping everything after the first non-numeric character. I always recommend using a varchar field for storing phone numbers because the numbers don't really have a numeric meaning (ie you're never going to add/subtract).

Also, it's a bad idea to simply rely on client side validation. You always want to validate your data on the server side because it's very trivial to trick client side validation (maliciously or not).

回答2:

Here is a custom validation for phone template:

jQuery.validator.addMethod("phone", function (phone_number, element) {
        phone_number = phone_number.replace(/\s+/g, "");
        return this.optional(element) || phone_number.length > 9 &&
              phone_number.match(/^\(?[\d\s]{3}-[\d\s]{3}-[\d\s]{4}$/);
    }, "Invalid phone number");

ex: 123-123-1234

And here is a format with country prefix :

  jQuery.validator.addMethod("phoneUS", function (phone_number, element) {
      phone_number = phone_number.replace(/\s+/g, "");
      return this.optional(element) || phone_number.length > 9 &&
      phone_number.match(/^\+[0-9]{11}$/);
  }, "Please specify a valid phone number");

Just add the phoneUS class to the imput ex +41748987145

This method is an extension for jquery validation. In this way you define your own custom rules. Belive me, there are situations where you need them.

回答3:

If the database field is holding integers and you're sending stuff like "987-123-1223", depending on your db engine only the first digits will be stored.

I've had this problem myself already! You can fix it on the server side using simple string replacement methods!