不错的jquery验证框架-form validation使用总结

前天看了不错的jquery验证框架这个帖子，自己下在下来看看，感觉还不错。就自己动手试一试。希望大家多多拍砖。 自己汉化了一下，官方只有英文的。 下载地址：http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/ formvalidator.html如下： Java代码

User informations

Desired username (ajax validation, only karnius is available) : //ajax验证用户名的地方 First name (optional) Last name :

Radio Groupe :
radio 1: radio 2: radio 3:

Minimum 2 checkbox :

Date : (format YYYY-MM-DD) Favorite sport 1: Choose a sportTennisFootballGolf Favorite sport 2: Choose a sportTennisFootballGolf Age : Telephone : mobilephone : chinese : url : zipcode : ip : qq :

Password

Password : Confirm password :

Email

Email address : Confirm email address :

Comments

Comments :

Conditions

Checking this box indicates that you accept terms of use. If you do not accept these terms, do not use this website :

I accept terms of use :

---

jquery.validationEngine-cn.js如下： Java代码 (function($) { $.fn.validationEngineLanguage = function() {}; $.validationEngineLanguage = { newLang: function() { $.validationEngineLanguage.allRules = {"required":{ // Add your regex rules here, you can take telephone as an example "regex":"none", "alertText":"* 非空选项.", "alertTextCheckboxMultiple":"* 请选择一个单选框.", "alertTextCheckboxe":"* 请选择一个复选框."}, "length":{ "regex":"none", "alertText":"* 长度必须在 ", "alertText2":" 至 ", "alertText3": " 之间."}, "maxCheckbox":{ "regex":"none", "alertText":"* 最多选择 ",//官方文档这里有问题 "alertText2":" 项."}, "minCheckbox":{ "regex":"none", "alertText":"* 至少选择 ", "alertText2":" 项."}, "confirm":{ "regex":"none", "alertText":"* 两次输入不一致,请重新输入."}, "telephone":{ "regex":"/^(0[0-9]{2,3}/-)?([2-9][0-9]{6,7})+(/-[0-9]{1,4})?$/", "alertText":"* 请输入有效的电话号码,如:010-29292929."}, "mobilephone":{ "regex":"/(^0?[1][358][0-9]{9}$)/", "alertText":"* 请输入有效的手机号码."}, "email":{ "regex":"/^[a-zA-Z0-9_/./-]+/@([a-zA-Z0-9/-]+/.)+[a-zA-Z0-9]{2,4}$/", "alertText":"* 请输入有效的邮件地址."}, "date":{ "regex":"/^(([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29)$/", "alertText":"* 请输入有效的日期,如:2008-08-08."}, "ip":{ "regex":"/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)/.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/", "alertText":"* 请输入有效的IP."}, "chinese":{ "regex":"/^[/u4e00-/u9fa5]+$/", "alertText":"* 请输入中文."}, "url":{ "regex":"/^[a-zA-z]://[^s]$/",//这些验证请自己加强 "alertText":"* 请输入有效的网址."}, "zipcode":{ "regex":"/^[1-9]/d{5}$/", "alertText":"* 请输入有效的邮政编码."}, "qq":{ "regex":"/^[1-9]/d{4,9}$/", "alertText":"* 请输入有效的QQ号码."}, "onlyNumber":{ "regex":"/^[0-9]+$/", "alertText":"* 请输入数字."}, "onlyLetter":{ "regex":"/^[a-zA-Z]+$/", "alertText":"* 请输入英文字母."}, "noSpecialCaracters":{ "regex":"/^[0-9a-zA-Z]+$/", "alertText":"* 请输入英文字母和数字."}, "ajaxUser":{ "file":"validate.action",//ajax验证用户名，会post如下参数：validateError ajaxUser；validateId user；validateValue cccc "alertTextOk":"* 帐号可以使用.", "alertTextLoad":"* 检查中, 请稍后...", "alertText":"* 帐号不能使用."}, "ajaxName":{ "file":"validateUser.php", "alertText":"* This name is already taken", "alertTextOk":"* This name is available", "alertTextLoad":"* Loading, please wait"} } } } })(jQuery); $(document).ready(function() { $.validationEngineLanguage.newLang() }); (function($) { $.fn.validationEngineLanguage = function() {}; $.validationEngineLanguage = { newLang: function() { $.validationEngineLanguage.allRules = {"required":{ // Add your regex rules here, you can take telephone as an example "regex":"none", "alertText":"* 非空选项.", "alertTextCheckboxMultiple":"* 请选择一个单选框.", "alertTextCheckboxe":"* 请选择一个复选框."}, "length":{ "regex":"none", "alertText":"* 长度必须在 ", "alertText2":" 至 ", "alertText3": " 之间."}, "maxCheckbox":{ "regex":"none", "alertText":"* 最多选择 ",//官方文档这里有问题 "alertText2":" 项."}, "minCheckbox":{ "regex":"none", "alertText":"* 至少选择 ", "alertText2":" 项."}, "confirm":{ "regex":"none", "alertText":"* 两次输入不一致,请重新输入."}, "telephone":{ "regex":"/^(0[0-9]{2,3}/-)?([2-9][0-9]{6,7})+(/-[0-9]{1,4})?$/", "alertText":"* 请输入有效的电话号码,如:010-29292929."}, "mobilephone":{ "regex":"/(^0?[1][358][0-9]{9}$)/", "alertText":"* 请输入有效的手机号码."}, "email":{ "regex":"/^[a-zA-Z0-9_/./-]+/@([a-zA-Z0-9/-]+/.)+[a-zA-Z0-9]{2,4}$/", "alertText":"* 请输入有效的邮件地址."}, "date":{ "regex":"/^(([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29)$/", "alertText":"* 请输入有效的日期,如:2008-08-08."}, "ip":{ "regex":"/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)/.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/", "alertText":"* 请输入有效的IP."}, "chinese":{ "regex":"/^[/u4e00-/u9fa5]+$/", "alertText":"* 请输入中文."}, "url":{ "regex":"/^[a-zA-z]://[^s]$/",//这些验证请自己加强 "alertText":"* 请输入有效的网址."}, "zipcode":{ "regex":"/^[1-9]/d{5}$/", "alertText":"* 请输入有效的邮政编码."}, "qq":{ "regex":"/^[1-9]/d{4,9}$/", "alertText":"* 请输入有效的QQ号码."}, "onlyNumber":{ "regex":"/^[0-9]+$/", "alertText":"* 请输入数字."}, "onlyLetter":{ "regex":"/^[a-zA-Z]+$/", "alertText":"* 请输入英文字母."}, "noSpecialCaracters":{ "regex":"/^[0-9a-zA-Z]+$/", "alertText":"* 请输入英文字母和数字."}, "ajaxUser":{ "file":"validate.action",//ajax验证用户名，会post如下参数：validateError ajaxUser；validateId user；validateValue cccc "alertTextOk":"* 帐号可以使用.", "alertTextLoad":"* 检查中, 请稍后...", "alertText":"* 帐号不能使用."}, "ajaxName":{ "file":"validateUser.php", "alertText":"* This name is already taken", "alertTextOk":"* This name is available", "alertTextLoad":"* Loading, please wait"} } } } })(jQuery); $(document).ready(function() { $.validationEngineLanguage.newLang() }); 部分jquery.validationEngine.js Java代码 /* AJAX VALIDATION HAS ITS OWN UPDATE AND BUILD UNLIKE OTHER RULES */ if(!ajaxisError){ $.ajax({ type: "POST", url: postfile, async: true, data: "validateValue="+fieldValue+"&validateId="+fieldId+"&validateError="+customAjaxRule,//+extraData,//自己把其中的+extraData去掉了，不然后面的ajax验证有问题。 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"); } } }, /* AJAX VALIDATION HAS ITS OWN UPDATE AND BUILD UNLIKE OTHER RULES */ if(!ajaxisError){ $.ajax({ type: "POST", url: postfile, async: true, data: "validateValue="+fieldValue+"&validateId="+fieldId+"&validateError="+customAjaxRule,//+extraData,//自己把其中的+extraData去掉了，不然后面的ajax验证有问题。 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"); } } }, struts.xml文件： Java代码  

msg//jsonplugin-0.32.jar  

msg//jsonplugin-0.32.jar validateAction Java代码 public String vali() { ActionContext ac = ActionContext.getContext(); HttpServletRequest request = (HttpServletRequest) ac .get(ServletActionContext.HTTP_REQUEST); String validateId = request.getParameter("validateId"); logger.info("vali() - String validateId=" + validateId); String validateValue = request.getParameter("validateValue"); String validateError = request.getParameter("validateError"); logger.info("vali() - String validateError=" + validateError); //注意下面的顺序，感觉这是个缺陷之一，不过可以在jquery.validationEngine.js更改， jsonValidateReturn.add(validateId); jsonValidateReturn.add(validateError); if(validateValue.equals("chen")) jsonValidateReturn.add("true"); else jsonValidateReturn.add("false"); return SUCCESS; } public String vali() { ActionContext ac = ActionContext.getContext(); HttpServletRequest request = (HttpServletRequest) ac .get(ServletActionContext.HTTP_REQUEST); String validateId = request.getParameter("validateId"); logger.info("vali() - String validateId=" + validateId); String validateValue = request.getParameter("validateValue"); String validateError = request.getParameter("validateError"); logger.info("vali() - String validateError=" + validateError); //注意下面的顺序，感觉这是个缺陷之一，不过可以在jquery.validationEngine.js更改， jsonValidateReturn.add(validateId); jsonValidateReturn.add(validateError); if(validateValue.equals("chen")) jsonValidateReturn.add("true"); else jsonValidateReturn.add("false"); return SUCCESS; } jquery.validationEngine.js要更改的地方： Java代码 success: function(data){ // GET SUCCESS DATA RETURN JSON data = eval( "("+data+")"); // GET JSON DATA FROM PHP AND PARSE IT ajaxisError = data.jsonValidateReturn[2];//这里官方文档写死了，可以根据自己需求更改。 customAjaxRule = data.jsonValidateReturn[1];//这里官方文档写死了，可以根据自己需求更改。 ajaxCaller = $("#"+data.jsonValidateReturn[0])[0]; fieldId = ajaxCaller; ajaxErrorLength = $.validationEngine.ajaxValidArray.length; existInarray = 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; } success: function(data){ // GET SUCCESS DATA RETURN JSON data = eval( "("+data+")"); // GET JSON DATA FROM PHP AND PARSE IT ajaxisError = data.jsonValidateReturn[2];//这里官方文档写死了，可以根据自己需求更改。 customAjaxRule = data.jsonValidateReturn[1];//这里官方文档写死了，可以根据自己需求更改。 ajaxCaller = $("#"+data.jsonValidateReturn[0])[0]; fieldId = ajaxCaller; ajaxErrorLength = $.validationEngine.ajaxValidArray.length; existInarray = 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; } 用到了jsonplugin-0.32.jar这个包在附件里面，其他struts的包，自己添加。