jQuery.Validate验证库的使用介绍

jQuery.Validate验证库
1、下载jquery.validate，这里我提供jquery-validation-1.9.0，点击下载

默认校验规则

<script>
$().ready(function() {
  $("#signupForm").validate();
});
</script>

<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>

使用class="{}"的方式，必须引入包：jquery.metadata.js

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

例如，将上面示例中的代码改为关键字meta形式，代码如下：

<script>
$().ready(function() {
  $("#signupForm").validate({meta: "validate"});
});
</script>

<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
    <input id="firstname" name="firstname" class="{validate:{required:true,minlength:5,messages:{required:'请输入内容',minlength:'字符串长度不能小于5'}}}" />
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" class="{validate:{required:true, email:true}}" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" class="{validate:{required:true,minlength:5}}" />
 </p>
 <p>
  <label for="confirm_password">确认密码</label>
  <input id="confirm_password" name="confirm_password" type="password" class="{validate:{required:true,minlength:5,equalTo:'#password'}}" />
 </p>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

注意：

规则部分应用完整形式，如下所示：

正确写法：

例如，将上面示例代码改为：

<script>
$().ready(function() {
  $.metadata.setType("attr", "validate");
  $("#signupForm").validate();
});
</script>

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

注意：规则部分应用完整形式，即

正确写法：

required:"#aa:checked"id名称为aa的dom被选中时，则需要验证

required:function(){} 返回为真，表示需要验证（仅针对required有效，其它无效。）

后边两种常用于，表单中需要同时填或不填的元素

下面针对上面三项内容，通过实例来说明一下，更易于理解。（第一个说明：required:true 必须有值 这项就不在举例了，通过上面的示例，已经非常清楚。）

required:"#aa:checked" 的示例如下：

required:function(){}的示例如下：

定义样式代码

如下图所示：