使用jquery-validationEngine框架,4步实现前端JS校验
引入CSS和JS
<script type="text/javascript"
第2步:
定义form
<form id="addForm" class="validationEngine">
<input type="text" name="card" id="card"
</form>
form有id和class至少2个属性。
input输入框有validate校验样式。
第3步:
页面加载完毕之后,启动配置。
$(function(){
有了上面的代码,鼠标离开输入框后,就会验证。
第4步:
提交之前,验证。
var pass=$("#addForm").validationEngine('validate');
总结:网上关于validationEngine的参考资料很多,但大部分不怎么的,最简单实用的其中1个是下面写的。
最困扰我的是,第3步。
鼠标离开输入框后,自动验证,给出提示。
更多用法,再说吧。
使用jquery-validationEngine框架,4步实现前端JS校验的更多相关文章
- 前端JS校验银行卡卡号和身份证号码(附ES6版方法)
1.银行卡卡号校验方法. function luhnCheck(bankno) { var lastNum = bankno.substr(bankno.length - 1, 1); //取出最后一 ...
- jQuery.validationEngine前端验证
引入相关文件: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type ...
- jQuery UI框架
jQuery UI框架 1.oschina开源社区-jQuery教程 2.jQuery PrimeUI(推荐) 3.弹出框.警告框.提示框.拖动支持.位置固定.选项卡切换 4.Bootstrap框架( ...
- Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整
Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...
- 前端Js框架汇总
概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...
- JQuery EasyUI框架学习
前言 新项目的开发前端技术打算採用EasyUI框架(基于EasyUI较为丰富的UI组件库),项目组长将前端EasyUI这块的任务分配给了我.在进行开发之前,须要我这菜鸟对EasyUI框架进行一些基础的 ...
- Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)
Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇--纯前端多页面) @(HTML/JS) 一般来说,使用vue做成单页应用比较好,但特殊情况下,需要使用多页面也有另外 ...
- 前端Js框架 UI框架汇总 特性 适用范围 选择
身为一个资深后端工程师,面对层出不穷的前端框架,总让人眼花缭乱,做一个综合解析贴,从全局着眼,让我们明白各种前端框架的应用范围,为如何选择前端框架,从不同的维度提供一些线索,做为一个长期优化贴,欢迎指 ...
- 比较实用的前端 js框架 ,组件 汇总
一.js 前端ui框架 Kendo UI 商用收费,组件丰富,界面简洁美观,有jQuery和angular两个js的版本 Webix 商用收费,组件丰富,界面特别美观 JQwidgets 商用收费,丰 ...
随机推荐
- Django路由分配以及模版渲染
路由上: 在网络上区分不同的电脑通过IP.端口和网卡的MAC地址等,在web框架中怎么区分不同的请求呢,就是通过 ‘url(路由)’ ,url 学名叫做全球统一资源定位符,其实就是一个网址 一个url ...
- CListCtrl 隔行变色
响应消息 ON_NOTIFY(NM_CUSTOMDRAW, ListCtrl的ID, OnNMCustomdrawList) 实现函数OnNMCustomdrawList void CFinishWe ...
- method initializationerror not found:JUnit4单元測试报错问题
今天使用JUnit 4进行单元測试时,測试程序一直执行不起来,报method initializationerror not found错误.例如以下: 网上说版本 ...
- Core Animation 文档翻译—附录A(Layer样貌相关属性动画)
前言 在渲染过程中,核心动画获取Layer的各种属性并以特定的顺序渲染他们.这个顺序决定了Layer的最终的样貌.本节将会阐述通过设置不同的Layer样貌相关属性对应产生的渲染结果. 注意:Mac ...
- 1.2 Use Cases中 Log Aggregation官网剖析(博主推荐)
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Log Aggregation 日志聚合 Many people use Kafka ...
- Android Studio将Eclipse的项目作为module的依赖库
情形: 我们现在有一个eclipse的项目,我们想把这个项目作为android studio的module的一个依赖库. 以前我们在eclipse的时候常常是在一个工作区里面把一个A工程 as a l ...
- 展示C代码覆盖率的gcovr工具简单介绍及相关命令使用演示样例
(本人正在參加2015博客之星评选,诚邀你来投票,谢谢:username=zhouzxi">http://vote.blog.csdn.net/blogstar2015/candida ...
- Instant Client 配置
Instant Client Download 选择 Instant Client for Microsoft Windows (32-bit) 由于PL/SQL Developer 不支持64b ...
- C++胜者树
#include <iostream> #define MAX_VALUE 0x7fffffff using namespace std; //在这里我先反思一下.不知道怎么搞的,这个算法 ...
- jQuery笔记---选择器(三)
1.1查找隐藏的tr元素的个数 $(“table tr:hidden”).size() 查找所有可见的tr元素的个数 $(“table tr:not(:hidden)”).size() 一般是不使 ...