jquery - jquery 验证插件无法正常工作

Question

我正在使用 jQuery Validation Plugin 1.8.1 进行表单验证，我的问题是它无法正常工作

在这个 html 代码中

<input name="Mobile" type="text" class="Input" id="Mobile" placeholder="Type your mobile number" value="<?php echo $activeUser->getMobile();?>" required="true" number="true" />

required="true"工作正常，但number="true"不工作

请帮我解决这个问题谢谢

Answer 1

您的 HTML 代码已用于 HTML 5 验证...

<input name="Mobile" type="text" class="Input" id="Mobile"
placeholder="Type your mobile number" value="" required="true" number="true" />

这对于 jQuery Validate 插件的更新版本（如 1.11.0）来说没有问题。

工作演示：http: //jsfiddle.net/5rPGv/2/

但是，当使用 jQuery Validate 插件的 1.8.0 版本时，您的相同代码会被破坏。

破碎：http: //jsfiddle.net/5rPGv/1/

---

要修复您的代码，您只有两个选择：

1) 将 jQuery Validate 插件更新到更高版本。

或者

.validate()2) 在任何版本中 声明您的规则。http://jsfiddle.net/5rpGv/3/

$(document).ready(function () {

    $('#myform').validate({
        rules: {
            Mobile: {
                required: true,
                number: true
            }
        }
    });

});

Answer 2

添加additional-methods.js到您的页面中。您应该有mobileUK验证方法或。尝试使用：

<input name="Mobile" type="text" class="Input" id="Mobile" placeholder="Type your mobile number" value="<?php echo $activeUser->getMobile();?>" required="true" mobileUK="true" /> 

编辑

如果 html 版本不起作用，请尝试使用 JS 进行设置：

$("#myform").validate({
  rules: {
    field: {
      required: true,
      mobileUK: true
    }
  }
});

您可以创建自己的验证类型。示例：http ://docs.jquery.com/Plugins/Validation/CustomMethods/phoneUS

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(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");

$("#myform").validate({
  rules: {
    field: {
      required: true,
      phoneUS: true
    }
  }
});