<!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. Hibernate与autoCommit

    JDBC 的autoCommit属性 对于每一个 JDBC connection,都有一个autoCommit属性,只有执行commit后,该connection中的操作(statement操作)才会 ...

  2. rootpw密码生成方法/c-exit

    linux kickstart文件里rootpw密码可以使用明文,也可以使用加密过的值,这里主要介绍下三种加密方法:md5.sha256.sha512 使用明文的方法 rootpw "pas ...

  3. 【c++ primer, 5e】函数声明 & 分离式编译

    p186~p188: 函数声明1.函数只能定义一次,但是可以声明多次. 2.函数的接口:返回类型 + 函数名 + 形参类型 3.为什么要在头文件中进行函数声明???在源文件中定义?暂时理解到,这么做可 ...

  4. maven-surefire-plugin

    本文参考自:https://www.cnblogs.com/qyf404/p/5013694.html surefire是maven里执行测试用例(包括testNG,Junit,pojo)的插件,他能 ...

  5. 关于office word 应用程序下载配置

    Retrieving the COM class factory for component with CLSID {000209FF-0000-0000-C000-000000000046} fai ...

  6. 手动装配Bean

    代码: import org.springframework.context.ApplicationContext; import org.springframework.context.suppor ...

  7. java quartz

     什么是Quartz Quartz是一个完全由Java编写的开源作业调度框架,为在Java应用程序中进行作业调度提供了简单却强大的机制.Quartz允许开发人员根据时间间隔来调度作业.它实现了作业和触 ...

  8. Spring Boot CRUD+分页（基于Mybatis注解方式）

    步骤一:关于Mybatis Mybatis 是用来进行数据库操作的框架.其中分页使用Mybatis中的PageHelper插件. Mybatis与hibernate对比: 1.hibernate是一个 ...

  9. heatbeat-gui实现基于nfs的mysql高可用集群

    一.简述HA高可用集群 高可用集群就是当集群中的一个节点发生各种软硬件及人为故障时,集群中的其他节点能够自动接管故障节点的资源并向外提供服务.以实现减少业务中断时间,为用户提供更可靠,更高效的服务. ...

  10. ng2 quickstart-primeng

    1.导入quickstart-angular项目 2.安装primeng npm install primeng 3.安装@angular/animations npm install @angula ...