手机网站form表单check神器——Validform(1)-阿里云开发者社区

开发者社区> 沉默王二> 正文

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

简介: 手机网站form表单check神器——Validform
+关注继续查看

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


image.png


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

image.png



一、组件下载和使用


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

image.png



直接下载压缩包,里面的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;

}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10018 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2958 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12069 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
11814 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
7456 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4490 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7344 0
+关注
沉默王二
微信搜索「沉默王二」,回复关键字「00」获取硬核计算机基础资料。
1084
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载