jQuery validate 表单验证，涵盖各种类型数据
本来觉得用这个会很难，结果试了试，发现却是简单了不少东西啊，什么getElementById，if 什么的，只用几个属性名 什么的就可以解决不同状态显示不同提示，很强大很方便。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/common/common.jsp"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="${ctx }"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jQuery/jquery-1.2.6.js"></script> <script type="text/javascript" src="jQuery/jquery.validate.min.js"></script> <style type="text/css"> body { font-size:12px; } /* form中显示文字的label */ .slabel { width:100px; display: -moz-inline-box; line-height: 1.8; display: inline-block; text-align:right; } /* 出错样式 */ input.error, textarea.error { border: solid 1px #CD0A0A; } label.error { color:#CD0A0A; margin-left:5px; } /* 深红色文字 */ .textred { color:#CD0A0A; } </style> <script type="text/javascript"> </script> </head> <body> <form id="commentForm" method="get" action=""> <fieldset style="width:500px;"><legend>表单验证</legend> <div id="messageBox"></div> <!-- 此容器用于汇总显示错误信息 --> <p><label for="cname" class="slabel"><em class="textred">*</em> 姓名:</label> <input id="cname" name="name" class="required" minlength="2" maxlength="5" /> </p> <p><label for="cemail" class="slabel"><em class="textred">*</em> E-Mail:</label> <input id="cemail" name="email" /> </p> <p><label for="curl" class="slabel">年龄:</label> <input id="age" name="age" class="required" value="" /> </p> <p><label for="curl" class="slabel">密码:</label> <input type="password" id="pwd1" name="pwd1" minlength="6" maxlength="16" class="required" /> </p> <p><label for="curl" class="slabel">确认密码:</label> <input type="password" id="pwd2" name="pwd2" class="required" equalTo="#pwd1" /> </p> <p style="text-align:center;"> <input class="submit" type="submit" value="提交" /> </p> </fieldset> </form> <script type="text/javascript"> $("#commentForm").validate({ errorClass: "error", submitHandler: function(form) { //如果想提交表单, 需要使用form.submit()而不要使用$(form).submit() alert("submitted!"); }, rules: {//为控件添加两个验证方法 name: { required: true, minlength: 2 }, email: { required: true, email: true }, age:{required: true, number: true, min:18}, pwd1:{required: true, minlength: 6 }, pwd2:{required: true, equalTo: "#pwd1" } }, messages: {//为验证方法设置验证失败的消息内容 name: {required:"需要输入姓名", minlength:"字符长度不能小于{0}个字符"}, email: {required:"需要输入电子邮箱", email:"电子邮箱格式不正确"}, age:{required:"必须填写", number:"请输入数字",min:jQuery.format("必须年满{0}.")}, pwd1:{ required: "请填写密码",minlength: "字符长度不能小于{0}个字符" }, pwd2:{required: "请再次输入密码", equalTo: "密码不一致" } }, }); </script> </body> </html>
不过像时间类型的我没有写，因为现在大多数，都用的一些时间空间什么的，我想格式上不会有错误，就只用 required 这个属性，确定下是否为空就好了。而且 numbe 这个属性也很强大，输入浮点型的依然可以，当然，有时候要求必须输入整形，就用 digits 代替 numbe 吧。还有什么样的值要进行判定，可参考下列校验规则：
默认校验规则 (1)required:true 必输字段 (2)remote:"check.php" 使用ajax方法调用check.php验证输入值 (3)email:true 必须输入正确格式的电子邮件 (4)url:true 必须输入正确格式的网址 (5)date:true 必须输入正确格式的日期 (6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性 (7)number:true 必须输入合法的数字(负数，小数) (8)digits:true 必须输入整数 (9)creditcard: 必须输入合法的信用卡号 (10)equalTo:"#field" 输入值必须和#field相同 (11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀） (12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符) (13)minlength:10 输入长度最小是10的字符串(汉字算一个字符) (14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) (15)range:[5,10] 输入值必须介于 5 和 10 之间 (16)max:5 输入值不能大于5 (17)min:10 输入值不能小于10
validate.min.js 的下载地址！
https://files.cnblogs.com/pengain/jquery.validate.min.js
