中文api 地址  http://code.ciaoca.com/jquery/validation-engine/   和bootstarp 一起使用不会像easyui  验证那样生硬



修改版


原版 包涵实例代码

这里记录几点
ps:验证规则 validate[required] 必须要加上required ,其它加的自定义规则才会生效


$('#id').validationEngine('validate') 直接调用验证不会验证异步  一直都是false,如果不考虑使用异步或自己实现异步,可以考虑使用该方法验证

解决方法:
1.不使用$('#id').validationEngine('validate')的方法

  1. $addDiv.find('#addForm').submit();
提交

  1. $addDiv.find('#addForm').validationEngine({
  2. maxErrorsPerField:1,
  3. ajaxFormValidation: true,
  4. onBeforeAjaxFormValidation: function(){
  5. $addDiv.find('#addForm').attr("action","#");//这是把action修改为#是防止表单多次提交
  6. $.post((baseURL+'/housemanage/nhousegroupdef/add'),$($addDiv.find('#addForm')).serialize(),function(rec){
  7. if(rec.code == "0"){
  8. $.msg.success("新增成功!");
  9. nhousegroupdefglobal.sbtable.bootstrapTable("removeAll")
  10. nhousegroupdefglobal.sbtable.bootstrapTable('refresh');
  11. $addDiv.modal("hide")
  12. }else{
  13. $.msg.fail(rec.desc);
  14. }
  15. },"json").error(function(){
  16. $.msg.fail("新增失败!");
  17. });
  18. }
  19. });

在 初始化属性onBeforeAjaxFormValidation 定义提交前并验证完毕的方法即可

自定义规则的方法


  1. $.validationEngineLanguage.allRules.switch={
  2. "func": function(field,rules,i,options){
  3. if(!$(field).val()){
  4. return false;
  5. }
  6. return true;
  7. },
  8. "alertText": "* 请选择内容"
  9. }
  10. $.validationEngineLanguage.allRules.datecompare={
  11. "func": function(field,rules,i,options){
  12. if($('#regEndtime').val()&&$('#regBegintime').val()>$('#regEndtime').val()){
  13. return false;
  14. }
  15. return true;
  16. },
  17. "alertText": "* 报名开始时间不能大于报名截止时间,请修改!"
  18. }
  19. $.validationEngineLanguage.allRules.lookhousedatecompare={
  20. "func": function(field,rules,i,options){
  21. if($('#regEndtime').val()&&$('#lookhousetime').val()<$('#regEndtime').val()){
  22. return false;
  23. }
  24. return true;
  25. },
  26. "alertText": "* 看房时间必须大于报名截止时间,请修改!"
  27. }
  28. $.validationEngineLanguage.allRules.numcompare={
  29. "func": function(field,rules,i,options){
  30. if($('#maxNum').val()&&$('#minNum').val()>$('#maxNum').val()){
  31. return false;
  32. }
  33. return true;
  34. },
  35. "alertText": "* 成团最低人数必须不能大于成团最高人数,请修改!"
  36. }
  37. $.validationEngineLanguage.allRules.lookhousenameajax={
  38. "url": baseURL+"/housemanage/nhousegroupdef/vaild/lookhousename",
  39. "alertText": "* 看房团名称已被其它用户定义过,请修改!",
  40. "alertTextLoad": "* 正在确认名称是否有其他人使用,请稍等。"
  41. }

建议采用上面的方法 ,不用修改 原生的文件,直接在$.validationEngineLanguage.allRules 属性上扩展规则即可
也可采用继承的方法
  1. $.extend($.validationEngineLanguage.allRules,{
  2. switch:{
  3. "func": function(field,rules,i,options){
  4. if(!$(field).val()){
  5. return false;
  6. }
  7. return true;
  8. },
  9. "alertText": "* 请选择内容"
  10. }
  11. });

注意如果使用框架自带的ajax验证 后台代码返回

  1. @RequestMapping("/vaild/lookhousename")
  2. @ResponseBody
  3. public Object vaildLookHouseName()throws Exception{
  4. String fieldId = RequestUtil.getRequestParameter("fieldId");
  5. String fieldValue = RequestUtil.getRequestParameter("fieldValue");
  6. String backstr = RequestUtil.getRequestParameter("backstr");
  7. Object[] ret = null;
  8. try {
  9. if(backstr.equalsIgnoreCase(fieldValue)){
  10. ret = new Object[]{fieldId,true};
  11. }else{
  12. if(nhousegroupdefService.hasLookHouseName(fieldValue)){
  13. ret = new Object[]{fieldId,false};
  14. }else{
  15. ret = new Object[]{fieldId,true};
  16. }
  17. }
  18. }catch (Exception e){
  19. e.printStackTrace();
  20. logger.error(e.getMessage(), e);
  21. }
  22. return ret;
  23. }



2..使用$('#id').validationEngine('validate')的方法 , 由于使用自带的ajax需要动态传入两个参数的话


ps:不使用原框架对ajax自定义验证的时候
1.如果要跟框架一样提示的风格,成功就要消除错误信息,如果要隐藏错误框,使用:$('#ysfyHouse').parent().find("div[class=formError]").css({opacity: 0}) 并不会冲突的话设置透明度,原框架就是这么弄的,找遍了ajax不设置隐藏框的方法,都不合适 ,最后只能妥协加隐藏框,点保存的时候确认隐藏框的值

