源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jquery+ajax验证不通过也提交表单问题处理

  • 时间:2022-02-02 10:59 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jquery+ajax验证不通过也提交表单问题处理
validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngine验证表单的形式有几种方式: 1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的. 2 使用ajax提交表单,但是没有使用ajax验证.          这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例如:
[u]复制代码[/u] 代码如下:
//验证不通过时return      if(!$("form#ajaxForm").validationEngine("validate")) return ;      $.ajax({         type: "POST",         url: $("#ajaxForm").attr("action"),         data: $("#ajaxForm").serialize(),         dataType: "html",         success: function(data){            xxxx     }      }); 
3 使用正常表单提交,但是有使用ajax验证,这种方式有点让人纠结了.当我们提交表单时ajax验证不通过也能提交表单,关于这种情况,网上很多例子是改源码的,下面是截图: .这种方法对于目前这种情况可行,这种修改的方式本身就不建议,可能对其它地方产生影响.我发现的其中一个就是当下面这种情况时:
[u]复制代码[/u] 代码如下:
function beforeCall(form,options){      if(window.console){          console.log("表单提交验证通过后,Ajax 提交之前的回调");      };      return true;  };  //   function ajaxValidationCallback(status,form,json,options){      if(window.console){          console.log(status);      };      if(status === true){          alert("the form is valid!");      }  };  jQuery(document).ready(function(){      jQuery("#formID").validationEngine({          ajaxFormValidation: true,  //是否使用 Ajax 提交表单          ajaxFormValidationMethod: 'post',  //设置 Ajax 提交时,发送数据的方式          onAjaxFormComplete: ajaxValidationCallback,  //表单提交,Ajax 验证完成后          onBeforeAjaxFormValidation: beforeCall  //表单提交验证通过后,Ajax 提交之前的回调      });  }); 
beforeCall 这个方法是不会调用的是不会调用的,所以还是不能使用 4 使用ajax验证并且使用ajax提交表单,这个方式就让人纠结了,上面修改源码的方式就不好用了. 对于第三种和第四种方式,解决方式如下: 在使用ajax验证的表单form标签上加上自定义属性control="userName,email" 属性值为要使用ajax验证的控件id(多个控件使用逗号分隔开).
[u]复制代码[/u] 代码如下:
<form method="post" id="ajaxForm2Controls" action="admin/user/savePro.htm" control="userName">
在每个需要验证的控件上加上两个属性url(ajax请求的地址)和errror(不通过时的提示信息)
[u]复制代码[/u] 代码如下:
<input class="textBox validate[required,minSize[6],maxSize[128],custom[onlyLetterNumber]]" type="text" name="userName" id="userName" maxlength="128" url="admin/user/uniqueName.htm" error="用户已存在..."/> 
javascript当中声明两个全局数组
[u]复制代码[/u] 代码如下:
var controlId = new Array();  //保存验证不通过的控件ID var errors = new Array() ;  //保存验证不通过的提示信息
思路是这个的获取form标签上的control属性上的值(使用逗号分隔获取每个控件ID),使用ajax遍历请求,当验证不通过时 将控件ID和提示信息添加到controlId 和 errors 中,并且提示信息.当提交表单时判断controlId 是否为空,不为空则循环显示提示信息.
[u]复制代码[/u] 代码如下:
$(function() {        var ajaxForm2Controls = $("form#ajaxForm2Controls") ;      //表单提交时      $(ajaxForm2Controls).submit(function() {          ajaxForm2Control(ajaxForm2Controls) ;          return false ;      }) ;      //失去焦点时验证控件      valControls(ajaxForm2Controls) ;  }); 
 表单提交方法:
[u]复制代码[/u] 代码如下:
function ajaxForm2Control(obj) {      //当存在错误信息时返回,找显示错误信息      if(controlId.length > 0) {          alertinfo() ;          return false ;       }      if(!$(obj).validationEngine("validate")) return false;  //验证没有使用ajax验证的控件(不是ajax验证的字段是可以正常验证的, 不通过就返回)      $.ajax({         type: "POST",         url: $(obj).attr("action"),         data: $(obj).serialize(),         dataType: "html",         success: function(data){             xxxxxx         }      });  } 
 为表单添加焦点事件
[u]复制代码[/u] 代码如下:
//表单需要验证的控件  function valControls(ajaxForm2Controls) {      //获取需要使用ajax验证的控件      var controlsStr = ajaxForm2Controls.attr("control") ;      //属性未定义时返回      if(typeof(controlsStr) === "undefined" || controlsStr.length <= 0) return ;      //分隔获取控件ID      var controls = controlsStr.split(/,/g) ;      for(var i in controls) {          //添加焦点离开事件          $("#" + controls[i]).blur(function() {            if($(this).val().length <= 0) return false;              //重新设置数组              controlId.length = 0;               errors.length = 0 ;              //错误信息              var error = $(this).attr("error") ;              $.ajax({                 type: "GET",                 url: $(this).attr("url"),                 data: $(this).serialize(),                 dataType: "text",                 success: function(data){                     if(data==="true") {                       //验证不通过将错误信息放入数组中                         controlId.push(controls[i]);                         errors.push(error) ;                         //提示信息                         alertinfo() ;                     }                 }              });          }) ;      }  } 
错误提示信息:
[u]复制代码[/u] 代码如下:
//弹出信息  function alertinfo() {      if(controlId.length > 0) {          for(var i in controlId) {              //validationEngine方法,为指定ID弹出提示.                          //用法:<span style="">$("#id").validationEngine("showPrompt","提示内容","load");                             //<span style="">在该元素上创建一个提示,3 种状态:"pass", "error", "load"</span></span>              $("#" + controlId[i]).validationEngine("showPrompt", errors[i], "error");          }       }  } 
这样当我们无论是第三种方式还是第四种方式提交表单,提交前调用controlId是否有值就可以了.
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部