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

原创 2017年07月03日 19:19:26

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

这里写图片描述

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

这里写图片描述

一、组件下载和使用

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

这里写图片描述

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

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

<script type="text/javascript" src="${ctx}/components/validate/js/Validform_v5.3.2.js"></script>
<link type="text/css" rel="stylesheet" href="${ctx}/components/validate/css/style.css" />

二、玩转Validform,只需这5点

1. 构建form表单和input

<form class="form-signin required-validate" action="${ctx}/login?callbackType=forward" method="post"
    onsubmit="return validateCallback(this, ecAjaxDone)">

    <input type="text" name="username" datatype="*"  nullmsg="请输入手机号码、邮箱、会员账号", placeholder="手机号码、邮箱、会员账号" value="${username}" autocomplete="off">

    <button class="login-btn common-div" type="submit" disabled="disabled">登录</button>
</form>

①、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

function validateCallback(form, callback, confirmMsg) {
    YUNM.debug("进入到form表单验证和提交");

    var $form = $(form);

    var data = $form.Validform();// 获得Validform验证后的表单对象

    if (!data.check(true)) {// bool为true时则只验证不显示提示信息
        return false;// 返回false,不再继续执行
    }

    // 验证通过后通过config方法指定我们项目需要的ajaxPost方法
    // 为什么要在这个地方设置ajaxPost呢,这点很关键,我之后细致说明
    data.config({
        ajaxPost:true,// 和下面参数只有一个字符不同,注意
        // 定制版ajaxpost,可以让我们更方便传递适合我们项目的方法
        ajaxpost : {
            type : form.method || 'POST',
            url : $form.attr("action"),
            data : $form.serializeArray(),
            cache : false,
            success : callback,// 此处的callback就是在form表单上设置的ecAjaxDone,之后再介绍
        }
    });

    var _submitFn = function() {
        data.submitForm(true);// flag为true时,跳过验证直接提交
    };

    if (confirmMsg) {
        $.showConfirm(confirmMsg, _submitFn);
    } else {
        _submitFn();
    }

    return false;

}

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

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

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

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

这里写图片描述

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

这里写图片描述

假设服务端返回的信息返回的更慢一点,这时候我们不希望再次点击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就能玩的很溜了。

看看别家程序员的程序人生吧!

版权声明:本文出自沉默王二的博客,转载必须注明出处。技术交流群 120926808

表单校验组件ValidForm(1)

使用入门 1、引入css 请查看下载文件中的style.css,把里面Validform必须部分复制到你的css中(文件里这个注释 "/*==========以下部分是Validform必...
  • jianhua0902
  • jianhua0902
  • 2015年02月12日 15:00
  • 7268

Jquery插件Validform使用说明

你没看错,就一行代码搞定整站的表单验证! $(".demoform").Validform();   使用方法: $(".demoform").Validform({//所有可...
  • hua00shao
  • hua00shao
  • 2013年08月07日 11:45
  • 788

关于验证表单插件Validform的用法

先说明下,这个是菜鸟教程。主要是写给自己和像我一样的菜鸟看的,高手勿喷! Validform是一个很好的表单验证插件,作者写了很多方法,我们只要直接调用就好了。 使用方法 1、写入此插件必须的...
  • likeni1314
  • likeni1314
  • 2016年10月07日 13:01
  • 2395

手机端Form简单表单制作及onSubmit事件

form及其他表单控件的的简单应用,手机端自适应代码,form表单提交前格式验证代码,form提交前的onSubmit事件。...
  • zhyq32
  • zhyq32
  • 2016年04月28日 20:42
  • 2750

validform表单验证

Validform使用入门 1、引入css 请查看下载文件中的style.css,把里面Validform必须部分复制到你的css中(文件里这个注释 "/*==========以下部分是Valid...
  • xp270952585
  • xp270952585
  • 2017年04月23日 18:46
  • 939

Validform_v5.3.2 表单验证插件

script type="text/javascript" src="js/Validform_v5.3.2_min.js">script> js  $(".form-val").Vali...
  • u010078133
  • u010078133
  • 2016年12月12日 17:04
  • 1250

jquery Validform_v5.3.2 验证下载

下载地址: http://pan.baidu.com/s/1i5562bV
  • u010411264
  • u010411264
  • 2016年07月13日 11:48
  • 1255

Validform_v5.3.2引发的奇怪问题

在一个项目中使用Validform作为表单验证插件,话说,这个插件真的是超级方便,只需要在html代码里面添加属性就能够快速实现表单验证,说实话,这个框架用的不是很熟练,最近也一直在学习。但是昨天用的...
  • pang9998
  • pang9998
  • 2017年08月05日 09:23
  • 288

Validform_v5.3.2 demo及引用的Validform_v5.3.2_min.js

  • 2014年03月20日 17:15
  • 268KB
  • 下载

Validform实时表单验证插件实例使用

文档日期:2016-10-17 适用范围:所有类型网站表单验证 插件版本:v5.3.2 插件地址:http://validform.rjboy.cn/Validform/v5.3.2...
  • hj960511
  • hj960511
  • 2016年10月17日 15:05
  • 2893
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:手机网站form表单check神器——Validform
举报原因:
原因补充:

(最多只允许输入30个字)