zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    每日总结2021.9.14
    jar包下载mvn
    每日总结EL表达语言 JSTL标签
    每日学习总结之数据中台概述
    Server Tomcat v9.0 Server at localhost failed to start
    Server Tomcat v9.0 Server at localhost failed to start(2)
    链表 java
    MVC 中用JS跳转窗体Window.Location.href
    Oracle 关键字
    MVC 配置路由 反复走控制其中的action (int?)
  • 原文地址:https://www.cnblogs.com/Mryjp/p/3217184.html
Copyright © 2011-2022 走看看