一、下载依赖包

网盘下载：https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224

二、引入依赖包

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

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

三、添加错误样式

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;

}

四、自定义提示信息

  messages: {

            username: {

                required: '请输入姓名',

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

            },

            email: {

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

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

            },

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

            comment: '请输入您的评论'

        },

五、调用错误样式，或是成功样式。

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

        success: function(label) {

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

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

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

        }

六、详细的代码

jQuery表单验证插件----自定义校验结果样式

<!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>jQuery表单验证插件----自定义错误样式</title>

 <script src="../../scripts/jquery-1.3.1.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>jQuery表单验证插件----自定义校验结果样式</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 Validate 表单验证插件----自定义校验结果样式的更多相关文章

  1. jQuery Validate 表单验证插件----自定义一个验证方法

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

  2. Jquery Validate表单验证，自定义校验正整数

    // 添加自定义校验规则,校验正整数 jQuery.validator.addMethod("positiveinteger", function(value, element) ...

  3. jQuery Validate 表单验证插件----通过name属性来关联字段来验证，改变默认的提示信息，将校验规则写到 js 代码中

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...

  4. jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...

  5. jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验

    一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...

  6. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  7. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  8. jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址

     一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...

  9. jquery validate表单验证插件的基本使用方法及功能拓展

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.    1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提 ...

随机推荐

  1. Web 前端性能优化准则

    准则01:尽量减少http请求 “只有10%-20%的最终用户响应时间花在接收请求的HTML文档上,剩下的80%-90%时间花在HTML文档所引用的所有组件(图片,script,css,flash等等 ...

  2. office2016 软件全集 官方下载免费完整版(含破解文件)不含垃圾软件 win10完美激活

    office2016官方下载免费完整版是新一代办公软件,office2016官方下载免费完整版已经分享到下面,office2016官方下载免费完整版包括了Word.Excel.PowerPoint.O ...

  3. Memcached入门

    Memcached是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载. 它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提供动态.数据库驱动网站的速度. Memcache ...

  4. Array(数组)与Json String (Json字符串) 的相互转换

    1.Array转换成Json String             function jsonToString(arr) {             var s = "";     ...

  5. php中设定一个全局异常处理。全局catch。默认catch。默认异常处理

    <?php function handleMissedException($e) { echo "Sorry, something is wrong. Please try again ...

  6. [Architecture Design] CLK Architecture

    CLK.Prototype.Architecture 最近找数据,看到了博客园在不久之前,办了一个架构分享的活动:.Net项目分层与文件夹结构大全.看完之后觉得获益良多,接着也忍不住手痒,开始整理属于 ...

  7. java微信开发（wechat4j）——access_token中控服务器实现

    access_token是与微信服务器交互过程中的一个凭证,每次客户服务器主动与微信服务器通信都需要带上access_token以确认自己的身份.wechat4j内部封装了对access_token的 ...

  8. Ansible用于网络设备管理 part 1 Jinja2 YAML初窥

    这一次的实验内容依然来自Kirk Byers的博客,源地址在https://pynet.twb-tech.com/blog/python/paramiko-ssh-part1.html 但是,这次实验 ...

  9. jQuery corner 圆角插件

    jquery.corner是一款强大的圆角插件(所产生的不止只是圆角效果),兼容包括IE6.IE7.IE8.firefox.Opera .Safari.Chrome等主流浏览器,唯一的缺点是为了产生边 ...

  10. 说反话（c++实现）

    描述:给定一句英语,要求你编写程序,将句中所有单词的顺序颠倒输出. 输入:测试输入包含一个测试用例,在一行内给出总长度不超过80的字符串.字符串由若干单词和若干空格组成,其中单词是由英文字母(大小写有 ...