jquery.validate使用攻略 第一部

下面是“jquery.validate使用攻略 第一部”的完整攻略。

什么是jQuery Validation插件？

jQuery Validation是一款非常流行的jQuery表单验证插件，用于快速地验证和验证表单字段。它是开源的且简单易用，支持各种类型的验证，如必填字段、邮箱、手机、固定电话等。

下载和引用jQuery Validation插件

你可以在官方网站上下载jQuery Validation插件。下载完后，将jquery.validate.js文件引入到HTML代码中即可开始使用它的功能。

<script src="jquery.js"></script> <!-- 引入jquery插件 -->
<script src="jquery.validate.js"></script> <!-- 引入jquery.validate插件 -->

基本的表单验证

使用jQuery Validation非常简单，只需在页面的JavaScript代码中添加以下代码：

$(document).ready(function(){
    $('#form').validate({
        rules:{
            email:"required",
            password:{
                required:true,
                minlength:6
            }
        },
        messages:{
            email:"Please enter your email",
            password:{
                required:"Please provide a password",
                minlength:"Your password must be at least 6 characters long"
            }
        }
    });
});

以上代码实现了对一个表单的简单验证，其中，#form是表单的ID，email和password是表单元素的name属性，required表示该字段必填，minlength表示该字段的最小长度。

以上代码运行时，当用户在表单中不填写email和password，或者password长度小于6个字符时，表单会提示错误信息。

通过样式改变提示信息

另一个常用的特性是可以通过CSS样式来显示错误信息。可以在引用jQuery Validation插件的代码后，再添加以下代码：

label.error{
    color:red;
    margin-left:10px;
}

以上的代码实现了错误提示信息的样式设置，我们可以根据自己的需要设置样式。

示例说明

以下是两个常用的示例说明：

验证邮箱地址

<form id="form">
  <input type="text" name="email" placeholder="Email" />
  <button type="submit">提交</button>
</form>

$(document).ready(function(){
    $('#form').validate({
        rules:{
            email:{
                required:true,
                email:true
            }
        },
        messages:{
            email:{
                required:"Please enter your email",
                email:"Please enter a valid email address"
            }
        }
    });
});

以上代码验证了邮箱地址，只有形如[e-mail]的邮箱地址才会被认为是“有效”的。当用户填写一个无效的邮箱时，例如example@exa，表单会提示"Please enter a valid email address"。

验证电话号码

<form id="form">
  <input type="text" name="phone" placeholder="Phone" />
  <button type="submit">提交</button>
</form>

$(document).ready(function(){
    $('#form').validate({
        rules:{
            phone:{
                required:true,
                minlength:11,
                maxlength:11,
                digits:true
            }
        },
        messages:{
            phone:{
                required:"Please enter your phone number",
                minlength:"Please enter at least 11 digits",
                maxlength:"Please enter no more than 11 digits",
                digits:"Please enter a valid phone number"
            }
        }
    });
});

以上代码验证了电话号码，只有数字类型且长度为11位的电话号码才会被认为是“有效”的。当用户填写一个无效的电话号码时，例如123456，表单会提示"Please enter at least 11 digits"。