废话少说，直接上代码，可拷贝直接运行：

 <!DOCTYPE html>

 <html lang="zh">

     <head>

         <meta charset="UTF-8" />

         <meta name="viewport" content="width=device-width, initial-scale=1.0" />

         <meta http-equiv="X-UA-Compatible" content="ie=edge" />

         <title>validationEngine 插件</title>

         <!--<link rel="stylesheet" type="text/css" href="css/validationEngine.jquery.css" />-->

         <link href="https://cdn.bootcss.com/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.css" rel="stylesheet">

         <style type="text/css">

             *{

                 padding: 0;

                 margin: 0;

             }

             #form{

                 padding-left: 20px;

             }

             #form .line{

                 padding: 10px 0;

                 margin: 10px 0;

                 border-top: 1px dashed #0044CC;

             }

         </style>

     </head>

     <body>

         <form action="" method="post" id="form">

             <div class='line'>

                 必填项--输入框

             </div>

             <input value="" class="validate[required]" type="text" name="req">

             <div class='line'>

                 必填项--复选框

             </div>

             <input class="validate[required]" type="checkbox" name="agree">我同意服务协议

             <div class='line'>

                 url验证

             </div>

             <input value="http://" class="validate[required,custom[url]]" type="text" name="url">

             <div class='line'>

                 email验证

             </div>

             <input value="forced_error" class="validate[required,custom[email]]" type="text" name="email">

             <div class='line'>

                 IP 地址（v4）

             </div>

             <input value="192.168.3." class="validate[required,custom[ipv4]]" type="text" name="ip">

             <div class='line'>

                 数值

             </div>

             <input value="-33.87a" class="validate[required,custom[number]]" type="text" name="number">

             <div class='line'>

                 整数

             </div>

             <input value="10.1" class="validate[required,custom[integer]]" type="text" name="integer">

             <div class='line'>

                 相等运算

             </div>

             <input value="karnius" class="validate[required]" type="password" name="password" id="password">

             <input value="kaniusBAD" class="validate[required,equals[password]]" type="password" name="password2" id="password2">

             <div class='line'>

                 限制最小字符数

             </div>

             <input value="" class="validate[required,minSize[6]]" type="text" name="minsize">

             <div class='line'>

                 限制最大字符数

             </div>

             <input value="0123456789" class="validate[optional,maxSize[6]]" type="text" name="maxsize">

             <div class='line'>

                 输入整数（必须大于或等于 -5）

             </div>

             <input value="-7" class="validate[required,custom[integer],min[-5]]" type="text" name="min">

             <div class='line'>

                 输入整数（必须小于或等于 50）：

             </div>

             <input value="55" class="validate[required,custom[integer],max[50]]" type="text" name="max">

         </form>

         <!--<script src="../jquery/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>-->

         <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

         <!--<script src="js/jquery.validationEngine.min.js" type="text/javascript" charset="utf-8"></script>-->

         <script src="https://cdn.bootcss.com/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>

         <!--<script src="js/jquery.validationEngine-zh_CN.min.js" type="text/javascript" charset="utf-8"></script>-->

         <script src="https://cdn.bootcss.com/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-zh_CN.min.js"></script>

         <script type="text/javascript">

             jQuery(document).ready(function() {

                 jQuery('#form').validationEngine({

                     scroll: false,

                     promptPosition: 'centerRight',

                     maxErrorsPerField: 1,

                     showOneMessage: true,

                     addPromptClass: 'formError-noArrow formError-text'

                 });

             });

         </script>

     </body>

 </html>

效果：

validationEngine 表单验证插件使用的更多相关文章

  1. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  2. 【锋利的jQuery】表单验证插件踩坑

    和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...

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

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

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

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

  5. jQuery学习之：Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

  6. jquery validate表单验证插件

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

  7. 表单验证插件 - formValidator

    表单验证插件 - formValidator * 引入formValidator插件文件 * 引入formValidator插件的主文件 * 引入formValidator插件的正则有关文件 * 引入 ...

  8. JS表单验证插件(支持Ajax验证)

    自己编写了一个表单验证插件,支持ajax验证,使用起来很简单. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:ru ...

  9. 轻量级实用JQuery表单验证插件：validateForm5

    表单验证是Web项目一个必不可少的环节,而且是一项重复的劳动,于是小菜封装了一款简单的表单验证插件,名字叫:validateForm5. validateForm5插件基于Jquery,并向HTML5 ...

随机推荐

  1. mybatis如何根据mapper接口生成其实现类

    SpringBoot集成mybatis mybatis的statement的解析与加载 mybatis如何根据mapper接口生成其实现类 mybatis的mapper返回map结果集 mybatis ...

  2. Linux内核相关常见面试题

      转:http://www.embeddedlinux.org.cn/html/xinshourumen/201303/11-2475.html   本文详细阐述了linux内核相关的开发职位面试中 ...

  3. 如何使用 Core Plot 的 API 帮助文档

    Core Plot 可是 iOS 下绝好的图表组件,虽说它的相关资料不甚丰富,特别是中文的,英文的还是有几篇不错的文章,不过 Core Plot 自身提供的 API 帮助文档,以及代码示例其实很有用的 ...

  4. 每天进步一点点——论fork()函数与Linux中的多线程编程

    转载请说明出处:http://blog.csdn.net/cywosp/article/details/27316803 一.fork()函数     在操作系统的基本概念中进程是程序的一次运行,且是 ...

  5. 推荐Java程序员阅读的书籍(转)

    作为Java程序员来说,最痛苦的事情莫过于可以选择的范围太广,可以读的书太多,往往容易无所适从.我想就我自己读过的技术书籍中挑选出来一些,按照学习的先后顺序,推荐给大家,特别是那些想不断提高自己技术水 ...

  6. C++“窗体”程序设计启蒙（之二）

    [摘要]本文适合已经完整学习了C++面向对象机制,但在开发窗体程序方面还是零基础的同学.通过本文的引导进行实践体验,目的是消除同学们开发窗体程序的神奇感,为下一步的自学找到感觉.同一时候,能更深入地体 ...

  7. recyclerView 列表类控件卡顿优化

    1.使用ConstraintLayout减少布局层级. 2.可以的话,设置RecyclerView布局等高,然后设置recyclerView.setHasFixedSize(true)这样可以避免每次 ...

  8. 使用cxf开发webservice接口

    项目中经常用到开发webservice接口,及调用webService接口.这里讲解如何使用cxf开发webService接口. 一.webservice介绍及理解 webservice是一种跨平台, ...

  9. 【BZOJ】【1251】序列终结者

    Splay 还是splay序列维护,这题我WA了的原因是:在Push_up的时候,当前子树的max我是直接取的L.R和v[x]的最大值,但是如果没有左/右儿子,默认是会访问0号结点的mx值,而这个值没 ...

  10. Informatica 常用组件Aggregator之一 聚合表达式

    转换类型:已连接.主动        聚合转换允许您执行聚合计算,比如平均值和总和.聚合转换与表达式转换不同,您可以使用聚合转换对多组执行计算.而表达式转换只允许您逐行地执行计算.        使用 ...