第1步:

引入CSS和JS
   
   <script type="text/javascript"

src="${base}/static/js/frontbackend.js?fv=${fv}"></script>
<script src="${static}/framework/validationEngine/jquery.validationEngine-zh_CN.js" type="text/javascript"></script>
<script src="${static}/framework/validationEngine/jquery.validationEngine.js" type="text/javascript"></script>

第2步:
   
     定义form

<form id="addForm" class="validationEngine">
  <input type="text" name="card" id="card"

class="i-inp validate[required,custom[bankCard]]" />
</form>

form有id和class至少2个属性。
   input输入框有validate校验样式。

第3步:
   页面加载完毕之后,启动配置。
  $(function(){

//验证
$(".validationEngine").each(function() {
$(this).validationEngine('attach', {
promptPosition : 'centerRight',
scroll : false
});
});
});

有了上面的代码,鼠标离开输入框后,就会验证。

第4步:
   提交之前,验证。
  var pass=$("#addForm").validationEngine('validate');

if(!pass){
return;
}

总结:网上关于validationEngine的参考资料很多,但大部分不怎么的,最简单实用的其中1个是下面写的。
最困扰我的是,第3步。
鼠标离开输入框后,自动验证,给出提示。

更多用法,再说吧。

参考资料:http://code.ciaoca.com/jquery/validation_engine/   

使用jquery-validationEngine框架,4步实现前端JS校验的更多相关文章

  1. 前端JS校验银行卡卡号和身份证号码(附ES6版方法)

    1.银行卡卡号校验方法. function luhnCheck(bankno) { var lastNum = bankno.substr(bankno.length - 1, 1); //取出最后一 ...

  2. jQuery.validationEngine前端验证

    引入相关文件: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type ...

  3. jQuery UI框架

    jQuery UI框架 1.oschina开源社区-jQuery教程 2.jQuery PrimeUI(推荐) 3.弹出框.警告框.提示框.拖动支持.位置固定.选项卡切换 4.Bootstrap框架( ...

  4. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  5. 前端Js框架汇总

    概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...

  6. JQuery EasyUI框架学习

    前言 新项目的开发前端技术打算採用EasyUI框架(基于EasyUI较为丰富的UI组件库),项目组长将前端EasyUI这块的任务分配给了我.在进行开发之前,须要我这菜鸟对EasyUI框架进行一些基础的 ...

  7. Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)

    Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇--纯前端多页面) @(HTML/JS) 一般来说,使用vue做成单页应用比较好,但特殊情况下,需要使用多页面也有另外 ...

  8. 前端Js框架 UI框架汇总 特性 适用范围 选择

    身为一个资深后端工程师,面对层出不穷的前端框架,总让人眼花缭乱,做一个综合解析贴,从全局着眼,让我们明白各种前端框架的应用范围,为如何选择前端框架,从不同的维度提供一些线索,做为一个长期优化贴,欢迎指 ...

  9. 比较实用的前端 js框架 ,组件 汇总

    一.js 前端ui框架 Kendo UI 商用收费,组件丰富,界面简洁美观,有jQuery和angular两个js的版本 Webix 商用收费,组件丰富,界面特别美观 JQwidgets 商用收费,丰 ...

随机推荐

  1. GeoServer 常见问题总结 (转)

    geoserver在部署发布服务时,经常会遇到如下问题,现总结如下: 1.忘记了GeoServer Web Admin Page的登陆用户名和密码怎么办?存储位置:C:\Program Files\G ...

  2. method initializationerror not found:JUnit4单元測试报错问题

           今天使用JUnit 4进行单元測试时,測试程序一直执行不起来,报method initializationerror not found错误.例如以下:            网上说版本 ...

  3. 【Oracle错误集锦】:PLSQL无法直连64位Oracle11g数据库

    背景:Oracle数据库装在本机上,使用PLSQL连接. 今天安装完Oracle 11g数据库后.用plsql连接数据库死活都连接不上.而且plsql客户端登录窗体的Database下拉框还为空.见下 ...

  4. 华为OJ:字符串反转

    非常easy,逆向输出就好了. import java.util.Scanner; public class convertString { public static void main(Strin ...

  5. PythonNET网络编程4

    本地套接字 Linux 文件 b(块设备文件) c(字符设备文件) d(目录) -(普通文件) l(链接) s(套接字) p(管道) 作用:用于本地不同的程序间进行通信 创建流程 创建本地套接字 so ...

  6. Android 撕衣服(刮刮乐游戏)

    项目简单介绍: 该项目为撕衣服,相似刮刮乐游戏 具体介绍: 用户启动项目后.载入一张图片,当用户点击图片的时候,点击的一片区域就会消失.从而显示出在这张图片以下的图片 这个小游戏相似与刮奖一样,刮开涂 ...

  7. ES6的基础知识总结

    一. ES6 ES6中定义变量使用 let/const let 使用let定义的变量不能进行"变量提升" 同一个作用域中,let不能重复定义相同的变量名 使用var在全局作用域中定 ...

  8. pat 2-05. 求集合数据的均方差(水题)

    代码: #include<cstdio> #include<iostream> #include<cmath> using namespace std; doubl ...

  9. Docker基础(一)

    1.安装:安装教程很多,Ubuntu14.04安装比较简单docker[之前使用Ubuntu13.04结果安装了好久也没有安装好,后来就直接是14,04了] 2.docker是容器,那么什么是容器? ...

  10. 【z04】计算系数

    [题目链接]:http://noi.qz5z.com/viewtask.asp?id=z04 [题解] 用二项式定理可以写出下列通式 组合数可以用杨辉三角搞出来; a的x次方直接乘就好了;指数也不大. ...