jquery 验证非常简单，下面总结常用的三种方式：
第一种方式：也是比较标准的方式：
首先引入jquery 插件和 jquery 验证插件：
第一步：引入插件
复制代码 代码如下:
<script type="text/javascript" src="https://www.jb51.net/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/jquery.validate.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/jquery.metadata.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/messages_zh.js"></script>
第二步： 定义表单的错误输出：
复制代码 代码如下:
<style type="text/css">
#frm label.error {
color: Red;
}
</style>
第三步：添加错误处理方法；
jquery验证，需要有：
1：定义验证方法
2：添加验证规则
下面贴出常用的验证小例子，一看就明白了。
先看效果图：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery.validate.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery.metadata.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/messages_zh.js"></script> <style type="text/css"> #frm label.error { color: Red; } </style> </head> <script type="text/javascript"> $(document).ready(function(){ $("#clickme").click(function(){ alert("Hello World"); }); $( "#frm" ).validate({ rules: { username: { required: true, minlength: 4, maxlength: 20, byteMaxLength:20, valiEnglish:true }, postcode: { postcodeVal:true }, number: { byteMaxLength:5, numFormat:5 }, identifier: { sfzhValidate:true } }, messages: { username: { required: "请输入用户名4--20个英文字符", minlength: $.format("Keep typing, at least {0} characters required!"), maxlength: $.format("Whoa! Maximum {0} characters allowed!") }, number: { numFormat: $.format("请输入{0}数字") } } }); jQuery.validator.addMethod("byteMaxLength", function(value, element, param) { var length = value.length; for ( var i = 0; i < value.length; i++) { if (value.charCodeAt(i) > 127) { length++; } } return this.optional(element) || (length <= param); }, $.validator.format("不能超过{0}个字节(一个中文字算2个字节)")); jQuery.validator.addMethod("numFormat",function(value,element,param){ return this.optional(element) || /^\d*$/.test(value); } //,$.validator.format("请输入数字{0}位以内") ); //number(9,3) jQuery.validator.addMethod("numFormat63",function(value,element){ return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value); },$.validator.format("请输入合法数字,精度格式123456.0") ); jQuery.validator.addMethod("postcodeVal",function(value,element){ return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value); },$.validator.format("请输入合法的邮编") ); jQuery.validator.addMethod("numberAndLettersVal",function(value,element){ return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value); },$.validator.format("请输入字母或数字") ); jQuery.validator.addMethod("sfzhValidate",function(value,element){ return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value); },$.validator.format("请输入合法身份证号") ); jQuery.validator.addMethod("valiEnglish",function(value,element){ return this.optional(element) || /^[a-zA-Z ]*$/.test(value); },$.validator.format("请输入字母或者空格") ); }); </script> <body> <form method="post" action=""><label>用 户 名: <input type="text" /> </label> <p> <label>邮 编 :<label></label></label> <label> <input type="text" /> <br /> </label> </p> <p><label>数 字 : <input type="text" /> </label> <br /><label>身份证号： <input type="text" /> </label> <label> <input type="button" value="click me" /> </label> </p> </form> </body> </html>
这是一个完整的验证示例，关于引入的代码已经上传，可以点击下载
下面讲解其中的重点方法：