将jquery validate校验框架的remote异步验证设置为同步校验

简介: 将jquery validate校验框架的remote异步验证设置为同步校验

最近公司的项目中都是使用的jquery validate在做表单,感觉确实非常好用,很灵活,用起来很顺手。但也遇到了不少问题。在此记录一下。


       问题:当提交表单触发校验的时候,remote校验规则的结果不能及时返回,导致校验通过。


       场景:

10.jpg

             


                在机构管理的修改页面中,负责柜员要做有效性校验。代码如下:


//校验是否重复
             remote: {
               url: "ciforg/checkManTlr",     //后台处理程序
               type: "post",               //数据发送方式
               dataType: "json",           //接受数据格式 
               data: {                     //要传递的数据
                manTlr: function() {
                       return $("input[name='manTlr']").val();
                   },
                   bdtTdt: function() {
                       return $("input[name='bdtTdt']").val();
                   }
               }
           }

                   当输入一个不合法的值后,直接点击提交,触发整个表单的校验。


               预计出现的情况是:弹出提示框,“输入错误,请检查”。


                实际情况是:校验先通过,弹出确认修改的确认提示框,然后负责柜员的校验结果才显示出来。(负责柜员的文本框变红出现在确认弹窗之后)



原因分析:使用remote异步校验,当点击提交时,$("#ciforg").validate().form();方法没有等remote方法校验完,就返回了结果true。


    那么怎么让remote异步校验变成同步校验,及时返回校验结果呢?


 代码如下:    

{CSDN:CODE:rules:{
 manTlr:{//校验输入的柜员号是否存在
              rangelength:[6,6],
              digits:true,
              //校验是否重复
              remote: {
               url: "ciforg/checkManTlr",     //后台处理程序
               type: "post",               //数据发送方式
               dataType: "json",           //接受数据格式 
               cache:false,
               async:false,
               data: {                     //要传递的数据
                 manTlr: function() {
                       return $("input[name='manTlr']").val();
                   },
                   bdtTdt: function() {
                       return $("input[name='bdtTdt']").val();
                   }
               }
           }
           }}

关键是加上上图的红色部分的属性就好了。


当然你还可以使用自定义的方法,在其实使用ajax,设置同步来完成校验。


jQuery.validator.addMethod("phonesame", function(value, element) {    //用jquery ajax的方法验证电话是不是已存在  
      var flag = 1;  
      $.ajax({  
          type:"POST",  
          url:'tel.php',  
          async:false,                                             //同步方法,如果用异步的话,flag永远为1  
          data:{'tel':value},  
          success: function(msg){  
               if(msg == 'yes'){  
                   flag = 0;  
               }  
          }  
      });  
      if(flag == 0){  
          return false;  
      }else{  
          return true;  
      }  
  }, "sorry number have been exist");
目录
相关文章
|
7月前
|
Java 数据库 数据安全/隐私保护
基于SSM框架实现管科类考研自我管理系统(分前后台spring+springmvc+mybatis+maven+jsp+jquery)
基于SSM框架实现管科类考研自我管理系统(分前后台spring+springmvc+mybatis+maven+jsp+jquery)
|
5月前
|
JavaScript 前端开发 安全
使用jQuery Validate进行表单验证
使用jQuery Validate进行表单验证
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery Validate
jQuery Validate
58 4
|
3月前
|
JSON 安全 JavaScript
Web安全-JQuery框架XSS漏洞浅析
Web安全-JQuery框架XSS漏洞浅析
546 2
|
3月前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
21 1
|
3月前
|
JavaScript
jQuery - 设置内容和属性
jQuery - 设置内容和属性
63 2
|
3月前
|
JavaScript
jQuery - 设置内容和属性
jQuery - 设置内容和属性
63 14
|
3月前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
36 5
|
4月前
|
存储 JavaScript 前端开发
关于Django使用Jquery异步刷新
使用Django与jQuery结合实现异步刷新功能,不仅可以提升用户体验,还能提高应用的性能。通过上述的步骤,你可以在自己的Django项目中实现类似的异步数据更新功能。这种技术的关键是理解AJAX的工作原理,以及如何在Django后端创建响应AJAX请求的视图。通过实践这些技巧,你将能够创建更为动态和交互式的Web应用。
37 2
|
6月前
|
JavaScript 前端开发 开发者
使用jQuery Validate进行表单验证详解
使用jQuery Validate进行表单验证详解