<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<script src="../../scripts/jquery.js" type="text/javascript"></script>

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

<style type="text/css">

* { font-family: Verdana; font-size: 96%; }

label { width: 10em; float: left; }

label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }

p { clear: both; }

.submit { margin-left: 12em; }

em { font-weight: bold; padding-right: 1em; vertical-align: top; }

em.error {

  background:url("images/unchecked.gif") no-repeat 0px 0px;

  padding-left: 16px;

}

em.success {

  background:url("images/checked.gif") no-repeat 0px 0px;

  padding-left: 16px;

}

</style>

  <script type="text/javascript">

  $(document).ready(function(){

    $("#commentForm").validate({

        rules: {

            username: {

                required: true,

                minlength: 2

            },

            email: {

                required: true,

                email: true

            },

            url:"url",

            comment: "required"

        },

        messages: {

            username: {

                required: '请输入姓名',

                minlength: '请至少输入两个字符'

            },

            email: {

                required: '请输入电子邮件',

                email: '请检查电子邮件的格式'

            },

            url: '请检查网址的格式',

            comment: '请输入您的评论'

        },    

        errorElement: "em", //可以用其他标签，记住把样式也对应修改

        success: function(label) {

            //label指向上面那个错误提示信息标签em

            label.text(" ")                //清空错误提示消息

                .addClass("success");    //加上自定义的success类

        }

      });

  });

  </script>

</head>

<body>

 <form class="cmxform" id="commentForm" method="get" action="">

 <fieldset>

   <legend>一个简单的验证带验证提示的评论例子</legend>

   <p>

     <label for="cusername">姓名</label>

     <em>*</em><input id="cusername" name="username" size="25" />

   </p>

   <p>

     <label for="cemail">电子邮件</label>

     <em>*</em><input id="cemail" name="email" size="25"  />

   </p>

   <p>

     <label for="curl">网址</label>

     <em>  </em><input id="curl" name="url" size="25"  value="" />

   </p>

   <p>

     <label for="ccomment">你的评论</label>

     <em>*</em><textarea id="ccomment" name="comment" cols="22" rows="2"></textarea>

   </p>

   <p>

     <input class="submit" type="submit" value="提交"/>

   </p>

 </fieldset>

 </form>

</body>

</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. Android-服务中监听电源键和Home键的广播、在锁屏下仍然工作的方法

    Android-服务中监听电源键和Home键的广播  http://blog.csdn.net/u014657752/article/details/49512485 Android开发之如何监听让服 ...

  2. python3.6连接mysql或者mariadb

    python3.6版本的安装查看上一篇文章 mysql或mariadb数据库的安装查看以前的文章,这里不再赘述 首先在mariadb数据库中创建相应的库和表: MariaDB [(none)]> ...

  3. MYSQL数据库里面的所有密码批量MD5加密

    如果你的字段够长度的话:UPDATE users SET password = MD5(password);如果长度不够,可以先增加长度后再做,或者多建一列,完成后删除原来的列!(如passwd)UP ...

  4. 如何为openwrt中的某个模块生成PKG_MIRROR_HASH

    答:介绍两种方法,第一种自动生成(当然使用自动的啦),第二种手动生成 第一种方法: 1.在软件包的Makefile中让此项写成这样PKG_MIRROR_HASH:=skip  (如果不加上skip,那 ...

  5. mysql的空闲8小时问题

    在spring中配置数据源时,必须设定destroy-method="close"属性,以便spring容器关闭时,数据源能正常关闭. 如果数据库时mysql,如果数据源配置不当, ...

  6. spark SQL学习（案例-统计每日uv）

    需求:统计每日uv package wujiadong_sparkSQL import org.apache.spark.sql.{Row, SQLContext} import org.apache ...

  7. MySQL-性能优化-优化设计和设计原则

    MySQL性能优化目的如何合理的设计数据库?什么样的数据库设计才能给后期DBA优化提供基石? 数据库设计与程序设计的差异? 数据库设计早期优化1. 关系明确(理清表之间的关系,可以通过冗余的方式提高效 ...

  8. Python基础笔记系列十三：socket网络编程

    本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!!使用python编写一个简易的服务端程序和客户端程序,启动服务端和客户端(监 ...

  9. monkey测试小记

    本篇中不记录环境搭建,只是介绍一些经验和小秘诀吧. 一.使用安卓模拟器进行测试. 在刚刚接触到monkey测试的时候,用的真机进行测试,点击几万次甚至更多的时候,发现系统变慢了.也许是错觉,但是系统经 ...

  10. emmet常用指令组合

    emmet的应用   1.生成html(需要先将文件命名为.html后缀) !+tab,html:5+tab   2.生成meta utf meta:utf+tab   3.生成meta viewpo ...