首页 > 其他分享 >将jquery validate校验框架的remote异步验证设置为同步校验

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

时间:2022-12-07 17:04:14浏览次数:40  
标签:jquery function return 校验 柜员 manTlr remote


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

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

        场景:

                 

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

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

                              //校验是否重复
            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,

               data: {                     //要传递的数据
                manTlr: function() {
                       return $("input[name='manTlr']").val();
                   },
                   bdtTdt: function() {
                       return $("input[name='bdtTdt']").val();
                   }
               }
           }


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

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

  1. "phonesame", function(value, element) {    //用jquery ajax的方法验证电话是不是已存在  
  2. var flag = 1;  
  3.       $.ajax({  
  4. "POST",  
  5. 'tel.php',  
  6. //同步方法,如果用异步的话,flag永远为1  
  7. 'tel':value},  
  8. function(msg){  
  9. if(msg == 'yes'){  
  10.                    flag = 0;  
  11.                }  
  12.           }  
  13.       });  
  14.   
  15. if(flag == 0){  
  16. return false;  
  17. else{  
  18. return true;  
  19.       }  
  20.   
  21. "sorry number have been exist");  





标签:jquery,function,return,校验,柜员,manTlr,remote
From: https://blog.51cto.com/u_15905482/5919718

相关文章

  • jquery form表单.serialize()序列化后中文乱码问题原因及解决
    有时候我们需要使用ajax提交去提交form的值,这样就需要使用serialize()去获取form的值,但这样获取的值如果有中文,会乱码,原因和解决方法如下:原因:.serialize()自动调用了encodeU......
  • jQuery类库
    目录jQuery类库jQuery介绍jQuery优势jQuery内容jQuery版本jQuery对象知识补充标签对象与jQuery对象jQuery类库jQuery介绍jQuery类库类似python中的模块。IE浏览器:前端......
  • 前端第六课---jQuery查找标签,jQuery节点操作,jQuery事件绑定,Bootstrap页面框架
    昨日内容回顾BOM操作浏览器对象 1.window.open() 2.window.close() 3.window.location.href 4.window.history.forward()\back() 5.window.location.reload()......
  • Javascript-极速入门指南-3-jQuery使用教程
    内容概要jQuery类库类库jQuery简介jQuery的宗旨:Writeless,domore写的更少做的更多jQuery的特点为: 1.加载速度快 2.选择器更多更好用 3.一行代码走天下......
  • 去掉git提交校验
    到.git文件夹的hooks文件夹,找到pre-commit文件,删除即可......
  • jQuery实现侧边模块固定
    HTML代码:<divid="header">header</div><divid="sidebarWrap"><divid="sidebar">Sidebar</div></div><divid="main">Main</div><divid="footer">foot......
  • java 身份证号校验
    创建CardUtil工具类publicclassCardUtil{/***验证身份证真假*@paramcarNumber身份证号*@returnboolean*/publicstaticboolean......
  • 前端开发JS之BOM、DOM操作、事件、jQuery类库
    BOM操作DOM操作查找标签操作节点class与css操作事件事件实战案例jQuery类库标签对象与jQuery对象BOM操作全称:BrowserObjectModel指浏览......
  • 前端 BOM,DOM, jQuery
    BOM操作 //1.BOM(BrowserObjectModel)指的是浏览器对象模型,它会让JavaScript具备与浏览器交互的能力//2.一些BOM操作-1.window.open()//......
  • 前端基础之BOM和DOM,jQuery类库
    BOM操作BOM(BrowserObjectModel)是指浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”。window对象Window对象是客户端JavaScript最高层对象之一,由于window对......