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引用文件部分

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">  <!-- 引入jquery -->
<script src="http://libs.cdnjs.net/jquery-validate/1.14.0/jquery.validate.min.js"></script>    <!-- validate插件 -->
<script src="http://libs.cdnjs.net/jquery-validate/1.14.0/localization/messages_zh.js"></script>  <!-- validate中文提示 -->

表单部分

<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证完整的表单</legend>
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" name="password" type="password">
    </p>
    <p>
      <label for="confirm_password">验证密码</label>
      <input id="confirm_password" name="confirm_password" type="password">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
    </p>
  <p>
      <label for="telephone">手机号</label>
      <input id="telephone" name="telephone" type="text">
    </p>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>

自定义手机号码验证部分

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:"请填写正确的手机号码"
            }
        }
    });
});

错误提示信息示例如下

<p>
    <label for="password">密码</label>
    <input id="password" name="password" type="password" aria-required="true" class="error" aria-invalid="true">
    <label id="password-error" class="error" for="password">密码长度不能小于 6 个字母</label>
</p>

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

.error{color:red;}