最近在项目中要用到验证，所以重新看了下jquery的一个验证框架。
作者已经更新到1.7
官方网站：A jQuery inline form validation, because validation is a mess
此版本是在
bluespring+官方1.7的基础上修改的。感谢
bluespring。
bluespring：原帖：
配置超简单的Jquery form validate验证框架（修改与扩展）
0.2版本小小的bug修改。
修改地方：
/** Inline Form Validation Engine 1.7, jQuery plugin
*
* Copyright(c) 2010, Cedric Dugas
* http://www.position-relative.net
*
* Form validation engine allowing custom regex rules to be added.
* Thanks to Francois Duquette and Teddy Limousin
* and everyone helping me find bugs on the forum
* Licenced under the MIT Licence
*
* bluespring 修改1.6.4.1
* 1.提供选项定制是否关闭提示框箭头 showArray
* 2.提供选项定制提示框是否在鼠标放上去的时刻出现还是一直出现 showOnMouseOver
* 3.提供选项定制input 效验错误样式
*
* Quentin 修改
* 1. 无法全部去掉红色边框的bug
*
* matychen 修改
* 1.把css 中的errorform的padding-bottom改为margin-bottom ，如果不改，在checkbox的时候会遮挡。
* 2.当showOnMouseOver为true时。增加处理checkbox时，下面被占用，自己减少了top的高度，如果不减少top的高度，在checkbox的时候会遮挡。
* 3.修复了ie6的select遮挡div的bug
* 4.增加验证规则存放的属性名称
* 5.修改了ajax的发送到客户端的参数名称，返回值不用数组，直接用json对象。
* 验证规则的名称validateError-->customAjaxRule
*/
一、 原作者的代码会出现这种情况，前提是要开起bluespring的鼠标悬停提示（showOnMouseOver为true）。不开起悬停提示不会出现这种情况。
发现是因为作者的设置div的padding，改为margin就不会有问题。祥见图片：
二、 当然在ie6下面会出现select遮挡div的情况，只要在div里面加个iframe就可以了：
没修改前：
修改后：
三、增加验证规则存放的属性名称
可以不用定义规则在class里面，自己写个属性也可以：$("#formID").validationEngine({validateAttribute: "validate"});
在input里面：<input value="" validate="validate[required,custom[noSpecialCaracters],length[0,20],ajax[ajaxUser]]" type="text" name="user" id="user" />
四、修改了ajax的提交参数，和返回参数
if (!ajaxisError) {
$.ajax({
type: "POST",
url: postfile,
//async: true,//要验证的值 验证值的名称 验证规则的名称validateError-->customAjaxRule
data: "validateValue=" + fieldValue + "&validateId=" + fieldId + "&customAjaxRule=" + customAjaxRule + "&extraData=" + extraData,
beforeSend: function () { // BUILD A LOADING PROMPT IF LOAD TEXT EXIST
if ($.validationEngine.settings.allrules[customAjaxRule].alertTextLoad) {
if (!$("div." + fieldId + "formError")[0]) {
return $.validationEngine.buildPrompt(ajaxCaller, $.validationEngine.settings.allrules[customAjaxRule].alertTextLoad, "load");
} else {
$.validationEngine.updatePromptText(ajaxCaller, $.validationEngine.settings.allrules[customAjaxRule].alertTextLoad, "load");
}
}
}, error: function (data, transport) {
$.validationEngine.debug("Ajax 错误: " + data.status + " " + transport);
}, success: function (data) { // GET SUCCESS DATA RETURN JSON
// jquery 已经转为json了，所以不要这句话，不然会报：missing ] after element list的错误
// data = eval("(" + data + ")"); // GET JSON DATA FROM PHP AND PARSE IT
// add by matychen 不用数组，直接用json对象。例如：{"validateId":"user","ajaxisError":false,"customAjaxRule":"ajaxUser"}
ajaxisError = data.ajaxisError; //true or false
customAjaxRule = data.customAjaxRule; //验证规则的名称
ajaxCaller = $("#" + data.validateId)[0]; //验证值的id
//
fieldId = ajaxCaller;
ajaxErrorLength = $.validationEngine.ajaxValidArray.length;
existInarray = false;
//对象就不能是"false"了
if (ajaxisError == false) { // DATA FALSE UPDATE PROMPT WITH ERROR;
_checkInArray(false); // Check if ajax validation alreay used on this field
if (!existInarray) { // Add ajax error to stop submit
$.validationEngine.ajaxValidArray[ajaxErrorLength] = new Array(2);
$.validationEngine.ajaxValidArray[ajaxErrorLength][0] = fieldId;
$.validationEngine.ajaxValidArray[ajaxErrorLength][1] = false;
existInarray = false;
}
$.validationEngine.ajaxValid = false;
promptText += $.validationEngine.settings.allrules[customAjaxRule].alertText + "<br />";
$.validationEngine.updatePromptText(ajaxCaller, promptText, "", true);
} else {
_checkInArray(true);
$.validationEngine.ajaxValid = true;
if (!customAjaxRule) {
$.validationEngine.debug("customAjaxRule没有返回值, 请检查. ");
}
if ($.validationEngine.settings.allrules[customAjaxRule].alertTextOk) { // NO OK TEXT MEAN CLOSE PROMPT
$.validationEngine.updatePromptText(ajaxCaller, $.validationEngine.settings.allrules[customAjaxRule].alertTextOk, "pass", true);
} else {
ajaxValidate = false;
$.validationEngine.closePrompt(ajaxCaller);
}
}
function _checkInArray(validate) {
for (x = 0; x < ajaxErrorLength; x++) {
if ($.validationEngine.ajaxValidArray[x][0] == fieldId) {
$.validationEngine.ajaxValidArray[x][1] = validate;
existInarray = true;
}
}
}
}
});
}
在服务端的代码只要这样就可以了：
/**
* Ajax验证用户名
*
* @param customAjaxRule
* 验证规则名称
* @param validateId
* 验证值的ID
* @param validateValue
* 验证值
* @return
*/
@RequestMapping(value = "/validateAjaxUser")
@ResponseBody
public Map<String, Object> validateAjaxUser(
@RequestParam("customAjaxRule") String customAjaxRule,
@RequestParam("validateId") String validateId,
@RequestParam("validateValue") String validateValue) {
logger.info("validateAjaxUser");
Map<String, Object> map = new HashMap<String, Object>();
// 验证用户名是否等于javaeye
if ("javaeye".equals(validateValue)) {
// 是否通过
map.put("ajaxisError", true);
} else {
map.put("ajaxisError", false);
}
// 验证规则的名称
map.put("customAjaxRule", customAjaxRule);
// 验证值的ID
map.put("validateId", validateId);
return map;
}
其他的修改请看附件源码；如果还有什么bug的，欢迎大家提出，继续完善这个验证框架。
分享到：
相关推荐
**jQuery Validate验证框架** jQuery Validate是一个非常流行的JavaScript库，它为HTML表单提供了强大的验证功能。这个插件简化了客户端的表单验证过程，使得在网页应用中实现数据验证变得快速且易于实施。它适用于...
通过以上介绍，我们可以看出 jQuery Validate 框架的强大之处，它提供了丰富的验证功能，允许开发者根据项目需求进行高度自定义，从而实现个性化的表单验证。在实际开发中，结合 CSS 和 JavaScript，可以打造出美观...
`jQuery Form Validate` 是一个基于 jQuery 的强大表单验证框架，它为开发者提供了一种简洁、高效的方式来验证用户在网页表单中输入的数据。这个框架使得开发者无需编写复杂的JavaScript代码，就能实现对表单字段的...
源码中，`Validator`类是整个验证框架的基石，它包含了验证规则、错误消息、错误容器等关键属性，以及各种验证方法和事件处理。 源码中的`addMethod`允许开发者扩展新的验证方法，`valid`方法则是验证表单元素的...
首先，使用`jQuery Validate`需要引入相关的文件，包括`jquery.validate.js`作为核心验证框架，`additional-methods.js`包含了一些额外的验证方法，`messages_cn.js`用于本地化消息，以及`jquery.validate.css`定义...
根据给定的信息，本文将详细介绍jquery-validate前端验证框架的相关知识点，包括其基本概念、使用方法以及部分具体的验证规则实现。 ### 一、jquery-validate简介 `jquery-validate`是一款基于jQuery的强大表单...
jQuery.validate.js是一款强大的JavaScript插件，专为jQuery框架设计，用于实现前端表单验证，提供了丰富的验证规则和自定义选项，使得开发者能够轻松地构建具有高效验证功能的网页。 一、jQuery.validate.js的核心...
以下是对这个验证框架的详细说明： ### 1. 插件简介 `jQuery Validate`通过与jQuery的无缝集成，使得验证用户输入变得简单快捷。它可以处理各种常见的验证需求，如必填项、电子邮件格式、URL、日期等，并且允许...
### jQuery.validate.js 验证框架知识点详述 #### （一）可选项(options) 在使用 `jQuery.validate.js` 验证框架时，可选项是配置验证行为的重要部分。这些选项允许开发者自定义验证过程中的多种行为，包括调试...
在这个“jquery validate验证示例”压缩包中，很可能包含了 `jQuery Validate` 插件的核心文件以及一些示例代码，帮助开发者快速理解和使用这个插件。 首先，`jQuery Validate` 的核心功能包括： 1. **基本验证**...
**二、jQuery验证框架的重要性** 前端验证不仅能够即时反馈用户输入错误，提高用户交互体验，还能减少服务器端的压力，避免无效请求。jQuery的验证框架提供了一套灵活、可定制的验证规则，使开发者可以快速构建表单...
《jQuery Validate插件详解与应用指南》 在Web开发领域，表单验证是不可或缺的一环，它能够确保用户输入的数据符合预设的规则，从而提高数据的准确性和系统的稳定性。jQuery Validate是一个强大的JavaScript库，专...
`jQuery Validate` 是一个强大的 JavaScript 库，专为 jQuery 框架设计，用于实现高效、灵活且易于使用的表单验证。它可以帮助开发者创建各种复杂的验证规则，确保用户输入的数据符合预设的要求，从而提高网站的安全...
标题中的“很不错的验证框架jquery”指的是jQuery Validation Plugin，这是一个非常流行且功能强大的JavaScript库，专门用于HTML表单验证。jQuery本身是一个轻量级的JavaScript库，极大地简化了DOM操作、事件处理和...
总的来说，`jQuery.validate.js` 提供了一个强大且灵活的框架，可以帮助开发者创建高效且用户体验良好的表单验证机制，从而确保收集到的数据准确无误。结合其丰富的自定义选项和预定义规则，可以适应各种复杂的验证...
**二、jQuery验证框架** jQuery验证框架是jQuery的一个插件，主要用于表单验证。它提供了丰富的配置选项和自定义规则，可以轻松实现对用户输入的实时检查，从而提高用户体验。这个框架能够轻松处理各种验证需求，如...
jQuery Validate是一个强大的JavaScript库，它为jQuery框架提供了简单易用的表单验证功能。这个插件以其灵活性和丰富的定制选项，深受开发者喜爱。本文将深入探讨jQuery Validate的使用方法、核心功能和常见应用场景...
### jQuery验证框架详解 #### 一、概述 jQuery Validation Plugin 是一个非常强大的验证插件，它可以帮助开发者轻松地实现客户端表单验证功能。此插件是基于jQuery开发的，因此可以充分利用jQuery的强大功能来简化...
**jQuery验证框架详解** jQuery Validate 是一个非常流行的前端验证插件，它为HTML表单提供了强大的验证功能。这个插件是jQuery库的一个扩展，能够帮助开发者轻松实现对用户输入数据的有效性检查，确保数据在提交前...
4. **自定义验证**：如果需要自定义验证规则，可以通过`$.fn.validate.extend()`方法扩展验证器。 ### 示例 ```html <form id="example-form"> 请输入有效的电子邮件地址"> 提交 </form> $(document).ready...