前台验证框架jQuery-Validation-Engine
2014-08-19 23:57
225 查看
github地址:https://github.com/posabsolute/jQuery-Validation-Engine一个中文文档地址:http://code.ciaoca.com/jquery/validation_engine/普通的验证就不在说了,参考文档以及很明了了。这里写一个field的ajax验证吧。demo 实现功能是一个简单的唯一性的验证,通过jQuery-Validation-Engine的Ajax提交后台进行验证后返回信息。首先,给input class
将对应引入的语言包中的$.validationEngineLanguage.allRules 增加一个Ajax的验证规则,它已经给了注释的示例,我这里加的是
[/code]
<s:input path="title" class="form-control validate[required,ajax[ajaxUnique]] " id="fodderTitle" placeholder="图文消息标题" />
ajax[ajaxUnique]是ajax的验证ajaxUnique是需要配置的的验证规则,如下
将对应引入的语言包中的$.validationEngineLanguage.allRules 增加一个Ajax的验证规则,它已经给了注释的示例,我这里加的是
"ajaxUnique": { "url": "/portal/fodder/newValidateTitle.do", "extraData": "", "extraDataDynamic": ['#fodderTitle', '#fodderId'], "alertText": "* 抱歉,您输入的标题已经存在", "alertTextOk": " * 标题可用", "alertTextLoad": "* 正在验证..." }
参数说明: extraData是Ajax请求的参数 如 "extraData": "name=eric",提交到后台的参数名是name,值是Eric extraDataDynamic也是请求参数 配置 input中的id,请求时自动根据id获取input的value,提交到后台的参数名称也是这里配置的id alertText" "alertTextOk" "alertTextLoad 分别对应错误信息,验证通过,和正在验证时的信息,如何判断正确与否是根据后台的返回信息, 发送Ajax请求默认get方式 :[code]Client calls url?fieldId=id1&fieldValue=value1 ==> Server () 后台返回的格式应该是一个数组:fieldId和fieldValue默认会自动传到后台,根据你在那个input上配置了这个ajax验证规则 ,我这里在extraDataDynamic有重复配置了,实际上fodderTitle是可以直接从fieldValue中获取
Client receives <== ["id1", boolean, errorMsg] Server第一个值类型为 String,是接收到 fieldId 的值;第二个值类型为 Boolean,验证通过返回 true,不通过返回 false,第三个错误信息这里我没有用到下面看一下后台代码:
[/code]
@RequestMapping("/newValidateTitle.do") public @ResponseBody List<Object> validateTitle(String fodderTitle,String fodderId,String fieldId) { List<Object> res=new ArrayList<>(2); res.add(fieldId); if(CommonUtils.isEmpty(fodderTitle)){ res.add(false); return res; } List<WxFodderDto> list=fodderService.findByTitle(fodderTitle); if(CommonUtils.isNotEmpty(fodderId)){ if(list.isEmpty()||(list.size()==1&&list.get(0).getId().equals(fodderId))){ res.add(true); return res; } }else{ if(list.isEmpty()){ res.add(true); return res; } } res.add(false); return res; }
相关文章推荐
- 如何拦截JqueryValidationEngine的前台验证结果?
- jquery 悬浮验证框架 jQuery Validation Engine
- jQueryValidationEngine_JS验证框架(下)
- jQueryValidationEngine_JS验证框架(上)
- jquery.validationEngine+ajax验证
- jquery.validate_Validation_.js验证框架_帮助_手册_文档
- jQuery Validation Engine 表单验证
- jQuery Validation Engine 表单验证
- GBin1教程:使用jQuery插件jquery.validationEngine实现表单验证功能
- jQuery Validation Engine 表单验证
- jQuery Validation Engine 表单验证
- jQuery 表单验证插件 jQuery Validation Engine 使用
- JQuery实现Tooltip效果表单验证(jQuery Inline Form Validation Engine控件)
- Form表单验证用户名jQuery-Validation-Engine
- jQuery Validation Engine 表单验证
- jquery.validationEngine ajax验证 不通过也提交表单
- JQuery validationEngine 验证页面是否全部通过验证
- jQuery Validation Engine 表单验证
- liferay中使用jQuery Validation Engine进行ajax验证,不通过也提交表单的解决方案
- jQuery.validation.js实现前台表单验证