<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="../js/jquery.js"></script> <script src="../js/jquery.validate.js"></script> <script src="../js/messages_cn.js"></script> </head> <body> <form class="cmxform" id="signupForm" method="get" action=""> <fieldset> <legend>验证表单-输入框、单选、多选、下拉框</legend> <p><label>简介</label><input id="" name="jianjie" type="text"></p> <p><label>用户名</label><input id="username" name="username" type="text"></p> <p><label>密码</label><input id="password" name="password" type="password"></p> <p><label>验证密码</label><input id="confirm_password" name="confirm_password" type="password"></p> <p><label>Email</label><input id="email" name="email"></p> <p> <label>我同意</label><input type="radio" class="radio" name="agree" checked = "checked"><label>我不同意</label><input type="radio" class="radio" name="agree"> <label for="agree" style="display: none;" class="error">请选择同意还是不同意</label> </p> <p> <label>下拉框</label> <select name="carlist"> <option value="" selected="selected">----请选择----</option> <option value="volvo">香蕉</option> <option value="saab">苹果</option> <option value="opel">菠萝</option> </select> </p> <fieldset id="newsletter_topics"> <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" style="display: none;">请选择两个主题</label> </fieldset> <p><input class="submit" type="submit" value="提交"></p> </fieldset> </form> <script type="text/javascript"> $().ready(function() { // 在键盘按下并释放及提交后验证提交表单 $("#signupForm").validate({ rules: { jianjie: { regex: "/^[a-zA-Z]{1,30}$/" }, username: { required: true, regex: "/^[0-9]{1,20}$/" }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true }, agree: "required", carlist:"required", topic: { required: true, minlength: 2 } }, messages: { jianjie: { regex: " <font color='#FF0000' size='1'>英文开头---</font>" }, username: { required: " <font color='#FF0000' size='1'>请输入用户名</font>", minlength: "用户名必需由两个字母组成", regex: "长度5到10" }, password: { required: "请输入密码", minlength: "密码长度不能小于 5 个字母" }, confirm_password: { required: "请输入密码", minlength: "密码长度不能小于 5 个字母", equalTo: "两次密码输入不一致" }, email: "请输入一个正确的邮箱", agree: "****特殊：见上面lable标签中的值******", carlist:"请选择一个下拉值", topic: "****特殊：见上面lable标签中的值******" }, submitHandler:function(form){ alert("submitted222222222222222"); form.submit(); } }); //regex提供正则表达式校验，可以写多个，自己添加即可 jQuery.validator.addMethod("regex",function(value, element, param){ var str = param.replace(////g,"/"); var re = eval(str); //转成正则 if(re.test(value)){ return true; }else{ return false; } }); }); </script> </body> </html>