<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             font-family:Verdana;

             font-size:96%;

         }

         label{

             width:10em;

             float:left;

         }

         label.error{

             float:left;

             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;

         }

     </style>

     <script src="jquery-1.11.1.min.js"></script>

     <script src="jquery.validate.js"></script>

     <script>

         $(document).ready(function(){

             $('#commetForm').validate();

         })

     </script>

 </head>

 <body>

 <form action="#" method='get' class="cmxform" id="commetForm">

     <fieldset>

         <legend>使用jquery插件validate制作的表单验证案例</legend>

         <p>

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

             <input  id="cusername" name="username" size="25"  class="required" minlength="2" >

         </p>

         <p>

             <label for="cemil">电子邮件</label><em>*</em>

             <input  id="cemil" name="emil" size="25" class="required email"   >

         </p>

         <p>

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

             <input  id="curl"  class="url" size="25">

         <p>

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

             <textarea name="" id="ccomment" cols="22" rows="10" class="required"></textarea>

         </p>

         <p>

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

         </p>

     </fieldset>

 </form>

 </body>

 </html>

效果图如下：

使用jquery插件validate制作的表单验证案例的更多相关文章

  1. JavaScript 表单验证 案例

    JavaScript 表单验证 案例 版权声明:未经授权,严禁转载!   编写 HTML 文件,搭建主体界面 <html> <head> <meta charset=&q ...

  2. jQuery学习之：Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

  3. 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证

    一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...

  4. JQuery制作网页——表单验证

      1.  表单验证:减轻服务器的压力.保证输入的数据符合要求: 2.  常用的表单验证:日期格式.表单元素是否为空.用户名和密码.E-mail地址.身份证号码等: 3.  表单验证的思路: 1.   ...

  5. 【转】Validate + Boostrap tooltip 表单验证示例

    一.工具准备: 1.boostrap: 下载地址 http://getbootstrap.com/ jquery: jQuery版本需大于或等于1.8.0  jquery.validate.min.j ...

  6. jQuery应用实例5：表单验证

    1.validation插件的使用: 入门案例: <html> <head> <meta charset="UTF-8"> <title& ...

  7. 【表单验证】基于jQuery的高度灵活的表单验证（无UI）

    表单验证是前端开发过程中常见的一个需求,产品需求.业务逻辑的不同,表单验证的方式方法也有所区别.而最重要的是我们要清楚,表单验证的核心原则是--错误信息提示准确,并且尽可能少的打扰/干扰用户的输入和体 ...

  8. 用jquery写自己的form表单验证

    这几天看了锋利的jquery,感觉很不错.特别是jquery强大的选择器.今天就利用jquery写了一个自己的form表单验证的小案例.当巩固下jquery.首先贴下代码,当然只是一个小案例. 思路: ...

  9. jQuery表单验证案例

    目标:使用jQuery进行表单验证. 功能:1.必填选项后面添加了红色小星星: 2.选中开始输入时,输入文本框会改变当前背景色,增强用户体验: 3.输入的时候就开始验证,当输入格式正确就会提醒,就是当 ...

随机推荐

  1. ElasticSearch异常归纳(能力工场小马哥)

    异常1: can not run elasticsearch as root [WARN ][o.e.b.ElasticsearchUncaughtExceptionHandler] [node-2] ...

  2. element-ui 源码架构

    1.项目结构 2.src下的入口文件 https://github.com/ElemeFE/element/blob/dev/src/index.js 入口文件实现的功能为: (1)国际化配置 (2) ...

  3. HDU 5402 Travelling Salesman Problem（棋盘染色 构造 多校啊）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5402 Problem Description Teacher Mai is in a maze wit ...

  4. 揭开JDBC的神秘面纱，让JDBC数据库的连接参数不再神秘

    1.JDBC是什么? JDBC(Java DataBase Connectivity)java数据库连接 2.JDBC可以做什么?        简单地说,JDBC 可做三件事:与数据库建立连接.发送 ...

  5. Dubbo Monitor 配置

    1. Dubbo Monitor 下载dubbo-monitor-simple-2.5.3-assembly.tar.gz 链接:http://pan.baidu.com/s/1gf88wDX 密码: ...

  6. Move semantics(C++11)

    /*  * Compile with:   *       g++ move_test.c -o move_test -std=c++11 -g -fno-elide-constructors  * ...

  7. nginx中的502错误

    遇到这种情况,首先看一下慢日志 [17-Aug-2015 13:13:43] WARNING: [pool www] child 27780, script '/data/s.com/index.ph ...

  8. vs.net使用技巧

    1.快捷键收缩和展开代码段 i. Ctrl-M-O   折叠所有方法 ii. Ctrl-M-P   展开所有方法并停止大纲显示(不可以再折叠了) iii. Ctrl-M-M   折叠或展开当前方法 i ...

  9. ORA-04089: 无法对 SYS 拥有的对象创建触发器

    ORA-04089: 无法对 SYS 拥有的对象创建触发器 http://bbs.csdn.net/topics/390355220 猛然发现自己是用sys用户创建表空间,创建用户,赋权,顺手就把sq ...

  10. CoreText实现图文混排之文字环绕及点击算法

    系列文章: CoreText实现图文混排:http://www.jianshu.com/p/6db3289fb05d CoreText实现图文混排之点击事件:http://www.jianshu.co ...