JQuery Validator 插件电话验证答案

【问题标题】：JQuery Validator Plugin Phone ValidationJQuery Validator 插件电话验证
【发布时间】：2012-11-10 05:33:02
【问题描述】：

我在使用 jquery 验证器验证电话号码时遇到问题。因此，在我输入电话号码的表单中，我使用 jquery 的附加方法来验证电话。代码如下：

<!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>

对于电话号码列，数据库最终看起来像这样：

有时它会正确插入完整的电话号码（用红色划掉），但有时它只插入 3 位数字。我不知道为什么。这可能与 Internet Explorer 有关吗？有没有人遇到过这个问题？有谁知道为什么会这样？如果anyone needs it，这是jquery验证代码的全部

【问题讨论】：

你能做一些测试看看哪些值有问题吗？是特定的数字范围，还是具有特定字符的条目？
@Richard，我想问题出在你的服务器端代码上，在插入数据库时先检查一下。

标签： jquery html forms validation jquery-validate

【解决方案1】：

这里是电话模板的自定义验证：

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");

例如：123-123-1234

这是一个带有国家前缀的格式：

  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");

只需将 phoneUS 类添加到输入中前 +41748987145

此方法是对 jquery 验证的扩展。通过这种方式，您可以定义自己的自定义规则。相信我，在某些情况下您需要它们。

【讨论】：

【解决方案2】：

您正在对电话号码使用phoneUS 验证方法，该方法接受以下两个输入（示例）：

949-101-2020
9491012020

由于第一个示例被认为是有效的，因此您尝试将其直接存储到数据库中，并且您似乎使用的是整数或数字列。许多数据库，包括 MySQL 将尝试通过简单地删除第一个非数字字符之后的所有内容来将该值强制转换为整数。我总是建议使用varchar 字段来存储电话号码，因为这些数字实际上并没有数字含义（即您永远不会加/减）。

此外，简单地依赖客户端验证是个坏主意。您总是希望在服务器端验证您的数据，因为欺骗客户端验证非常简单（无论是否恶意）。

【讨论】：

完美，这就是问题所在。添加了一些服务器端验证以及将列更改为 varchar。工作正常，非常感谢。当之无愧的代表！

【解决方案3】：

如果数据库字段包含整数，并且您要发送诸如“987-123-1223”之类的内容，则根据您的数据库引擎，只会存储第一个数字。

我自己也遇到过这个问题！您可以使用简单的字符串替换方法在服务器端修复它！

【讨论】：

如果确实如此，那么 Richard 确实应该使用字符串类型来存储电话号码，因为前导零可能很重要，但在存储到数字字段时会丢失。