Jquery表单验证

下载： jquery.validate.js.7z

参考文档：jquery.validate例实.chm.7z

常见验证：

required:true	必输字段
remote:"check.php"	使用ajax方法调用check.php验证输入值
email:true	必须输入正确格式的电子邮件
url:true	必须输入正确格式的网址
date:true	必须输入正确格式的日期 日期校验ie6出错，慎用
dateISO:true	必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
number:true	必须输入合法的数字(负数，小数)
digits:true	必须输入整数
creditcard:	必须输入合法的信用卡号
equalTo:"#field"	输入值必须和#field相同
accept:	输入拥有合法后缀名的字符串（上传文件的后缀）
maxlength:5	输入长度最多是5的字符串(汉字算一个字符)
minlength:10	输入长度最小是10的字符串(汉字算一个字符)
rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10]	输入值必须介于 5 和 10 之间
max:5	输入值不能大于5
min:3	输入值不能小于3

使用简单示例：

 1 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

 2         <script src="Scripts/jquery.validate.js" type="text/javascript"></script>

 3         <style type="text/css">

 4             .error {

 5                 color: Red;

 6             }

 7             .valid {

 8                 color: Green;

 9             }

10         </style>

11         <script type="text/javascript">

12             $(function () {

13               var validate=  $('#formHospital').validate({

14                     rules: {

15                         hp_name: "required",

16                         hp_merit: { maxlength: 500 },

17                         hp_lng: {

18                             required: true,

19                             range: [0, 180]

20                         },

21                         hp_lat: { required: true,

22                             range: [0, 90]

23                         },

24                         hp_note: { maxlength: 200 }

25                     }, messages: {

26                         hp_name: "机构名称不能为空！",

27                         hp_merit: "不能超出最大长度500字符！",

28                         hp_lng: {

29                             required: "经度不能为空！",

30                             range: "经度范围在0-180之间！"

31                         },

32                         hp_lat: {

33                             required: "纬度不能为空！",

34                             range: "纬度范围在0-90之间！"

35                         },

36                         hp_note: "不能超出最大长度200字符！"

37                     },

38                     highlight: function (element, errorClass) {  //针对验证的表单设置高亮 

39                         $(element).addClass(errorClass);

40                     },

41                     success: function (label) {//验证成功显示OK

42                         label.addClass("valid").text("Ok!")

43                     }

44                 });

45                 $('#btn_submit').click(function () {

46                     if (validate.form()) {

47                         $('#formHospital').submit();

48                     }

49                 });

50 

51             })

52         </script>

 1    <form id="formHospital" action="Handler/AddHospitalInfoHandler.ashx" method="post">

 2         <table style="padding-left: 200px">

 3             <tr>

 4                 <td>

 5                     名称简介

 6                 </td>

 7                 <td>

 8                     <ul style="list-style: none; text-align: left; font-family: 微软雅黑; font-size: small">

 9                         <li>机构名称<br />

10                             <input type="text" name="hp_name" /></li>

11                         <li>特色(最多输入500字符)<br />

12                             <textarea name="hp_merit" cols="50" rows="5"></textarea>

13                         </li>

14                     </ul>

15                 </td>

16             </tr>

17             <tr>

18                 <td>

19                     地址坐标

20                 </td>

21                 <td>

22                     <ul style="list-style: none; text-align: left; font-family: 微软雅黑; font-size: small">

23                         <li>地址<br />

24                             <input type="text" name="hp_address" /></li>

25                         <li>经度<br />

26                             <input type="text" name="hp_lng" />

27                         </li>

28                         <li>维度<br />

29                             <input type="text" name="hp_lat" />

30                         </li>

31                     </ul>

32                 </td>

33             </tr>

34             <tr>

35                 <td>

36                     其他介绍

37                 </td>

38                 <td>

39                     <ul style="list-style: none; text-align: left; font-family: 微软雅黑; font-size: small">

40                         <li>备注信息(最多输入200字符)<br />

41                             <textarea name="hp_note" cols="50" rows="4" onblur="validateContext(this,200,'备注')"></textarea></li>

42                     </ul>

43                 </td>

44             </tr>

45             <tr>

46                 <td colspan="2">

47                     <input id="btn_submit" type="button" value="提交数据" />

48                     <input id="btn_clear" type="button" value="重置" onclick="$('ul li input,textarea').val('')" />

49                 </td>

50             </tr>

51         </table>

52         </form>