手机网站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
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
3706 0
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
提交表单的时候验证手机号码和身份证号码
提交表单的时候验证手机号码和身份证号码
138 0
|
前端开发 Android开发 iOS开发
layui和weui结合手机端select表单底部选择和被遮挡的解决方案
layui和weui结合手机端select表单底部选择和被遮挡的解决方案
640 0
|
前端开发 JavaScript
手机网站form表单check神器——Validform(1)
手机网站form表单check神器——Validform
268 0
手机网站form表单check神器——Validform(1)
|
前端开发
手机网站form表单check神器——Validform
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/74258614 手机端的商城项目已经上线了很久,但一直留有令人耿耿于怀的问题——form表单没有找到合适的validate,也就是说项目的input标签check只是做在了后台,前端并没有进行验证,这显然给后台服务器平添了很多烦恼(这活儿不应该我干,但现在我却不得不干),但是今天我找到了一款好的插件。
1424 0
|
JavaScript 开发工具 git
表单界面的兼容PC手机端解决方案
就当写一篇随笔吧~上星期还在做加盟模块(兼容微信端),这星期已经加班做快递扫码模块(react+node),所以我感觉只有弹药备足了才能稍微轻松些应对各种需求。实话说在同个部门的大佬面前差距确实大,如何判断差距呢?我的观点是一是效率,二是质量。
1093 0
|
Shell
用Flex模拟智能手机表单输入的自动放大功能
用iphone或itouch登录过微薄的同学们想必都会发现:登录一些手机版网站(比如微薄时),表单中的输入框会自动放大,以方便用户输入,等输入完成后,页面会再次缩小到正常状态。 在flex开发过程中,有时也会遇到一些输入项很多的表单,可以借鉴iphone上的这种体验,基本思路就是:将整个容器放大,以适应屏幕,然后将获得焦点的文本框定位到屏幕中央。
1077 0
|
网络协议 Android开发 数据安全/隐私保护
Android手机上使用Socks5全局代理-教程+软件
Android手机上使用Socks5全局代理-教程+软件
8267 2
|
监控 安全 Android开发
【新手必读】Airtest测试Android手机常见的设置问题
【新手必读】Airtest测试Android手机常见的设置问题
403 0
|
Web App开发 前端开发 网络安全
前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
【2月更文挑战第21天】前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
224 1
前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用

热门文章

最新文章