2.如果直接alert()的话 ,就只需要设置隐藏框就可以了


  1. $('#ysfyHouse').on('blur', function(){
  2. if(!$(this).val()||$('#ysfyHouse').validationEngine('validate')){ //必须等元素验证完毕才能执行下一步
  3. return;
  4. }
  5. $.post((baseURL+'/housemanage/nhousegroupdef/vaild/lookhousejoin'),{houseid:($("#ysfyHouseid").val()),groupid:(page_exchange_moudel.id)},function(rec){
  6. if(rec.code == "0"){
  7. if(rec.data.result){
  8. $('#ysfyHouse').validationEngine('showPrompt','楼盘已重复,请修改!','error');
  9. $("#ysfyHouseidajaxval").val("1")
  10. }else{
  11. $('#ysfyHouse').validationEngine('showPrompt','成功!','pass');
  12. $("#ysfyHouseidajaxval").val("0")
  13. }
  14. }else{
  15. alert(rec.desc);
  16. }
  17. },"json").error(function(){
  18. alert("请求失败!");
  19. });
  20. })




附件列表

jquery 悬浮验证框架 jQuery Validation Engine的更多相关文章

  1. jQuery Validate验证框架详解

    转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...

  2. 【转】jQuery Validate验证框架详解

    jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...

  3. jQuery Validate验证框架详解(转)

    jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...

  4. 【转】jquery validate验证框架与kindeditor使用需二次提交的问题

    原文:http://blog.csdn.net/wlsyn/article/details/11536399在使用jquery的验证框架对kindeditor富文本编辑器进行验证的过程中,发现提 交时 ...

  5. jQuery Validate验证框架与 jQuery ajaxSubmit的联合使用

    jQuery Validate验证框架自定义验证 第一步导入导入js库 <script src="<%=basePath%>static/js/jquery.js" ...

  6. atitit.jQuery Validate验证框架详解与ati Validate 设计新特性

    atitit.jQuery Validate验证框架详解与ati Validate 设计新特性 1. AtiValidate的目标1 2. 默的认校验规则1 2.1. 使用方式 1.metadata用 ...

  7. jQuery Validate验证框架详解(jquery.validate.min.js)

    原博客 jQuery Validate验证框架详解 jQuery校验官网地址:https://jqueryvalidation.org/ 一.导入js库 <script type="t ...

  8. jQuery Validate验证框架详解,提交前验证

    现在都用h5表单进行验证了,以下方式仅做回忆 https://www.runoob.com/jquery/jquery-plugin-validate.html <!DOCTYPE HTML P ...

  9. SpringMVC 使用验证框架 Bean Validation(上)

    SpringMVC 使用验证框架 Bean Validation(上) 对于任何一个应用而言在客户端做的数据有效性验证都不是安全有效的,这时候就要求我们在开发的时候在服务端也对数据的有效性进行验证. ...

随机推荐

  1. Informatica pmcmd命令

    pmcmd startworkflow -sv 集成服务名称 -d 配置域名称 -u  Administrator -p Administrator -f 文件夹名称 -wait 工作流名称例如: p ...

  2. 织梦(Dedecms) 5.1 feedback_js.php 注入漏洞

    漏洞版本: DEDECMS 5.1 漏洞描述: 同样是在magic_quotes_gpc=off的情况下可用 此漏洞可拿到后台管理员的帐号和加密HASH,漏洞存在文件plus/feedback_js. ...

  3. 再谈JavaScript的数据类型问题

    JavaScript的数据类型问题已经讨论过很多次了,但许多人还有许多书仍然沿用着错误的.混乱的一些观点,所以就再细讲一回. 提及这个讨论的原因在于argb同学在我的MSN博客上的一段回复,又更早的起 ...

  4. 函数y=sin(1/x)曲线

    该曲线在x趋近于零时振荡很剧烈,在远离零点时振荡越来越平缓. 图线: 代码: <!DOCTYPE html> <html lang="utf-8"> < ...

  5. Linq 使用注意

    今天在使用Linq的时候,查询很慢.仔细查看在知道,在in的后面跟的是个方法,这个方法返回一个集合. Linq只是语法糖,内部进行了封装.内部的实现也是遍历集合,找到满足条件的元素. 在in的后面使用 ...

  6. 关于angularjs中路由页面强制更新的问题

    有这么一个问题,在页面内路由页面跳转时,第一次跳入路由页面时是正常的,但是第二次会记住第一次时的状态,有时候并不想这样,想强制更新这个路由页面. 有一种方式就是使用 ui-sref-opts功能,我试 ...

  7. java实现顺序链表

    C&C++是那么难学,以至于我连指针是什么都不知道.所以只能学习java了. 如今想用java实现N年前学过“数据结构(c语言版)”却又是那么吃力! 慢慢练吧! 写此博客,仅标记自己学过数据结 ...

  8. volist 自增序号 分页如何实现?

    TP框架模板中如何生成自增数据 {$_GET['p']*10-10+$i} /* 分页序号计算    */ function addnum($k,$num){     return ($k +1 ) ...

  9. 怎样获取oracle dbid

    1.查询v$database获得 因为DBID在控制文件和数据文件里都存在记录,所以假设可以mount数据库就行查询v$database视图获得.  SQL> alter database mo ...

  10. [MSP430]入门之中的一个 总体认识

    这是由TI公司推出的一款比較单片机, 相对stm32来说简单些, 由于它是16位的,  所以我们在学习中可能也会像51一样,  直接操纵寄存器. TI设计这款单片机的初衷是, 让它用于低功耗的嵌入式设 ...