(转) 主题：Jquery form validate验证框架（修改与扩展）二

最新推荐文章于 2024-05-18 12:23:10 发布
最新推荐文章于 2024-05-18 12:23:10 发布
阅读量97 收藏
点赞数
分类专栏： JQuery 文章标签： 框架 jQuery Ajax json CSS ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sealbird/article/details/83679908
版权
最近在项目中要用到验证，所以重新看了下jquery的一个验证框架。
[b][u] 作者已经更新到1.7 官方网站：A jQuery inline form validation, because validation is a mess [/u][/b]
此版本是在bluespring+官方1.7的基础上修改的。感谢bluespring。
bluespring：原帖：配置超简单的Jquery form validate验证框架（修改与扩展）

0.2版本小小的bug修改。

修改地方：
Xml代码
/** 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
*/

/** 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的提交参数，和返回参数
Js代码 
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;   
                                    }   
                                }   
                            }   
                        }   
                    });   
                }  

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;
                                    }
                                }
                            }
                        }
                    });
                }

在服务端的代码只要这样就可以了：
Java代码 
/**  
     * 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;   
    }  

/**
	 * 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的，欢迎大家提出，继续完善这个验证框架。
sealbird
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery内置验证(validate)使用方法示例(表单验证)
10-26
主要介绍了jquery内置验证(validate)使用方法示例,在做表单验证的时候可以用到，下面看代码使用方法
jQuery Validate验证框架经典大全
11-26
jQuery校验官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation ...[removed]/validate/jquery.validate.min.js">[removed] 注：<%=request.getContextPath() %>返回web项目
jQuery-validate验证一个页面存在多个from表单。
qq_44061768的博客
11-28 1314
最初只有一个from的时候一直是这样校验的（校验规则请根据需求自行填写）： $("#form1").validate({ onkeyup: false, rules:{}, messages: {}, focusCleanup: true }); 后来加到两个from，发现上述方法只对一个from生效，写成如下这样也不好使，依然只生效一个： $("#form1").validate({ onkeyup: false, rules:{}, messages: {},
jQueryValidate 插件（表单验证功能）
simple_smile_sun的博客
07-05 8085
validate表单验证插件
Jquery的validate表单验证
Millet
12-20 2687
Jquery的validate的表单验证功能学习
jQuery表单校验 Validation
zmm0420的专栏
12-09 543
使用到的插件： jquery.js jquery.tools.js jquery.validate.js jquery.validate.methods.js 1、html页面（使用到了freemarker） 创建兑换活动编辑兑换活动 以下信息填写有误,请重新填写
Jquery form validate验证框架（修改与扩展）二
matychen
08-02 197
最近在项目中要用到验证，所以重新看了下jquery的一个验证框架。 作者已经更新到1.7 [b]官方网站：[/b][url=http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/]A jQuery inline form validation, b...
jQuery—validate验证框架的简单使用
Tuerlechat，的博客
09-20 512
jQuery—validate验证框架的小知识
jQuery Validate验证框架详解(推荐)
10-20
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。有兴趣的可以了解一下。
jquery validate 自定义验证方法介绍 日期验证
12-11
jquery validate有很多验证规则，但是更多的时候，需要根据特定的情况进行自定义验证规则。 这里就来聊一聊jquery validate的自定义验证。 jquery validate有一个方法，可以让用户来自定义验证规则。 案例一： 代码...
jquery-validate:jquery-validate 插件
06-01
jquery-验证 jquery-validate 插件 安装 使用安装： $ component install virtru-components/jquery-validate 应用程序接口 执照 麻省理工学院
jQuery.form和jQuery.validate的使用
williamHappy的博客
01-05 1878
jquery.form的两种提交方式方式1：ajaxFormajaxForm方式必须先绑定表单，它一般在$(document).ready(function(){})中定义，他能让表单在不刷新页面的情况下post到目标，例：$(document).ready(function(){ $('#updateForm').ajaxForm(function(){ alert("aja
Gin框架中关于终止中间件的后续逻辑执行的讲解
qq_63644576的博客
05-17 284
当我们在中间件中终止后续逻辑执行后，Gin会停止调用下游的中间件和路由处理器。有些时候，我们可能需要在中间件中终止后续逻辑的执行，比如当用户没有登录或者请求的方法不支持时。在Gin中，我们可以通过返回一个错误来终止中间件的后续逻辑执行。这个错误会被传递给下游的中间件和路由处理器，如果它们也不能处理这个错误，那么最终会被传递给错误处理器。在Gin框架中，我们可以使用中间件来终止后续逻辑的执行，这对于实现某些业务逻辑非常有用。如果用户没有登录，中间件会返回一个401错误，并终止后续逻辑的执行。
Python中的requests.post的参数json与参数data有什么区别
但老师
05-17 284
在我们自己搭建web或者爬虫的时候, 都需要用到requests这个第三方模块, 大部分时候我们使用的都是其中的data参数, 但是偶尔也需要用到json。
uni-app环境变量 & 动态配置manifest.json
每天都要努力学习哦~~
05-18 638
1.需要本地调试时，点击HBuilder X工具栏“运行”，选择自定义的对应的环境；2.代码中通过获取配置的变量，或者全局注册或者局部引入env.js 通过 ENV_CONFIG[process.env.UNI_SCRIPT].requestBaseUrl获取3.发布时, 点击HBuilder X工具栏“运行”，选择自定义的对应的环境,编译后打开微信开发者工具或者支付宝开发者工具,上传即可(运行的哪个环境,上传的就是哪个环境),也可以点击HBuilder X工具栏 "发行" ,选择自定义的对应的环境。
springboot接口同时接收文件和json数据
最新发布
lovebosom的博客
05-18 140
MultipartFile file HttpMediaTypeNotSupportedException
HarmonyOS应用模型Stage基本介绍
编程小栈
05-13 806
HarmonyOS应用模型概况。一般来说现在的鸿蒙应用使用的模型都是stage模型，之前的FA模型，现在已经被弃用了。就在本博客中，我们将会介绍一些这个模型下的一些基本重要的概念
Delphi7：SuperObject 的示例
程序猿视角
05-15 446
另外，由于 Delphi 7 是一个相对较旧的版本，如果你打算在新的项目中使用 JSON 功能，建议考虑升级到更新的 Delphi 版本或使用其他现代的 JSON 库，这样可以获得更好的性能和更多的功能。不是一个 Delphi 7 自带或官方的库，但可能是指一些开源的 JSON 解析库，比如。务必参考你所使用的库的官方文档或示例代码以确保正确性。请注意，上述代码是基于假设的示例，并且可能需要根据你实际使用的。如果你有一个 JSON 格式的字符串，你可以使用。或类似的方法来设置和获取 JSON 对象的值。
jquery validate 前端验证框架
05-22
jQuery Validate 是一个轻量级的 jQuery 插件，用于在前端进行表单验证。它提供了丰富的验证规则和项，可以很方便地对表单进行种类型的验证，如必填、邮箱、、密码等。使用 Validate 可以减轻服务器的负担，提高用户体验。 使用 jQuery Validate 只需要在页面引入 jQuery 和 jQuery Validate 的 js 文件，然后通过调用 validate() 方法来初始化表单验证。例如： ```javascript $(document).ready(function() { $("#myform").validate({ rules: { username: { required: true, minlength: 2 }, password: { required: true, minlength: 6 }, email: { required: true, email: true }, phone: { required: true, digits: true, minlength: 11, maxlength: 11 } }, messages: { username: { required: "请输入用户名", minlength: "用户名至少包含两个字符" }, password: { required: "请输入密码", minlength: "密码至少包含六个字符" }, email: { required: "请输入邮箱", email: "请填写正确的邮箱格式" }, phone: { required: "请输入手机号码", digits: "手机号码只能包含数字", minlength: "手机号码必须为11位", maxlength: "手机号码必须为11位" } } }); }); ``` 在这个例子中，我们定义了一个名为 `myform` 的表单，并为其中的各个字段定义了不同的验证规则和提示信息。通过调用 `validate()` 方法，我们可以将这些规则应用到表单中，从而实现前端验证。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值