表单验证插件——validate

该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：

$(form).validate({options})

其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

     <head>

         <title>表单验证插件</title>

         <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>

         <script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.js"></script>

         <script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.messages_cn.js"></script>

     <style>

         #divtest

         {

             width: 282px;

         }

         #divtest .title

         {

             padding: 8px;

             background-color: blue;

             color: #fff;

             height: 23px;

             line-height: 23px;

             font-size: 15px;

             font-weight: bold;

         }

         #divtest .content

         {

             padding: 8px 0px;

             background-color: #fff;

             font-size: 13px;

         }

         #divtest .content .tip

         {

             color: Red;

             font-size: 12px;

         }

         .fl

         {

             float: left;

         }

         .fr

         {

             float: right;

         }

     </style>

     </head>

     <body>

         <form id="frmV" method="get" action="#">

             <div id="divtest">

                 <div class="title">

                     <span class="fl">表单验证插件</span>

                     <span class="fr">

                         <input id="btnSubmit" type="submit" value="提交" />

                     </span>

                 </div>

                 <div class="content">

                     <span class="fl">邮箱：</span><br />

                     <input id="email" name="email" type="text" /><br />

                     <span class="tip"></span>

                 </div>

             </div>

         </form>

         <script type="text/javascript">

             $(function () {

                 $("#frmV").validate(

                   {

                       /*自定义验证规则*/

                       rules: {

                             email:{

                             required:true,

                             email:true

                           }

                       },

                       /*错误提示位置*/

                       errorPlacement: function (error, element) {

                           error.appendTo(".tip");

                       }

                   }

                 );

             });

         </script>

     </body>

 </html>

表单验证插件——validate的更多相关文章

  1. jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址

     一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...

  2. Jquery表单验证插件validate

    写在前面: 在做一些添加功能的时候,表单的提交前的验证是必不可少的,jquery的validate插件就还可以,对于基本的需求已经够了.这里记录下基本的用法. 还是写个简单的demo吧 <htm ...

  3. 学习 表单验证插件validate

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 表单验证插件validate

    http://www.runoob.com/jquery/jquery-plugin-validate.html <!DOCTYPE html> <html lang="e ...

  5. jQuery.validate.js表单验证插件

    jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

  6. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  7. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  8. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  9. jQuery Validate 表单验证插件----自定义一个验证方法

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

随机推荐

  1. Web应用登出后防止浏览器后退

    通常情况下,浏览器会对页面进行缓存,此时可以通过后退访问刚才的页面,如:Web应用登出后后退能够访问刚才被缓存的页面,这样在有些情况下是不够安全的,解决防止后退的办法如下: response.setH ...

  2. ajax 设置Access-Control-Allow-Origin实现跨域访问

    ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全. 即使使用jquery的jsonp方法,t ...

  3. ASP专栏——ASP生成静态文件（用于大量文章）

    对于Web开发人员来说,生成静态文件这个概念并不陌生. 对于Web开发来说,如何能避免客户端访问时不停的查询数据库?现在比较常用的有两种方法,一种是使用缓存技术,将查询出来的结果缓存至缓存框架中,以后 ...

  4. execute连接 类型

    set rs=server.createobject("adodb.recordset") sql="select top 10 id,name from tablena ...

  5. 使用 Visual Studio Team Test 进行单元测试和java中的测试

    C#中test测试地 方法一. 1.从NUnit官网(http://www.nunit.org/index.php)下载最新版本NUnit,当前版本为NUnit2.5.8. 2.安装后,在VS2008 ...

  6. 【面试虐菜】—— LVS负载均衡

    Load Balancer(负载均衡器): Load Balancer是整个集群系统的前端,负责把客户请求转发到Real Server上.Load Balancer通过Ldirectord监测各Rea ...

  7. Python数据结构——链表的实现

    链表由一系列不必在内存中相连的结构构成,这些对象按线性顺序排序.每个结构含有表元素和指向后继元素的指针.最后一个单元的指针指向NULL.为了方便链表的删除与插入操作,可以为链表添加一个表头. 删除操作 ...

  8. Python中处理时间 —— time模块

    time模块 time 模块可用来处理时间,详细的说明参考 time模块说明. 逝去的秒数 逝去的秒数表示从某个时间(Python中是"Thu Jan 1 07:00:00 1970&quo ...

  9. Nginx开启gzip压缩功能

    在Nginx安装完成之后,我们可以开启Gzip压缩功能,这里Nginx默认只能对text/html类型的文件进行压缩.下面的指令为开启Gzip的指令: gzip on; gzip_http_versi ...

  10. .net如何调试dll

    引用"谢绝关注的BLOG" http://blog.sina.com.cn/s/blog_50cc0ffd0100cqhp.html 在同一个解决方案中一定要将调用DLL文件的工程 ...