Jquery表单验证_.NET_编程开发_程序员俱乐部

jquery.validate下载地址：http://jqueryvalidation.org/validate/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DPlugins%2FValidation%2Fvalidate%26redirect%3Dno

参考文档：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>