<!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. OpenERP在product中增加外部网络链接图片

    最近的一个项目要求在Product_Template中增加类似与HTML中<img src=”" />的形式的图片 product_img_extra.py from osv i ...

  2. MariaDB初始化和启动故障

    初始化故障排查 1. so依赖缺失 比如报这样的错误: ./bin/mysqld: error while loading shared libraries: libnuma.so.1: cannot ...

  3. idea 配置多个jdk

      1.File -->Project Structure 2.SDKs-->点击+号-->JDK-->目录选择到jdk文件夹所在的位置 3.选择jdk所在路径 4.可以配置多 ...

  4. 如何高效的阅读hadoop源代码？

    个人谈谈阅读hadoop源代码的经验. 首先,不得不说,hadoop发展到现在这个阶段,代码已经变得非常庞大臃肿,如果你直接阅读最新版本的源代码,难度比较大,需要足够的耐心和时间,所以,如果你觉得认真 ...

  5. 使用CXF实现基于Rest方式的WebService(转)

    转自:https://www.cnblogs.com/zjm701/p/6845813.html原文更清晰 本文介绍使用CXF实现基于Rest方式的WebService(CXF的版本是3.0.0) 一 ...

  6. HDUOJ--1874 畅通工程续

    畅通工程续 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  7. DropBox 超实用的免费文件网络同步、备份、分享工具

    http://www.iplaysoft.com/dropbox.html DropBox 就是一款非常好用的免费网络文件同步工具(当然它也算是一个服务).当你在电脑A使用DropBox时,指定文件夹 ...

  8. RabbitMQ消息队列的小伙伴: ProtoBuf（Google Protocol Buffer） [转]

    什么是ProtoBuf? 一种轻便高效的结构化数据存储格式,可以用于结构化数据串行化,或者说序列化.它很适合做数据存储或 RPC 数据交换格式.可用于通讯协议.数据存储等领域的语言无关.平台无关.可扩 ...

  9. JMeter学习笔记--详解JMeter定时器

    定时器的处理优先于同一作用域内的采样器,如果在同一作用域内有多个定时器,那么所有的定时器都会在每个采样器之前处理. 若定时器所在作用域内无采样器,那么定时器不会被处理 固定定时器,每个线程在请求之间间 ...

  10. #pragma pack

    原文链接: http://www.cnblogs.com/s7vens/archive/2012/03/06/2382236.html pack 为 struct, union 和 class 等的成 ...