手机网站form表单check神器——Validform(2)

简介: 手机网站form表单check神器——Validform

4. config配合ajaxpost可以使得一个ajax请求未结束时不再提交请求到服务端


我们可以先把下面这行代码注释掉,再来看一个form的运行方式,这样会更清晰


$.Tipmsg.p = null;// 通过验证的信息取消显示


第一次点击submit的时候,页面上提示“正在提交数据”

image.png



之后,服务端把处理信息返回到页面上。


image.png


假设服务端返回的信息返回的更慢一点,这时候我们不希望再次点击submit的信息再提交到服务端。

有了config配合ajaxpost的设置之后,当一个ajax请求未结束时,点击submit会提示“正在提交数据”


5. Validform是如何处理4的呢?


这是因为Validform为form表单设置了三种状态,分别是:


normal:未提交,posting:正在提交,posted:已成功提交过。

当点击submit提交数据(必须是ajaxpost请求的状态下)的时候,Validform的form状态改为posting,如果ajax返回success时,Validform的form状态改为posted,如果ajax返回error时,Validform的form状态改为normal。

//表单正在提交时点击提交按钮不做反应;
if(curform[0].validform_status==="posting"){return false;}
var beforeSubmit=settings.beforeSubmit && settings.beforeSubmit(curform);
if(beforeSubmit===false){return false;}
// ajax 提交之前设置为posting
curform[0].validform_status="posting";
// ajaxPost参数必须是true 
if(settings.ajaxPost || ajaxPost==="ajaxPost"){
// 提示“数据提交中”
Validform.util.showmsg.call(curform,curform.data("tipmsg").p||tipmsg.p,settings.tiptype,{obj:curform,type:1,sweep:settings.tipSweep},"byajax");
    if(ajaxsetup.success){
        var temp_suc=ajaxsetup.success;
        ajaxsetup.success=function(data){
            settings.callback && settings.callback(data);
            curform[0].validform_ajax=null;
            if($.trim(data.status)==="y"){
                // 设置为posted
                curform[0].validform_status="posted";
            }else{
                curform[0].validform_status="normal";
            }
            temp_suc(data,curform);
        }
    }
    if(ajaxsetup.error){
        var temp_err=ajaxsetup.error;
        ajaxsetup.error=function(data){
            settings.callback && settings.callback(data);
            // 设置normal
            curform[0].validform_status="normal";
            curform[0].validform_ajax=null;
            temp_err(data,curform);
        }   
    }
相关文章
|
前端开发 JavaScript
手机网站form表单check神器——Validform(1)
手机网站form表单check神器——Validform
183 0
手机网站form表单check神器——Validform(1)
|
前端开发
手机网站form表单check神器——Validform
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/74258614 手机端的商城项目已经上线了很久,但一直留有令人耿耿于怀的问题——form表单没有找到合适的validate,也就是说项目的input标签check只是做在了后台,前端并没有进行验证,这显然给后台服务器平添了很多烦恼(这活儿不应该我干,但现在我却不得不干),但是今天我找到了一款好的插件。
1339 0
|
3月前
|
网络协议 Android开发 数据安全/隐私保护
Android手机上使用Socks5全局代理-教程+软件
Android手机上使用Socks5全局代理-教程+软件
2023 2
|
4月前
|
监控 安全 Android开发
【新手必读】Airtest测试Android手机常见的设置问题
【新手必读】Airtest测试Android手机常见的设置问题
156 0
|
4月前
|
XML Java Android开发
Android Studio开发之使用内容组件Content获取通讯信息讲解及实战(附源码 包括添加手机联系人和发短信)
Android Studio开发之使用内容组件Content获取通讯信息讲解及实战(附源码 包括添加手机联系人和发短信)
294 0
|
4月前
|
Web App开发 前端开发 网络安全
前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
【2月更文挑战第21天】前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
84 1
前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
|
4月前
|
存储 数据库 Android开发
Android实现手机内存存储功能
Android实现手机内存存储功能
52 2
|
4月前
|
网络协议 安全 Linux
如何使用Android手机通过JuiceSSH远程访问本地Linux服务器
如何使用Android手机通过JuiceSSH远程访问本地Linux服务器
|
4月前
|
传感器 物联网 Android开发
【Android App】物联网中查看手机支持的传感器及实现摇一摇功能-加速度传感器(附源码和演示 超详细)
【Android App】物联网中查看手机支持的传感器及实现摇一摇功能-加速度传感器(附源码和演示 超详细)
133 1
|
4月前
|
Android开发 网络架构
【Android App】检查手机连接WiFi信息以及扫描周围WiFi的讲解及实战(附源码和演示 超详细必看)
【Android App】检查手机连接WiFi信息以及扫描周围WiFi的讲解及实战(附源码和演示 超详细必看)
680 1

热门文章

最新文章

相关实验场景

更多
下一篇
云函数