<!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. eclipse/STS 切换目录视图

  2. html字符转义

    常用表: No. 文字表記 10進表記 16進表記 文字   Comment 001 " " " """   quotation mark ...

  3. 恭喜您成为2014年度Microsoft MVP!

  4. 新浪微博API使用初步介绍——解决回调地址的问题

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #新浪微博API使用初步介绍——解决回调地址的问题 #http://blog.csdn.net/monsion ...

  5. VC++程序员如何做好界面

    本屌丝在新春放假期间闲来无事,在各大编程论坛溜达了一圈.发现年前的帖子中,有VC++程序员在界面开发方面遇到了很多苦恼,有抱怨界面工作不好做的,有抱怨用错了界面库的,也有紧急求得技术问题帮助的.看到这 ...

  6. 普通spring jsp+mybatis项目修改为springboot + jsp +mybatis项目

    概述 由于公司决定使用spring cloud,但是公司积累了大量的普通的jsp项目,老的项目直接全部修改为springboot成本过高,周期比较长,而且公司业务正在快速拓展,所以需要把之前的老项目修 ...

  7. js的7个技巧

    http://www.vaikan.com/seven-javascript-things-i-wish-i-knew-much-earlier-in-my-career/

  8. highstock使用案例（异步请求，懒加载）

    jsp中导入:<script src="<c:url value="/resources/js/highstock.js"></c:url> ...

  9. LR杂记 - 性能測试指标及经常使用的监控工具

    监控指标 性能測试通常须要监控的指标包含: 1.serverLinux(包含CPU.Memory.Load.I/O). 2.数据库:1.Mysql 2.Oracle(缓存命中.索引.单条SQL性能.数 ...

  10. Axure 8.0.0.3312下载地址以及注册码

    下载地址: 链接: http://pan.baidu.com/s/1pKMPsJx 密码: gu8t Axure 8.0.0.3312可用注册码(仅供3312版本使用) 用户名:aaa 注册码:2GQ ...