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.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 { width: 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.  <form class="cmxform" id="commentForm" method="get" action="">
  72.  <fieldset>
  73.    <legend>一个简单的验证带验证提示的评论例子</legend>
  74.    <p>
  75.      <label for="cusername">姓名</label>
  76.      <em>*</em><input id="cusername" name="username" size="25" />
  77.    </p>
  78.    <p>
  79.      <label for="cemail">电子邮件</label>
  80.      <em>*</em><input id="cemail" name="email" size="25"  />
  81.    </p>
  82.    <p>
  83.      <label for="curl">网址</label>
  84.      <em>  </em><input id="curl" name="url" size="25"  value="" />
  85.    </p>
  86.    <p>
  87.      <label for="ccomment">你的评论</label>
  88.      <em>*</em><textarea id="ccomment" name="comment" cols="22" rows="2"></textarea>
  89.    </p>
  90.    <p>
  91.      <input class="submit" type="submit" value="提交"/>
  92.    </p>
  93.  </fieldset>
  94.  </form>
  95. </body>
  96. </html>

Jquery validation自定义验证的更多相关文章

  1. jquery validate 自定义验证方法

    query validate有很多验证规则,但是更多的时候,需要根据特定的情况进行自定义验证规则. 这里就来聊一聊jquery validate的自定义验证. jquery validate有一个方法 ...

  2. jquery validate 自定义验证方法 日期验证

    jquery validate有很多验证规则,但是更多的时候,需要根据特定的情况进行自定义验证规则. 这里就来聊一聊jquery validate的自定义验证. jquery validate有一个方 ...

  3. jQuery Validation让验证变得如此容易(三)

    以下代码进行对jQuery Validation的简单演示包括必填项.字符长度,格式验证 一.引入文件 <script src="js/jquery-1.8.0.min.js" ...

  4. jQuery Validation让验证变得如此easy(三)

    下面代码进行对jQuery Validation的简单演示包含必填项.字符长度,格式验证 一.引入文件 <script src="js/jquery-1.8.0.min.js" ...

  5. Jquery Validate自定义验证规则，一个汉字等于两个字符长度

    使用Jquery validate时写的一些东西,在这里做个笔记 在使用 Jquery validate 的minlength和maxlength进行文本框内容长度验证的时候,对于一个汉字的长度检测结 ...

  6. jQuery Validation让验证变得如此easy(一)

    一.官网下载jquery,和jquery validation plugin http://jqueryvalidation.org/ 二.引入文件 <script src="js/j ...

  7. jQuery Validation让验证变得如此容易(一)

    一.官网下载jquery,和jquery validation plugin http://jqueryvalidation.org/ 二.引入文件 <script src="js/j ...

  8. 扩展jquery.validate自定义验证，自定义提示，本地化

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  9. jquery.validate自定义验证--成功提示与择要提示

    1. 自定义验证--成功提示 1) 添加选项 errorClass: "unchecked", validClass: "checked", errorElem ...

随机推荐

  1. Unity本地数据存储---Sqlite和JSON

    2014-05-04更新 SqliteDatabase.cs这个文件的初始方法有问题,具体是如果指定URL已经存在了DB文件,就不会重新覆盖DB文件. 这导致我们修改之后的DB文件无法产生效果. 本人 ...

  2. iOS 截屏，openGL ES 截图，以及像素颜色判断

    代码整理了2种截图,类似.(没苹果自带那种截图彻底) 方法一: +(UIImage *)fullScreenshots{ UIWindow *screenWindow = [[UIApplicatio ...

  3. 微信开放平台--》网站应用开发 微信登录网站接口（https://open.weixin.qq.com/）

    地址:https://open.weixin.qq.com/ 手册:https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&am ...

  4. Linux学习笔记之阿里云ECS部署LAMP环境

    LAMP指Linux+Apache+MySQL/MariaDB+Perl/PHP/Python,是一组常用来搭建动态网站或者服务器的开源软件.它们本身都是各自独立的程序,但是因为常被放在一起使用,拥有 ...

  5. Promise原理剖析

    传统的异步回调编程最大的缺陷是:回调地狱,由于业务逻辑非常复杂,代码串行请求好几层:并行请求以前也要通过引用step.async库实现.现在ES6推出了Promise,通过Promise的链式调用可以 ...

  6. hive + hadoop 环境搭建

    机器规划: 主机 ip 进程 hadoop1 10.183.225.158 hive server hadoop2 10.183.225.166 hive client 前置条建: kerberos部 ...

  7. C++实现最基本的LRUCache服务器缓存

    目录: 一.介绍: 二.数据结构: 三.主要的两个函数接口Put()和Get(): 四.C++代码实现: 后台开发必备知识,不过我不是搞这个的,只是因为很久以前就想写这些东西,事情多,拖到现在.写的过 ...

  8. 组合优于继承 Composition over inheritance

    https://stackoverflow.com/questions/49002/prefer-composition-over-inheritance 解答1 Prefer composition ...

  9. 【Semantic segmentation】Fully Convolutional Networks for Semantic Segmentation 论文解析

    目录 0. 论文链接 1. 概述 2. Adapting classifiers for dense prediction 3. upsampling 3.1 Shift-and-stitch 3.2 ...

  10. Codeforces Round #361 (Div. 2) E. Mike and Geometry Problem 离散化+逆元

    E. Mike and Geometry Problem time limit per test 3 seconds memory limit per test 256 megabytes input ...