第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. 【AIM Tech Round 4 (Div. 2) A】Diversity

    [链接]http://codeforces.com/contest/844/problem/A [题意] 大水题 [题解] 看看不同的个数num是不是小于k,小于k,看看len-num够不够补的 [错 ...

  2. 【2017中国大学生程序设计竞赛 - 网络选拔赛】Palindrome Function

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6156 [题意] 已知函数f(x, k),如果10进制数x在k进制下是个回文数,那么f(x, k)值为k, ...

  3. JavaScript学习总结(2)——JavaScript数据类型判断

    最近做项目中遇到了一些关于javascript数据类型的判断处理,上网找了一下资料,并且亲自验证了各种数据类型的判断,在此做一个总结吧! 一.JS中的数据类型  1.数值型(Number):包括整数. ...

  4. 洛谷 P2655 2038年问题

    P2655 2038年问题 题目描述 网络时代,机会与危机共存.“千年虫”解决之后,会不会有新的“虫”出现?回答是肯定的,“2038年”就是一个新的关卡. 也许大家都已经知道计算机的2000年问题是什 ...

  5. vue 自定义分页组件

    vue2.5自定义分页组件,可设置每页显示条数,带跳转框直接跳转到相应页面 Pagination.vue 效果如下图: all: small(只显示数字和上一页和下一页): html <temp ...

  6. Android 获取联系人手机号码、姓名、地址、公司、邮箱、生日

    public void testGetAllContact() throws Throwable { //获取联系人信息的Uri Uri uri = ContactsContract.Contacts ...

  7. pdf.js安装步骤和使用

    从github下载的源码不能直接使用,最好使用命令行下载安装 1.下载源码 git clone git://github.com/mozilla/pdf.js.git cd pdf.js 2.安装no ...

  8. Redis学习笔记--String(四)

    Redis的第一个数据类型string 1.命令 1.1赋值 语法:SET key value Set key value; > OK 1.2取值 语法:GET key > get tes ...

  9. (转)Windows2008优化IIS7.5支持10万个同时请求的配置方法

    通过对IIS7的配置进行优化,调整IIS7应用池的队列长度,请求数限制,TCPIP连接数等方面,从而使WEB服务器的性能得以提升,保证WEB访问的访问流畅. 在运行中cmd后,输入:C:\Window ...

  10. 4、runtime电源管理模式(内核文档runtime_pm.txt有详细描述)

    系统睡眠模型是让整个系统休眠,而runtime是在系统正常工作的时候单独控制某个设备休眠和唤醒 1. runtime PM流程怎样动态地打开或关闭设备的电源?最简单的方法:在驱动程序里,在open函数 ...