validate() 表单验证插件的使用

        validate() 是基于 jQuery 的一款表单验证插件，可是对它的具体使用却一直都一知半解，这两天正好遇到表单验证，就重新学习了一下这个插件，有些东西也是参考网友的，希望大家可以一起进步！

        首先，既然是基于 jQuery  的，那么第一步当然是引入 jQuery 库了：

<script type="text/javascript" src="../js/jquery.js"></script>

        

        紧接着，既然 validate()  是一个插件，那么我们也需要引入它的源文件：

<script type="text/javascript" src="../js/jquery.validate.js"></script>

    

        那么，这个插件本身到底是怎样进行验证的呢？这就需要我们了解一下它的默认验证规则：

   

        需要注意的是 equalTo: 后面的值必须要加上引号和#，即必须是“#”格式的。

        规则这么多，我们要根据自己的表单情况合理选择。

         知道了 validate() 的默认验证规则（rules）后，下一步考虑如果验证不通过，那么 validate() 会以什么方式提示我们呢？一起来看看 validate() 的默认提示样式（messages）:

messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date (ISO).",
    dateDE: "Bitte geben Sie ein gültiges Datum ein.",
    number: "Please enter a valid number.",
    numberDE: "Bitte geben Sie eine Nummer ein.",
    digits: "Please enter only digits",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    maxlength: $.validator.format("Please enter no more than {0} characters."),
    minlength: $.validator.format("Please enter at least {0} characters."),
    rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
    range: $.validator.format("Please enter a value between {0} and {1}."),
    max: $.validator.format("Please enter a value less than or equal to {0}."),
    min: $.validator.format("Please enter a value greater than or equal to {0}.")
},

         全是英文，看着是不是有些吃力？没办法，谁让这是人家外国人开发的呢，就是这么任性！但是这也不是什么难题，我们依然可以让它乖乖的用中文提示，只需要在你的 js 代码中加入以下代码即可：

jQuery.extend(jQuery.validator.messages, {
    required: "必选字段",
	remote: "请修正该字段",
	email: "请输入正确格式的电子邮件",
	url: "请输入合法的网址",
	date: "请输入合法的日期",
	dateISO: "请输入合法的日期 (ISO).",
	number: "请输入合法的数字",
	digits: "只能输入整数",
	creditcard: "请输入合法的信用卡号",
	equalTo: "请再次输入相同的值",
	accept: "请输入拥有合法后缀名的字符串",
	maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
	minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
	rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
	range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
	max: jQuery.validator.format("请输入一个最大为{0} 的值"),
	min: jQuery.validator.format("请输入一个最小为{0} 的值")
});

        当然，你也可以更改其中的信息，比如将 required:"必选字段"  改为 required:"此字段不能为空！" ，也是可以的，你可以按照自己的心意来改变这些提示信息。可是，每次都在 js 代码中插入这些验证规则，是不是有些麻烦呢？反正我觉得是。。所以我更倾向于的做法是：将上面这段代码单独放入一个 js 中，命名为 validate_cn.js ,然后在引入 validate() 库时，顺便引入 validate_cn.js ，也向大家推荐这种做法。

        了解了 validate() 的验证规则和提示样式后，我们到底该怎样使用这种插件呢？我一般都是采取将校验规则写入 js 代码中（下文具体介绍）的方式，鉴于个人喜好不同，这里还是依次介绍：

        方式一：将校验规则写到控件中：

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="../js/jquery.metadata.js" type="text/javascript"></script>

$().ready(function() {
 $("#signupForm").validate();
});


<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" class="required" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" class="required email" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" class="{required:true,minlength:5}" />
 </p>
 <p>
  <label for="confirm_password">确认密码</label>
  <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
 </p>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

       

        你注意到了吗？在代码开头我们除了引入 jQuery 库和 validate() 库之外，还引入了一个 metadata.js 的文件，这是因为我们将校验规则写到控件中时使用了 class="{}" 的方式，而使用这种方式，必须引入包：jquery.metadata.js。

        可以使用如下的方法，修改提示内容：

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

          在使用 equalTo 关键字时，后面的内容必须加上引号，代码如下所示：

class="{required:true,minlength:5,equalTo:'#password'}"

           方式二：将验证规则写到 js 代码中：

$().ready(function() {
        $("#signupForm").validate({
 		rules: {
 			firstname: "required