<!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. POSIX 线程详解

    一种支持内存共享的简捷工具 POSIX(可移植操作系统接口)线程是提高代码响应和性能的有力手段.在本系列中,Daniel Robbins 向您精确地展示在编程中如何使用线程.其中还涉及大量幕后细节,读 ...

  2. git删除本地的资源，如何恢复？

    1.$ git reset --hard HEAD  将提交重置 2.使用 $ git checkout TestTimer.java(文件名) 恢复过来了

  3. [ACM] hdu 1671 Phone List (字典树）

    Phone List Problem Description Given a list of phone numbers, determine if it is consistent in the s ...

  4. 小程序三：视图层之WXML

    WXML WXML(WeiXin Markup Language)是MINA设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. [1]数据绑定 1.1 简单绑定 数据绑定使用" ...

  5. mysql中innodb和myisam的区别

    InnoDB和MyISAM是很多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,5.7之后就不一样了 1.事务和外键 InnoDB具有事务,支持4个事务隔离级别,回滚,崩溃修复能力和多版 ...

  6. Apache-一个IP多个主机域名

    #配置虚拟主机名 NameVirtualHost 192.168.209.128 <VirtualHost 192.168.209.128> DocumentRoot /htdocs/wi ...

  7. ReentrantLock和synchronized的区别随笔

    http://wsmajunfeng.iteye.com/blog/1492316 可重入锁 ReentrantLock 的含义是: 当某个线程获取某个锁后,在未释放锁的情况下,第二次再访问该锁锁定的 ...

  8. idea中pom.xml关于oracle配置

    由于Oracle授权问题,Maven3不提供Oracle JDBC driver,为了在Maven项目中应用Oracle JDBC driver,必须手动添加到本地仓库. Orace驱动的下载:htt ...

  9. 【LeetCode】40. Combination Sum II (2 solutions)

    Combination Sum II Given a collection of candidate numbers (C) and a target number (T), find all uni ...

  10. 分享一款眼睛保健小软件 EyeDefender 多关注下眼睛的健康

    http://www.nowamagic.net/librarys/veda/detail/2248 感觉最近视力又下降了不少,估计又要重新配眼镜了.总是对着电脑一坐就好几个小时,眼睛老是紧绷着,焦距 ...