使用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 商用收费,丰 ...
随机推荐
- Android系统如何管理自己内存的?
本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 机缘巧合写下这篇博客,作为个人工作经验的总结,不足之处,随后补上. 安卓是基于Linux2.6内核的 ...
- ES6 数组、对象的扩展
8. 数组的扩展 扩展运算符(...),将一个数组转为用逗号分隔的参数序列. 复制数组 const a2=[...a1] 合并数组 [...arr1, ...arr2, ...arr3]; arr1. ...
- loadrunner监控apache服务
一.apache配置步骤(假设apache服务已安装) 1.使用find / -name httpd.conf命令查找httpd.conf文件 2.使用cd opt/lampp/apache2/con ...
- 洛谷 P1599 结算日
洛谷 P1599 结算日 题目描述 “不放债不借债”,贝西多么希望自己可以遵循这个忠告.她已经和她的N(1 <= N <= 100,000)个朋友有了债务关系,或者借债了,或者放债了.她的 ...
- Unity自带网络功能——NetworkView组件、Serialize、RPC
Unity拥有大量的第三方插件,专门提供了对网络功能的支持.可是,大部分开发人员第一次接触到的还是Unity自带的网络功能,也就是大家常常说到的Unity Networking API.这些API是借 ...
- php课程 8-32 如何使用gd库进行图片裁剪和缩放
php课程 8-32 如何使用gd库进行图片裁剪和缩放 一.总结 一句话总结:图片缩放到图片裁剪就是改变原图截取的位置以及截取的宽高. 1.电商网站那么多的图片,如果全部加载卡得慢的很,所以他们是怎么 ...
- iOS_05_iOS设备发展史
ios设备发展史 IPhone一代 * 2007年发布. * 支持电子邮件.移动电话.短信.网络浏览等. * 采取触摸键盘 * 3.5英寸,480 x 320像素. * 后置摄像投200万像素. IP ...
- SQL Server 2008 Tempdb 数据库迁移
1.首先检查数据文件位置及名称 SELECT name,physical_name FROM sys.database_files 2.迁移 USE master; GO ALTER DATABASE ...
- [Angular] Learn How To Use ng-template Inputs
For example, we have a modal component, it can config that using ng-template as a configurable templ ...
- js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写
js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...