jQuery Validate

it" 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 则显示在内容的后面。参数类型描述默认值errorClassString指定错误提示的 css 类名，可以自定义错误提示的样式。"error"