第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. 洛谷 P1689 方程求解

    P1689 方程求解 题目描述 给一个方程,形如X+Y=Z或X-Y=Z.给出了其中两个未知数,请求出第三个数.未知数用‘?’表示,等式中也许会出现一些多余的空格. 输入输出格式 输入格式: 一行,方程 ...

  2. js检查元素是否包括在数组中

    说明 在系统中须要检查税率填写的正确性,一定是国家规定的某几种税率,当然能够通过if else进行校验,可是还能够使用定义一个数组然后校验是否包括在元素中进行校验. 长处:加入税率无需改动逻辑,仅仅须 ...

  3. Spark SQL概念学习系列之DataFrame与RDD的区别

    不多说,直接上干货! DataFrame的推出,让Spark具备了处理大规模结构化数据的能力,不仅比原有的RDD转化方式更加简单易用,而且获得了更高的计算性能.Spark能够轻松实现从MySQL到Da ...

  4. git在本地分支上 git pull远程分支时,状况

    git 在pull或者合并分支的时候有时会遇到这个界面.可以不管(直接下面3,4步),如果要输入解释的话就需要: 1.按键盘字母 i 进入insert模式 2.修改最上面那行黄色合并信息,可以不修改 ...

  5. 二叉树的递归插入【Java实现】

    C++中由于有指针的存在,可以让二叉树节点指针的指针作为插入函数的实参,在函数体内通过*操作实现对真实节点指针.节点左孩子指针.节点右孩子指针的改变,这样很容易使用递归将大树问题转化到小树问题.但在J ...

  6. 解决Win8/8.1无法正确识别USB3.0的问题

    找一个USB3.0的移动硬盘到了手里竟然变成2.0的了!二了! 不能忍啊. 听说是快速启动的问题,但是开机速度快很诱人. 百度了其他解决方法,终于解决了. 下面摘录自: http://blog.csd ...

  7. uiautomator_python使用汇总

    1.判断按钮状态 if d(resourceId="id",enabled=False): #判断当前按钮是否为未激活状态,为True则为激活状态2.获取toast提示语 d.to ...

  8. 【Codeforces Round #433 (Div. 2) C】Planning

    [链接]h在这里写链接 [题意] 让你确定ti,使得∑(ti-i)*gi最小,其中ti∈[k+1..k+n],且每个ti都不能一样. 且ti>=i必须成立. [题解] 分解一下成为∑ti*gi ...

  9. UVA 10970 - Big Chocolate 洪水@。@

    先横着切m-1刀,矩形巧克力就变成了1*n (有m个)然后每个都要切n-1下,所以有 m*(n-1) +(m-1)= n*m-1 #include<cstdio> int main() { ...

  10. [Angular2 Form] Model Driven Form Custom Validator

    In this tutorial we are going to learn how simple it is to create custom form field driven validator ...