第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. CentOS经常使用文件操作命令[百度博客搬家]

    路径操作的CentOS经常使用命令 如今整理例如以下(百度博客搬家)   cd pwd  NO1. 显示当前路径  [root@rehat root]# pwd  NO2. 返回用户主文件夹  [ro ...

  2. Docker---(4)Docker 部署spring web项目

    原文:Docker---(4)Docker 部署spring web项目 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn.n ...

  3. C#执行sql文件

    C# 执行sql文件 2012-05-11 12:28:57|  分类: App Develop|举报|字号 订阅       /// <summary>         /// 执行sq ...

  4. 【例题 7-4 UVA - 524】Prime Ring Problem

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 预处理出所有的答案. 打表输出. [代码] import java.util.ArrayList; import java.util ...

  5. Notepad++使用心得和特色功能介绍 -> notepad/ultraedit的最好的替代品

    [详细]Notepad++使用心得和特色功能介绍 -> notepad/ultraedit的最好的替代品 最近在用Notepad++,发现的确是很不错的工具,具体特色,看了下面介绍就知道了. [ ...

  6. NHibernate之旅(3):探索查询之NHibernate查询语言(HQL)

    本节内容 NHibernate中的查询方法 NHibernate查询语言(HQL) 1.from子句 2.select子句 3.where子句 4.order by子句 5.group by子句 实例 ...

  7. 当数据库没有备份,redo或undo损坏

    数据库在没有备份的情况下,如果数据库redo或undo损坏,可以通过如下方法处理,但是不一定成功 把init文件中的: undo_management=manual 然后启动数据库到mount 状态后 ...

  8. Library Component Properties的表格如何填写

  9. 微信小程序常见的UI框架/组件库总结

    想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库. 1:WeUI 小程序–使用教程 h ...

  10. hdu2049(组合数学)

    题意:每位新娘打扮得差点儿一模一样,并盖上大大的红盖头随机坐成一排;然后,让各位新郎寻找自己的新娘.每人仅仅准找一个,而且不同意多人找一个.最后,揭开盖头,如果找错了对象就要当众跪搓衣板...如果一共 ...