<!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. MySQL 数据库几种类型

    关系数据库(MySQL.Oracle.SQL Server.DB2.Postgres)键-值存储数据库(Riak和Redis)面向列的数据库(HBase) 面向文档的数据库(MongoDB 和Couc ...

  2. c# 获取北京时间更新本地计算机

    class UpdateDateTime { [DllImport("Kernel32.dll")] private static extern void SetLocalTime ...

  3. java 加密工具（产生证书）

    给Tomcat服务器应用加密: 命令:keytool -genkey -alias tomcat -keyalg RSA -genkey产生密钥对 -alias取得别名 -keyalg RSA产生密钥 ...

  4. Eclipse c++ 编译调试

    直接添加源文件方法: 右键选择工程->import->General->File System,在弹出的对话框中选择源文件目录,筛选文件后: 1.如果直接加到工程中,点Finish就 ...

  5. hdu 4412 Sky Soldiers(区间DP)

    Sky Soldiers Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tot ...

  6. 原创：微信小程序页面跳转展示缓冲提示

    1.在JS文件中,直接加上下面代码即可: //缓冲提醒 wx.showToast({ title: '加载中', icon: 'loading', duration: 400 })

  7. kubernetes中使用NFS创建pv_pvc

    Persistent Volume(持久化卷)简称PV, 是一个K8S资源对象,我们可以单独创建一个PV, 它不和Pod直接发生关系, 而是通过 Persistent Volume Claim, 简称 ...

  8. Nginx的HTTPS 301重定向到另一个TLD（托管在同一服务器上）没有显示出SSL警告

    我自己 example.com, .com.au, .net, .net.au, ... (8 in total). 我想所有的这些顶级域名以301的域名重定向到安全.COM域 https://www ...

  9. HDUOJ---三角形(组合数学)

    http://acm.hdu.edu.cn/showproblem.php?pid=1249 三角形 Time Limit: 2000/1000 MS (Java/Others)    Memory ...

  10. linux命令中的 < 和 |、>符号作用就解释

    输出重定向比如输入一条命令,默认行为是将结果输出到屏幕.但有时候我们需要将输出的结果保存到文件,就可以用重定向.ps > ps.txt < 表示的是输入重定向的意思,就是把<后面跟的 ...