<!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. FS-LDM 十大主题

    英文名称 中文名称 概念定义 Party 当事人 指银行所服务的任意对象和感兴趣进行分析的各种对象.如个人或公司客户.潜在客户.代理机构.雇员.分行.部门等. Internal Org 内部组织 可能 ...

  2. Linux centos7安装Mongodb

    Linux centos7安装Mongodb-4.0 1.下载 官方下载地址:https://www.mongodb.com/download-center/community 2.上传解压 1)rz ...

  3. linux卸载mysql

    第二.停止MYSQL运行以及卸载老版本 service mysqld stop #暂停MYSQL yum remove mysql mysql-*  #卸载老版本MYSQL 通过上面的命令,我们先停止 ...

  4. Java学习第三周摘要

    20145307<Java程序设计>第三周学习总结 教材学习内容总结 认识对象 类类型 Java可区分为基本类型和类类型两大类型系统,其中类类型也称为参考类型.sun就是一个类类型变量,类 ...

  5. linux及安全第三周总结——20135227黄晓妍

    总结部分: Linux内核源代码: Arch 支持不同cpu的源代码:主要关注x86 Init   内核启动的相关代码:主要关注main.c,整个Linux内核启动代码start_kernel函数 K ...

  6. mongodb入门很简单（1）

    mongodb简介: 如前边介绍的两个键-值数据库: memcached和redis属于(key/value)数据库: 而mongodb是文档数据库:存储的是文档(Bson->json的二进制) ...

  7. linux信号的介绍

    1.基本概念    中断:        中断是系统对于异步事件的响应        中断信号        中断源        现场信息        中断处理程序        中断向量表   ...

  8. z-albert之开启博文之路

    其实注册博客园已经蛮久的了,一直都只是停留在看,却没有自己动手一篇属于自己的技术博文.之所以以前一直没写,以前没有工作,一直都是小白.然而今天为什么感写了呢,并不是自己比以前懂得多多少,而是希望将自己 ...

  9. ubuntu下wget的配置文件在哪里

    答:/etc/wgetrc 这个文件里可以指定代理,如: http_proxy = http://myproxy.com:8080

  10. Spring Boot 中yml配置文件

    步骤一:yml格式 现在大家发现,在springboot里还是要用到配置文件的. 除了使用.properties外,springboot还支持 yml格式. 个人觉得yml格式的可读性和..prope ...