Jquery Validation表单验证 & 手机号验证

Jquery Validation简介

Jquery Validation插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。
该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今。目前版本是 1.13.1（截止：2015.05.26）。

HTML引用文件部分

表单部分

  

    
验证完整的表单
    

      用户名
      
    
    

      密码
      
    
    

      验证密码
      
    
    

      Email
      
    
  

      手机号
      
    
    

      
    
  

自定义手机号码验证部分

jQuery.validator.addMethod("isMobile", function(value, element) {  
                    var length = value.length;  
                    var mobile = /^1[0-9]{10}$/;  
                    // 或者 var mobile = /^1[3,4,5,7,8][0-9]{9}$/;
                    return this.optional(element) || (length == 11 && mobile.test(value));  
                }, "请正确填写您的手机号码");  

javascript部分（包含自定义手机号码验证）

$().ready(function() {//表单验证
    // 手机号码验证  
    jQuery.validator.addMethod("isMobile", function(value, element) {  
        var length = value.length;  
        var mobile = /^1[0-9]{10}$/;  
        return this.optional(element) || (length == 11 && mobile.test(value));  
    }, "请正确填写您的手机号码");  
    // 在键盘按下并释放及提交后验证提交表单
    $("form").validate({
        rules: {
            username: "required",
            password: {
                required: true,
                minlength: 6
            },
            confirm_password: {
                required: true,
                minlength: 6,
                equalTo: "#password"
            },
            email: {
                required: true,
                email: true
            },
            telephone:{
                required: true,
                maxlength:11,
                maxlength:11,
                isMobile:true
            }
        },
        messages: {
            username: "请输入用户名",
            password: {
                required: "请输入密码",
                minlength: "密码长度不能小于 6 个字母"
            },
            confirm_password: {
                required: "请输入确认密码",
                minlength: "密码长度不能小于 6 个字母",
                equalTo: "两次密码输入不一致"
            },
            email: "请输入一个正确的邮箱",
            telephone: {
                required: "请输入手机号",
                maxlength:"请填写11位的手机号",
                maxlength:"请填写11位的手机号",
                isMobile:"请填写正确的手机号码"
            }
        }
    });
});

错误提示信息示例如下

    密码
    
    密码长度不能小于 6 个字母

若希望提示信息突出显示，为 error 设置样式即可。如

.error{color:red;}