最近应公司要求做了一个jquery的示例文件，包括：模态窗口怎么实现；jquery validate下的校验；怎么做图片特效；怎么实现异步操作；实现图片上传剪切效果等很多特效； 这里把jquery校验的部分传上来与大家分享，直接复制出来就可以正常使用（没有后台异步校验没有意义，所以未上传，如有需要qq联系） 文中需要用到的jquery validate的文件做校验 有什么不明白的地方可以参考我的博文 jquery校验详解 代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>validateDemo.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- js校验开始 --> <link rel="stylesheet" type="text/css" href="../js/jQuery/validate/validation.css"> <script type="text/javascript" src="../js/jQuery/jquery.js"></script> <script type="text/javascript" src="../js/jQuery/validate/jquery.validate.pack.js"></script> <!--这个文件是通过addmethod新增加了几个方法，不会可以跳过，--> <script type="text/javascript" src="../js/jQuery/validate/additional-methods.js"></script> <!-- 这里可以看到所有的校验规则 --> <script type="text/javascript" src="../js/jQuery/validate/messages_cn.js"></script> <script type="text/javascript" > $(document).ready(function(){ //通过id查找要进行校验的表单 $("#signupForm").validate({ //设置校验触发的时机,默认全是true。不要尝试去设置它为true，可能会有js错误。 //onsubmit:false, //onfocusout:false, //onkeyup:false, //onclick:false, //验证通过后执行的动作 //success:function(label){ // label.text("ok!").addClass("success"); //}, //手动设置错误信息的显示方式 errorPlacement: function(error, element) { error.appendTo(element.parent().next()); // if ( element.is(":radio") ) // error.appendTo( element.siblings("span") ); // else if ( element.is(":checkbox") ){ // error.appendTo ( element.siblings("span") ); // } // else // error.appendTo( element.parent() ); } , rules:{ username:{ required: true, rangelength: [ 5, 7 ] }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, sex: { required: true }, email: { required: true, email: true }, language: { required: true, rangelength:[2,3] }, book: { required: true, rangelength:[2,3] }, agree: "required", upload: { required: true, accept: "flv|jpg" } }, //校验提示信息 messages: { username: { required: "请输入用户名", rangelength: "用户名长度必须为{0}到{1}个字符或汉字" }, password: { required: "请输入密码", minlength: "密码的最小长度是{0}个字符" }, confirm_password: { required: "请输入确认密码", minlength: "确认密码的最小长度是{0}个字符", equalTo: "确认密码与密码不相等" }, email: "请输入正确的邮箱", language: { required: "该项必须填写", rangelength: "请您选择{0}到{1}项语言" }, book: { required: "该项必须选择", rangelength:"请您选择{0}到{1}本书" }, agree: "您没有同意使用协议", upload: { required: "请输入上传文件的路径", accept: "上传文件的格式只能是 flv或jpg" } } }); }) </script> <!-- js校验结束 --> </head> <body style="font-family:'宋体','Arial Narrow'; font-size:12px; "> <!-- 表单校验功能 --> <form class="cmxform" id="signupForm" method="get" action=""> <fieldset > <legend>字段校验、日历控件完整示例</legend> <table> <tr> <td><label for="username">Username</label></td> <td><input id="username" name="username" /></td> <!-- 这里设置的校验信息显示的地方在下一个td中，可以自行修改 --> <td></td> </tr> <tr> <td><label for="password">Password</label></td> <td><input id="password" name="password" type="password" /></td> <td></td> </tr> <tr> <td><label for="confirm_password">Confirm password</label></td> <td><input id="confirm_password" name="confirm_password" type="password" /></td> <td></td> </tr> <tr> <td><label for="sex">sex</label></td> <td><pre><input id="sex1" name="sex" type="radio" />男 <input id="sex2" name="sex" type="radio" />女</pre></td> <td></td> </tr> <tr> <td><label for="email">Email</label></td> <td><input id="email" name="email" /></td> <td></td> </tr> <tr> <td><label for="upload">Upload</label></td> <td><input type="file" name="upload" /></td> <td></td> </tr> <tr> <td><label for="language">language</label></td> <td><input type="checkbox" name="language" value="cn" />汉语 <input type="checkbox" name="language" value="en" />英语 <input type="checkbox" name="language" value="jp" />日语 <input type="checkbox" name="language" value="ge" />德语 </td> <td></td> </tr> <tr> <td><label for="book">book</label></td> <td><select name="book" multiple="multiple" > <option value="en">英语书</option> <option value="cn">汉语书</option> <option value="jp">日语书</option> <option value="ge">德语书</option> </select></td> <td></td> </tr> <tr> <td><label for="agree">同意该协议</label></td> <td><input type="checkbox" class="checkbox" id="agree" name="agree" /> </td> <td></td> </tr> <tr> <td><input class="submit" type="submit" value="Submit" /></td> </tr> </table> </fieldset> </form> <!-- 表单校验结束 --> </body> </html>