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

朱雀 2021-05-10 11:18 577阅读 0赞

手机端的商城项目已经上线了很久，但一直留有令人耿耿于怀的问题——form表单没有找到合适的validate，也就是说项目的input标签check只是做在了后台，前端并没有进行验证，这显然给后台服务器平添了很多烦恼（这活儿不应该我干，但现在我却不得不干），但是今天我找到了一款好的插件。

![这里写图片描述][SouthEast]

找这个组件可没少花心思，看下图就能明白其中的辛苦！

![这里写图片描述][SouthEast 1]

### 一、组件下载和使用 ###

Validform的优点我就不再赘述，第一张图就可以看得出来，我们直接下载吧！

![这里写图片描述][SouthEast 2]

直接下载压缩包，里面的demo很全。

把Validform\_v5.3.2.js和style.css（只需要“以下部分是Validform必须的”注释一下的）导入到项目中。

### 二、玩转Validform，只需这5点 ###

#### 1. 构建form表单和input ####

①、from表单上设置action、onsubmit（附带两个方法validateCallback和ecAjaxDone）  
②、input 上设置datatype、nullmsg  
③、type为submit的button

#### 2. 初始化form表单 ####

$(function() { 
        // validate form
        $("form.required-validate").each(function() { 
            var $form = $(this);
            YUNM.debug("form.required-validate" + $form.selector);
    
            $.Tipmsg.r = null;// 通过验证的信息取消显示
            $.Tipmsg.p = null;// form表单提交过程中点击submit后的信息提示取消显示
    
            $form.Validform({
                // 定制提示消息
                tiptype : function(msg, o, cssctl) { 
                    $.showErr(msg);// 这里换成你项目的方式
                },
                tipSweep : true,// 只在表单提交时触发检测，blur事件将不会触发检测
    
    
            });
    
        });
    
    });

#### 3. 定制ajaxpost ####

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

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

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

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

![这里写图片描述][SouthEast 3]

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

![这里写图片描述][SouthEast 4]

假设服务端返回的信息返回的更慢一点，这时候我们不希望再次点击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);
            }   
        }

只要这5点技巧掌握了，那么Validform就能玩的很溜了。

> 看看别家程序员的程序人生吧！
> 
> ![20161224204853903][]

[SouthEast]: /images/20210506/31c995a3ef07438ab7d43446dda37753.png
[SouthEast 1]: /images/20210506/6b4a6d576f764d65aadc51ae6b6d0350.png
[SouthEast 2]: /images/20210506/6c28488ebab94b9f9d97a62f7dcd6968.png
[SouthEast 3]: /images/20210506/c75f346910f7491f935dd12d720634fc.png
[SouthEast 4]: /images/20210506/34aff7b9b282469db6f815daaef2923c.png
[20161224204853903]: /images/20210506/98c38087976d4f619a4a5c96c77ca9fa.png