表单验证插件——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. linux od命令: 按不同进制显示文件

    介绍:od(octal dump)命令可以以八进制.十进制.十六进制和ASCII码来显示文件或者流,它们对于访问或可视地检查文件中不能直接显示在终端上的字符很有用.语法: od [-A 地址进制] [ ...

  2. 联想预装win8系统改成win7操作步骤及注意事项

    联想消费台式机与一体机预装Windows8改装Windows7的操作步骤及常见问题 前提说明: 目前联想出厂预装Windows 8的台式和一体机使用都是UEFI+GPT硬盘的组合,并且开启了安全启动, ...

  3. DevExpress学习笔记1-ProductsDemo.Win

    最近在学习ProductsDemo.Win,有一些体会记录下来,大家分享: 在Contacts模块: 在Private Sub UpdateCurrentContact()过程添加一句:InitInd ...

  4. 【Qt】Qt之自定义界面（实现无边框、可移动）【转】

    简述 UI设计是指对软件的人机交互.操作逻辑.界面美观的整体设计.好的UI设计不仅是让软件变得有个性.有品位,还要让软件的操作变得舒适简单.自由,充分体现软件的定位和特点. 爱美之心人皆有之.其实软件 ...

  5. [Android教程]TextView使用SpannableString设置复合文本

    TextView通常用来显示普通文本,但是有时候需要对其中某些文本进行样式.事件方面的设置.Android系统通过SpannableString类来对指定文本进行相关处理,具体有以下功能: 1.Bac ...

  6. CDH JPS 出现没有名字的进程

    jps 时出现没有名字的进程 或者process information unavailable 把服务关掉,执行一下 rm -rf /tmp/hsperfdata_* 再重启就好了.

  7. PHP操作MongoDB简明教程(转)

    转自:http://blog.sina.com.cn/s/blog_6324c2380100ux2m.html MongoDB是最近比较流行的NoSQL数据库,网络上关于PHP操作MongoDB的资料 ...

  8. 使用另一种方式实现js中Function的调用(call/apply/bind)

    在JavaScript中函数的调用可以有多种方式,但更经典的莫过于call和apply.call跟apply都绑定在函数上,他们两个的第一个参数意义相同,传入一个对象,他作为函数的执行环境(实质上是为 ...

  9. 第三章 DispatcherServlet详解

    3.1.DispatcherServlet作用 DispatcherServlet是前端控制器设计模式的实现,提供Spring Web MVC的集中访问点,而且负责职责的分派,而且与Spring Io ...

  10. Spring中@Transactional事务回滚实例及源码

    一.使用场景举例 在了解@Transactional怎么用之前我们必须要先知道@Transactional有什么用.下面举个栗子:比如一个部门里面有很多成员,这两者分别保存在部门表和成员表里面,在删除 ...