- 浏览: 664679 次
- 性别:
- 来自: 安徽
文章分类
- 全部博客 (252)
- Html/Div+CSS (12)
- Js/Jquery (34)
- Flex (2)
- Ajax (3)
- Java (35)
- C# (15)
- Spring (16)
- Hibernate (13)
- Struts2 (12)
- Struts1 (7)
- DWR (1)
- iBatis/myBatis (9)
- Tag(JSTL、EL) (1)
- Android (44)
- SQL (7)
- SEO (7)
- Exception (3)
- Tool (10)
- Other (3)
- WebService (9)
- Apache (7)
- Ext (0)
- Utils (12)
- thinking in programme (2)
- Hadoop (0)
- ActiveMQ (0)
- HTML5/CSS3 (0)
- WPF (1)
- NodeJs (1)
- 设计模式 (0)
- 程序人生 (1)
- 随笔 (1)
- Linux (1)
- Load Balance (0)
最新评论
-
drinkjava2:
太复杂了而且不通用,利用ThreadLocal可完美解决这一问 ...
JDBC的多条件动态查询 -
u013107014:
multipartRequest.getFiles(" ...
多文件上传 by MultipartFile and Multiple -
liyys:
可惜没讲你mysql数据库的表的设计
iBatis入门 -
Mapple_leave:
效果还是挺不错的,谢谢了。
中文简体与繁体的转换 -
arcpad:
JS禁用浏览器退格键
在项目中表单的验证的选择是 JQuery.validationEngine 倒是一个不错的选择,无论在 Java or .NET 上都还不错,可以满足一般表单提交验证的需求,但是通过这个项目做的发现有时候怎么都想不起比如说下拉框怎么用 validationEngine 进行验证,所以今天想想还是好好总结总结吧,免得犯怂。下载地址:
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
先说一下使用的基本流程
1 、引用 Jquery 的 js 库和 validationEngine 的 js 和 css
<script type="text/javascript" src="./js/jquery-1.8.3.min.js"/> <script type="text/javascript" src="./js/jquery.validationEngine.js"/> <script type="text/javascript" src="./js/jquery.validationEngine-cn.js"/> <link type="text/css" rel="stylesheet" href="./css/validationEngine.jquery.css"/>
其中的 css 可以指定不同的语言的,在我们下载下来的文件中存在很多语言,我们在实际的项目开发中可以根据实际的情况选择。
2 、需要验证的页面在初始化时对验证插件进行初始化
$(function() { //表单验证 $("#fromId").validationEngine({ validationEventTriggers : "keyup blur", promptPosition : "centerRight", success : false, failure : function() { } }); });
说明:
·上面的 fromId 表示需要验证的表单 id ;
· validationEventTriggers 则指定验证触发的事件,默认是鼠标失去焦点( blur )时触发验证,我们可以删除这个属性;
· inlineValidation 表示是否即时验证, false 为提交表单时验证 , 默认 true ;
· promptPosition 表示验证出错的提示信息显示的位置(相对于验证标签的位置,包括 topLeft, topRight, bottomLeft, centerRight, bottomRight );
· success : 为 true 时即使有不符合的也提交表单 ,false 表示只有全部通过验证了才能提交表单 , 默认 false ;
· failure : function() { alert(" 验证失败,请检查。 "); } 表示验证失败时调用的函数;
· success : function() { callSuccessFunction() }, 表示验证通过时调用的函数,这两个回调一般在开发中都不需要写的;
3 、下面就是针对不同的标签进行验证,验证规则是写在表单元素的 class 属性内,例如
<input type="text" id="stuId" name="stuname"value="" class="validate[required,custom[SpecialCharacters]] " />
所有的验证规则写在 validate[] 内,有多种验证,用逗号隔开。注意这里需要指定 id ,如果不指定 id ,页面会有黑色输入框提示。
4 、在表单进行提交时判断验证是否通过,如果验证没有错,表示可以提交,否则 return ,开始使用时很多人会忘记这里,导致验证报错还是提交到后台了。
function submitForm() { if ($.validationEngine.submitValidation("#fromId") == false) { $("#fromId").submit(); } }
Ok ,一个表单验证需要做的准备工作完成了,下面我再来对不同的标签的验证方式进行一个简单的总结,其实直接从文档上就可以发现,这里只是简单的总结一下。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <script type="text/javascript" src="./res/js/jquery-1.8.2.js"> </script> <script type="text/javascript" src="./res/js/jquery.validationEngine1.7.js"> </script> <script type="text/javascript" src="./res/js/jquery.validationEngine-cn.js"> </script> <link type="text/css" rel="stylesheet" href="./res/css/validationEngine.jquery.css" /> <title>JQuery Validation 1.7 Demo</title> <script type="text/javascript"> $(function() { //表单验证 $("#formId").validationEngine({ validationEventTriggers : "keyup blur", promptPosition : "centerRight", success : false, failure : function() { } }); }); function submitForm() { if ($.validationEngine.submitValidation("#fromId") == false) { $("#fromId").submit(); } } function deletePop(){ $.validationEngine.closePrompt('.formError',true); } </script> <style type="text/css"> div{ margin-bottom: 20px; } </style> </head> <body> <form id="formId" class="formular" action="result.jsp" method="post"> <div> 验证输入框的必填、只允许字母、特殊字符、长度,这里就不对日期进行验证了,因为日期我们一般都使用JQuery组件不会有格式错误的<br /> <input type="text" id="input" class="validate[required,length[1,3],custom[onlyLetter],custom[SpecialCharacters]] text-input"><br> 邮箱验证<br/> <input type="text" name="email" id="email" class="validate[required,custom[email]] text-input"/><br> Telephone<br/> <input class="validate[required,custom[telephone]] text-input" type="text" name="telephone" id="telephone" /> </div> <div> 复选框验证,这里验证最少选择两个<br/> <input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="interest" id="maxcheck1"/> <label for="maxcheck1">唱歌</label> <input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="interest" id="maxcheck2"/> <label for="maxcheck2">跳舞</label> <input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="interest" id="maxcheck3"/> <label for="maxcheck3">电脑</label> </div> <div> 下拉框验证<br/> <select name="language" id="language" class="validate[required,mustSelect[无]]"> <option value="无">Please Select</option> <option value="Java">Java</option> <option value="NET">NET</option> <option value="Android">Android</option> </select> </div> <div> 两次输入是否一致验证<br/> <input class="validate[required,length[6,11]]" type="password" name="password" id="password" /><br/> <input class="validate[required,confirm[password]]" type="password" name="repassword" id="repassword" /> </div> <div> textarea验证<br/> <textarea class="validate[required,length[6,300]] text-input" name="comments" id="comments"> </textarea> </div> <div> <input type="button" onclick="$.validationEngine.buildPrompt('.hand','这是我手动添加','error')" value="手动添加一个提示"><br/> <input type="text" class="hand"> </div> <div> <input type="button" onclick="$.validationEngine.loadValidation('#date')" value="手动再次触发验证"><br/> <input class="validate[required,custom[date]] text-input" type="text" name="date" id="date" /> </div> <div> 说明:以上只是说了一下项目中常用的验证,具体的可以查看下载的JS库里包含的Demo以及jquery.validationEngine-cn.js里包含的正则验证规则 </div> <input type="button" onclick="deletePop()" value="删除所有提示"> <input type="button" onclick="submitForm()" value="保存"> </form> </body> </html>
说明:
1、 这里的 checkbox 提示显示位置还没有好的办法解决;
2 、这里需要注意的是不同的版本对应的 jquery.validationEngine.js 和 jquery.validationEngine-cn.js 需要对应,比如有的版本中的密码两次输入是否一致有的是 confirm 而有的是 equals ,无论是哪一个,上面两个 js 都必须要统一,不能一个是 confirm 一个是 equals ;
注意这里面以新版本 2.6 来说吧,老版本有的地方可能不一样
1 、 2.6 版本中的输入框验证多个时,会同时显示多个错误,直到没有错误,而 1.7 中没有
2 、下拉框的选择, 2.6 的方式时
<select name="language" id="language" class="validate[required]"> <option value="">- Please Select -</option> <option value="Java">Java</option> <option value="NET">NET</option> <option value="Android">Android</option> </select>
而1.7的方式是
<select name="language" id="language" class="validate[mustSelect[无]]"> <option value="无">- Please Select -</option> <option value="Java">Java</option> <option value="NET">NET</option> <option value="Android">Android</option> </select>
项目中的感受,在项目中引入需要的 JS 库 or Jar 包时最好自己手动去官网下载,然后引入,不要上来就直接引入上一个项目中用到的 JS 库 or Jar 包。因为一来这样我们自己可以更加熟悉这些 JS 库 or Jar 包,二来直接引入上一个项目中的可能对其源码进行了特定条件下的修改或者版本过低。
发表评论
-
js怎么控制textarea滚动条定位在光标的位置
2014-05-27 15:10 2161如题:先blur,后focus。 ... -
js 禁止鼠标滑轮滚动的事件
2014-05-22 19:00 1824如题,代码如下: // left: 37, up: ... -
网页上“分享”的实现
2012-12-06 13:40 961看看网页上分享是如何实现的吧 http://www.j ... -
用iframe模拟ajax上传文件
2012-12-05 08:57 2401项目中同事使用AjaxFrom上传文件时后台保存成功,而前台确 ... -
AjaxFrom
2012-11-30 13:24 1035项目中使用了AjaxFrom,静下心来看了看AjaxFr ... -
学会读JQuery等JS插件源码
2012-12-06 08:37 2048看了 http://my24 ... -
打开对话框时,设置焦点到 input 域失效
2012-12-25 08:22 1590当打开对话框时,想设置焦点到 input 域。使用的是 ... -
js锚点定位
2012-09-09 22:09 1745<a name="ST"> ... -
JQuery获取Radio选中的值
2012-08-31 14:57 2113JS: var type = $("input:[ ... -
使用jQuery清空file文件域的方法
2012-11-08 08:54 1094一般来说,在对一个文件域(input type=”file”) ... -
input提示
2012-08-21 16:46 1342效果图: 代码: <!DOCTYPE html ... -
JS(DOM)对象和JQuery对象的相互转换
2012-08-17 00:06 2729在项目中如果涉及js操作比较多的时候,经常需要js对象和jqu ... -
判断某个元素是否在js数组中
2012-08-16 10:43 0Array.prototype.S = String.fro ... -
SCRIPT1028: Expected identifier, string or number
2012-07-18 00:18 3403解决方案是因为js里的逗号多了一个。 "requi ... -
JS中的replaceAll方法
2012-03-16 16:25 2718今天做项目时遇到这样一个问题,就是说需要将字符串中的某个字符全 ... -
IE8下的一个另类
2012-03-15 16:55 1192今天项目中遇到一个问题,发现在IE8下的这段代码: var ... -
Js/JQuery 获取下拉框值
2012-02-17 21:19 2603今天做项目时,遇到获取下拉框选项的值,发现一个没太注意的 ... -
JS实现关键词高亮
2012-02-09 21:04 4336想起以前做博客系统时,对搜索时的关键字做高亮时没搞出来,无聊之 ... -
【转】现在浏览器的工作原理
2012-02-07 22:21 1422简介 浏览器可以被认为是使用最广泛的软件,本文将介绍浏 ... -
js设置页面没有鼠标右击
2012-02-01 23:14 1413以前在做WebQQ的时候涉及到鼠标右击没有反应的功能,虽然很久 ...
相关推荐
jQuery.validationEngine 中文验证
jquery 校验插件、不用写坑爹的 取值和正则比较了 http://blog.csdn.net/dandandeshangni/article/details/47339781
(五)struts2- 2.3.15.3 spring3.2.4 mybatis-3.2.3 jquery.validationEngine表单验证
NULL 博文链接:https://wanglu271991027.iteye.com/blog/1589737
jQuery.Validation.Engine 验证控件
主要介绍了JQuery.validationEngine表单验证插件(推荐)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
Validation Engine是一款基于Jquery的js表单验证插件。相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合。
一个很不错的验证框架,支持表单验证,单个字段验证,函数验证,样式很不错!
强大的表单验证控件,验证表单的正确性。
前端项目-jQuery-Validation-Engine,jquery验证引擎是一个javascript插件,旨在验证浏览器中的表单字段(即6-8、Chrome、Firefox、Safari、Opera 10)。这个插件提供了视觉上吸引用户注意的提示。
对jquery-validateEngine验证框架的一个小demo,内附简单的使用说明
NULL 博文链接:https://xiaofeng.iteye.com/blog/642233
jquery校验样式 css文件
(六)struts2- 2.3.15.3 spring3.2.4 mybatis-3.2.3 jquery.validationEngine ajax表单验证 数据库重复
jQuery-Validation-Engine-master非常好的jquery验证表单控件
jQuery.validationEngine v3.1.0 寻找官方贡献者 这个项目已经进行了7年多了,现在我仅通过请求请求的贡献来维护该项目。 但是,我很乐意帮助提高代码质量并保持可接受的未解决问题。 概括 jQuery验证引擎是一个...
jquery validation jquery ui validation Engine验证插件
核心内容: jquery.validationEngine.js
jQuery Validation Engine v2.6.2的Ciaoca中文增强版,更多介绍见:http://code.ciaoca.com/jquery/validation-engine/
修复remote时要改为同步的问题。其实只需要进行下面的修改