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


Posted in Javascript onDecember 12, 2014

validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngine验证表单的形式有几种方式:

1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的.

2 使用ajax提交表单,但是没有使用ajax验证.

         这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例如:

//验证不通过时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验证不通过也能提交表单,关于这种情况,网上很多例子是改源码的,下面是截图:

.这种方法对于目前这种情况可行,这种修改的方式本身就不建议,可能对其它地方产生影响.我发现的其中一个就是当下面这种情况时:

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(多个控件使用逗号分隔开).

<form method="post" id="ajaxForm2Controls" action="admin/user/savePro.htm" control="userName">

在每个需要验证的控件上加上两个属性url(ajax请求的地址)和errror(不通过时的提示信息)

<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当中声明两个全局数组

var controlId = new Array();  //保存验证不通过的控件ID

var errors = new Array() ;  //保存验证不通过的提示信息

思路是这个的获取form标签上的control属性上的值(使用逗号分隔获取每个控件ID),使用ajax遍历请求,当验证不通过时 将控件ID和提示信息添加到controlId 和 errors 中,并且提示信息.当提交表单时判断controlId 是否为空,不为空则循环显示提示信息.

$(function() {    

    var ajaxForm2Controls = $("form#ajaxForm2Controls") ;  

    //表单提交时  

    $(ajaxForm2Controls).submit(function() {  

        ajaxForm2Control(ajaxForm2Controls) ;  

        return false ;  

    }) ;  

    //失去焦点时验证控件  

    valControls(ajaxForm2Controls) ;  

}); 

 表单提交方法:

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  

       }  

    });  

} 

 为表单添加焦点事件

//表单需要验证的控件  

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() ;  

                   }  

               }  

            });  

        }) ;  

    }  

} 
  

错误提示信息:

//弹出信息  

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是否有值就可以了.

Javascript 相关文章推荐
JavaScript中split() 使用方法汇总
Apr 17 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
javascript如何定义对象数组
Jun 07 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 Javascript
node.js +mongdb实现登录功能
Jun 18 Javascript
javascript实现时钟动画
Dec 03 Javascript
js 左右悬浮对联广告代码示例
Dec 12 #Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 #Javascript
jquery禁止回车触发表单提交
Dec 12 #Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 #Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 #Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 #Javascript
js使用递归解析xml
Dec 12 #Javascript
You might like
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
PHP写杨辉三角实例代码
2011/07/17 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
React数据传递之组件内部通信的方法
2017/12/31 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
Python完全新手教程
2007/02/08 Python
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
python3大文件解压和基本操作
2017/12/15 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
PageFactory设计模式基于python实现
2020/04/14 Python
美国美妆网站:B-Glowing
2016/10/12 全球购物
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
卫校中专生个人自我评价
2013/09/19 职场文书
夏季奶茶店创业计划书
2014/01/16 职场文书
股东协议书
2014/04/14 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
python+opencv实现视频抽帧示例代码
2021/06/11 Python
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技