zoukankan      html  css  js  c++  java
  • jquery validate使用

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html>
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title></title>
     6  <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
     7  <script src="lib/jquery.validate.js" type="text/javascript"></script>
     8 <style type="text/css">
     9 * { font-family: Verdana; font-size: 96%; }
    10 label {  10em; float: left; }
    11 label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
    12 p { clear: both; }
    13 .submit { margin-left: 12em; }
    14 
    15 em { font-weight: bold; padding-right: 1em; vertical-align: top; }
    16 em.error {
    17   background:url("images/unchecked.gif") no-repeat 0px 0px;
    18   padding-left: 16px;
    19 }
    20 em.success {
    21   background:url("images/checked.gif") no-repeat 0px 0px;
    22   padding-left: 16px;
    23 }
    24 
    25 </style>
    26   <script type="text/javascript">
    27   $(document).ready(function(){
    28 
    29     $("#commentForm").validate({
    30         rules: {
    31             username: {
    32                 required: true,
    33                 minlength: 2
    34             },
    35             email: {
    36                 required: true,
    37                 email: true
    38             },
    39             url:"url",
    40             comment: "required"
    41         },
    42         
    43         messages: {
    44             username: {
    45                 required: '请输入姓名',
    46                 minlength: '请至少输入两个字符'
    47             },
    48             email: {
    49                 required: '请输入电子邮件',
    50                 email: '请检查电子邮件的格式'
    51             },
    52             url: '请检查网址的格式',
    53             comment: '请输入您的评论'
    54         },    
    55         
    56         errorElement: "em", //可以用其他标签,记住把样式也对应修改
    57         success: function(label) {
    58             //label指向上面那个错误提示信息标签em
    59             label.text(" ")                //清空错误提示消息
    60                 .addClass("success");    //加上自定义的success类
    61         }
    62 
    63       });
    64 
    65   });
    66   </script>
    67   
    68 </head>
    69 <body>
    70   
    71 
    72  <form class="cmxform" id="commentForm" method="get" action="">
    73  <fieldset>
    74    <legend>一个简单的验证带验证提示的评论例子</legend>
    75    <p>
    76      <label for="cusername">姓名</label>
    77      <em>*</em><input id="cusername" name="username" size="25" />
    78    </p>
    79    <p>
    80      <label for="cemail">电子邮件</label>
    81      <em>*</em><input id="cemail" name="email" size="25"  />
    82    </p>
    83    <p>
    84      <label for="curl">网址</label>
    85      <em>  </em><input id="curl" name="url" size="25"  value="" />
    86    </p>
    87    <p>
    88      <label for="ccomment">你的评论</label>
    89      <em>*</em><textarea id="ccomment" name="comment" cols="22" rows="2"></textarea>
    90    </p>
    91    <p>
    92      <input class="submit" type="submit" value="提交"/>
    93    </p>
    94  </fieldset>
    95  </form>
    96 </body>
    97 </html>

    效果图:

      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2 <html>
      3 <head>
      4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      5 <title></title>
      6  <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
      7  <script src="lib/jquery.validate.js" type="text/javascript"></script>
      8 <style type="text/css">
      9 * { font-family: Verdana; font-size: 96%; }
     10 label {  10em; float: left; }
     11 label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
     12 p { clear: both; }
     13 .submit { margin-left: 12em; }
     14 
     15 em { font-weight: bold; padding-right: 1em; vertical-align: top; }
     16 em.error {
     17   background:url("images/unchecked.gif") no-repeat 0px 0px;
     18   padding-left: 16px;
     19 }
     20 em.success {
     21   background:url("images/checked.gif") no-repeat 0px 0px;
     22   padding-left: 16px;
     23 }
     24 
     25 </style>
     26   <script type="text/javascript">
     27   $(document).ready(function(){
     28 
     29     //自定义一个验证方法
     30     $.validator.addMethod(
     31         "formula", //验证方法名称
     32         function(value, element, param) {//验证规则
     33             return value == eval(param);
     34         }, 
     35     '请正确输入数学公式计算后的结果'//验证提示信息
     36     );
     37 
     38     $("#commentForm").validate({
     39         rules: {
     40             username: {
     41                 required: true,
     42                 minlength: 2
     43             },
     44             email: {
     45                 required: true,
     46                 email: true
     47             },
     48             url:"url",
     49             comment: "required",
     50             valcode: {
     51                 formula: "7+9"    
     52             }
     53         },
     54         
     55         messages: {
     56             username: {
     57                 required: '请输入姓名',
     58                 minlength: '请至少输入两个字符'
     59             },
     60             email: {
     61                 required: '请输入电子邮件',
     62                 email: '请检查电子邮件的格式'
     63             },
     64             url: '请检查网址的格式',
     65             comment: '请输入您的评论'
     66         },    
     67         
     68         errorElement: "em",                //用来创建错误提示信息标签
     69         success: function(label) {            //验证成功后的执行的回调函数
     70             //label指向上面那个错误提示信息标签em
     71             label.text(" ")                //清空错误提示消息
     72                 .addClass("success");    //加上自定义的success类
     73         }
     74 
     75 
     76       });
     77 
     78   });
     79   </script>
     80   
     81 </head>
     82 <body>
     83   
     84 
     85  <form class="cmxform" id="commentForm" method="get" action="">
     86  <fieldset>
     87    <legend>一个简单的验证带验证提示的评论例子</legend>
     88    <p>
     89      <label for="cusername">姓名</label>
     90      <em>*</em><input id="cusername" name="username" size="25" />
     91    </p>
     92    <p>
     93      <label for="cemail">电子邮件</label>
     94      <em>*</em><input id="cemail" name="email" size="25"  />
     95    </p>
     96    <p>
     97      <label for="curl">网址</label>
     98      <em>  </em><input id="curl" name="url" size="25"  value="" />
     99    </p>
    100    <p>
    101      <label for="ccomment">你的评论</label>
    102      <em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>
    103    </p>
    104    <p>
    105      <label for="cvalcode">验证码</label>
    106      <input id="cvalcode" name="valcode" size="25"  value="" />=7+9
    107    </p>
    108    <p>
    109      <input class="submit" type="submit" value="提交"/>
    110    </p>
    111  </fieldset>
    112  </form>
    113 </body>
    114 </html>

    效果图:

  • 相关阅读:
    UVa 1354 天平难题 (枚举二叉树)
    广西邀请赛总结
    UVa 12118 检查员的难题 (dfs判连通, 构造欧拉通路)
    UVA
    Uva 127 "Accordian" Patience (模拟)
    UVA 10539 Almost Prime Numbers( 素数因子)
    HDU 1272 小希的迷宫(并查集)
    HDU 1213 How Many Tables (并查集)
    POJ 2236 Wireless Network(并查集)
    HDU 1233 还是畅通工程 ( Kruskal或Prim)
  • 原文地址:https://www.cnblogs.com/a757956132/p/5000699.html
Copyright © 2011-2022 走看看