jQuery Validate

id="ccomment" name="comment" required></textarea> </p> <p> <input class="submit" type="submit" value="Submit"> </p> </fieldset></form>

尝试一下 ?

2、将校验规则写到 js 代码中

$().ready(function() {// 在键盘按下并释放及提交后验证提交表单  $("





#signupForm").validate({    rules:





 {      firstname:





 "required",      lastname:





 "required",      username:





 {        required:





 true,        minlength:





 2      },      password:





 {        required:





 true,        minlength:





 5      },      confirm_password:





 {        required:





 true,        minlength:





 5,        equalTo:





 "





#password"      },      email:





 {        required:





 true,        email:





 true      },      topic:





 {        required:





 "





#newsletter:





checked",        minlength:





 2      },      agree:





 "required"    },    messages:





 {      firstname:





 "请输入您的名字",      lastname:





 "请输入您的姓氏",      username:





 {        required:





 "请输入用户名",        minlength:





 "用户名必需由两个字母组成"      },      password:





 {        required:





 "请输入密码",        minlength:





 "密码长度不能小于 5 个字母"      },      confirm_password:





 {        required:





 "请输入密码",        minlength:





 "密码长度不能小于 5 个字母",        equalTo:





 "两次密码输入不一致"      },      email:





 "请输入一个正确的邮箱",      agree:





 "请接受我们的声明",      topic:





 "请选择两个主题"     }    })});

messages 处，如果某个控件没有 message，将调用默认的信息

<form class="cmxform" id="signupForm" method="get" action="">  <fieldset>    <legend>验证完整的表单</legend>    <p>      <label for="firstname">名字</label>      <input id="firstname" name="firstname" type="text">    </p>    <p>      <label for="lastname">姓氏</label>      <input id="lastname" name="lastname" type="text">    </p>    <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="agree">请同意我们的声明</label>      <input type="checkbox" class="checkbox" id="agree" name="agree">    </p>    <p>      <label for="newsletter">我乐意接收新信息</label>      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">    </p>    <fieldset id="newsletter_topics">      <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>      <label for="topic_marketflash">        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Marketflash      </label>      <label for="topic_fuzz">        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz      </label>      <label for="topic_digester">        <input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester      </label>      <label for="topic" class="error">Please select at least two topics you'd like to receive.</label>    </fieldset>    <p>      <input class="submit" type="submit" value="提交">    </p>  </fieldset></form>

尝试一下 ?

required:





true 值是必须的。
required:





"





#aa:





checked" 表达式的值为真，则需要验证。
required:





function(){} 返回为真，表示需要验证。

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

常用方法及注意问题

1、用其他方式替代默认的 SUBMIT

$().ready(function() { $("





#signupForm").validate({        submitHandler:





function(form){            alert("提交事件!");               form.submit();        }        });});

使用 ajax 方式

 $(".selector").validate({      submitHandler:





 function(form)    {            $(form).ajaxSubmit();        }   }) 

可以设置 validate 的默认值，写法如下：

$.validator.setDefaults({  submitHandler:





 function(form) { alert("提交事件!");form.submit(); }});

如果想提交表单, 需要使用 form.submit()，而不要使用 $(form).submit()。

2、debug，只验证不提交表单

如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便。

$().ready(function() { $("





#signupForm").validate({        debug:





true    });});

如果一个页面中有多个表单都想设置成为 debug，则使用：

$.validator.setDefaults({   debug:





 true})

3、ignore：忽略某些元素不验证

ignore:





 ".ignore"

4、更改错误信息显示的位置

errorPlacement：Callback

指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面。

errorPlacement:





 function(error, element) {      error.appendTo(element.parent());  }

实例

<p>将错误信息放在 label 元素后并使用 span 元素包裹它</p><form method="get" class="cmxform" id="form1" action="">  <fieldset>    <legend>Login Form</legend>    <p>      <label for="user">Username</label>      <input id="user" name="user" required minlength="3">    </p>    <p>      <label for="password">Password</label>      <input id="password" type="password" maxlength="12" name="password" required minlength="5">    </p>    <p>      <input class="submit" type="submit" value="Login">    </p>  </fieldset></form>

尝试一下 ?

代码的作用是：一般情况下把错误信息显示在 <td class="status"></td> 中，如果是 radio 则显示在 <td></td> 中，如果是 checkbox 则显示在内容的后面