jQuery.validationEngine前端验证
引入相关文件:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/
javascript"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
使用实例:
邮箱验证:
<input value="someone@nowhere.com" class="validate[required,custom[email]]" type="text" name="email" id="email" />
日期验证:
<input value="2010-12-01" class="validate[required,custom[date]]" type="text" name="date" id="date" />
数字验证:
<input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" />
URL验证:
<input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" data-prompt-position="topLeft" />
必填验证:
<input value="" class="validate[required] text-input" type="text" name="req" id="req" data-prompt-position="bottomLeft" />
数字字母验证:
<input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" data-prompt-position="bottomRight" />
自定义验证:
<input value="" class="validate[required,funcCall[checkHELLO]]" type="text" id="lastname" name="lastname" />
function checkHELLO(){
alert('Hello World!');
}
AJAX验证:
<input value="" class="validate[required,custom[onlyLetterNumber],maxSize[20],ajax[ajaxUserCall]] text-input" type="text" name="user" id="user" />
"ajaxUserCall": {
"url": "ajaxValidateFieldUser",
"extraData": "name=eric",
"extraDataDynamic": ['#user_id', '#user_email'],
"alertText": "* This user is already taken",
"alertTextOk": "All good!",
"alertTextLoad": "* Validating, please wait"
},
多选验证:
<input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck1" value="5"/>
<input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck2" value="3"/>
<input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck3" value="9"/>
jQuery.validationEngine前端验证的更多相关文章
- Jquery ValidationEngine 修改验证提示框的位置
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用 jQuery 进行前端验证
前段验证脚本的教程,其基础为jQuery的插件validate. 一.可以验证哪些信息 要求输入不能为空 要求输入格式必须为电子邮箱 要求输入格式必须为URL 要求输入格式必须为日期 要求输入格 ...
- 使用 jQuery 进行前端验证 -- 1
如今很多的网站偶会有不同层次的验证去验证用户输入的信息是否符合我们所需要的数据类型.并且可以说任何有输入的地方都需要的去验证,验证一方面是要求用户输入正确格式的数据,同时也是避免恶意的用户进行非法的输 ...
- jQuery Validate前端验证
我们经常看到如下效果,那么它是如何实现的呢?看下面: 废话少说,直接上代码,大家直接Copy就能看到上面的效果啦. <html> <head> <title>验证内 ...
- jquery前端验证框架
1.validationEngine.jquery.css 样式包 2.jquery.validationEngine-zh_CN.js 中文语言包 3.jquery.validationEngin ...
- 关于引入多个jquery冲突的问题(附一个很好用的validate前端验证框架及使用方法)
废话不多说,进入正题: 如果一个jsp中想要使用两个不同版本的jquery怎么办呢?客官往下看: <script src="${ctxStatic}/jquery/jquery-1.8 ...
- jQuery结合Ajax实现简单的前端验证和服务端查询
上篇文章写了简单的前端验证由传统的JavaScript转向流畅的jQuery滑动验证,现在拓展一下,使用Ajax实现用户体验比较好的异步查询,同样还是从建立一个简单的表单开始 <form nam ...
- Javascript配合jQuery实现流畅的前端验证
做前端时一般都习惯用JavaScript进行表单的简单验证比如非空验证和正则表达式验证,这样过滤后的数据提交到服务端再由专门的控制器做数据处理,这样能减轻服务器的负担,下面看一下前端验证的简单步骤: ...
- 简单的jQuery前端验证码校验
简单的jQuery前端验证码校验2 html; <!DOCTYPE html> <html lang="zh-cn"> <head> <m ...
随机推荐
- JDBC操作封装
这两天学习了一下jdbc的封装,依据的是下面这篇 http://wenku.baidu.com/link?url=FaFDmQouYkKO24ApATHYmA5QzUcj-UE-7RSSZaBWPqk ...
- Spring 4.0 中的 WebSocket 架构
两年前,客户端与服务器端的全双工双向通信作为一个很重要的功能被纳入到WebSocket RFC 6455协议中.在HTML5中,WebSocket已经成为一个流行词,大家对这个功能赋予很多构想,很多时 ...
- 《转载》深入理解 CSS 中的行高与基线
这篇文章总结的很好,故转载收藏. 1.基本概念 1. 基线.底线.顶线.中线 注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿. 2. 内容区 内容区是指底线和顶线 ...
- Opencv 完美配置攻略 2014 (Win8.1 + Opencv 2.4.8 + VS 2013)上
下载安装软件 下载 Opencv for Windows 最新版本,本文是 Opencv 2.4.8.双击后会出现解压提示,实际上就是“安装”了,路径填写为 D:/Program Files,然后确定 ...
- Java数组复制
System提供了一个静态方法arraycopy(),我们可以使用它来实现数组之间的复制.其函数原型是: public static void arraycopy(Object src, int sr ...
- php curl_exec optimize
需求:前端过来一个请求,后台php要通过两次http请求,请求不同的地址得到资源后拼接返回给前端 请求A站: 请求B站: 同时请求A站和B站(php 串行 curl_exec ) 同时请求A站和B站( ...
- Tomcat教程
随着java的流行,其在web上的应用也越来越广,tomcat作为一个开源的servlet容器,应用前景越来越广,本文将向你讲述tomcat的一些知识. 一:简介 tomcat是jakar ...
- javascript每日一练—运动
1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- javascript外部ファイル
function myFunction() { document.getElementById("demo").innerHTML = "Paragraph cha ...
- 通过Orchard认识的Autofac
反射Reflection 这是.Net中获取运行时类型信息的方式,.Net的应用程序由几个部分:'程序集(Assembly)'.'模块(Module)'.'类型(class)'组成,而反射提供一种编程 ...