validForm结合layer制作表单验证提示

首先要引入jquery,Validform和layer

<script src="../js/jquery.min.js"></script><script src="../layer/layer.js"></script><script src="../js/Validform_v5.3.2_min.js"></script>

form表单带代码

<form class="demoform"><ul class="am-u-sm-12 am-u-md-6 am-cf">    <li>籍贯：<input type="text" value="湖北武汉" datatype="*" nullmsg="请填写籍贯"></li>    <li>民族：<input type="text" value="汉族"  datatype="*" nullmsg="请填写民族信息" ></li>    <li>手机号：<input type="text" datatype="m" nullmsg="请填写手机号码" errormsg="请填写正确的手机号码" value="18888888888"></li>    <li>电子邮箱：<input type="text" datatype="e" errormsg="请填写正确的电子邮箱" nullmsg="请填写电子邮箱" value="[e-mail]"></li>    <li>家庭详细住址：<input type="text" value="地址" datatype="*" nullmsg="请填写家庭详细住址"></li></ul></form>

关于validform的相关设置

$('.demoform').Validform({    btnSubmit:"#btn_sub",     btnReset:".btn_reset",    tiptype:1,     ignoreHidden:false,    dragonfly:false,    tipSweep:true,    label:".label",    showAllError:false,    postonce:true,    ajaxPost:true,    datatype:{},    usePlugin:{        swfupload:{},        datepicker:{},        passwordstrength:{},        jqtransform:{            selector:"select,input"        }    },    beforeCheck:function(curform){        //在表单提交执行验证之前执行的函数，curform参数是当前表单对象。        //这里明确return false的话将不会继续执行验证操作;        },    beforeSubmit:function(curform){        //在验证成功后，表单提交前执行的函数，curform参数是当前表单对象。        //这里明确return false的话表单将不会提交;        },    callback:function(data){        //返回数据data是json对象，{"info":"demo info","status":"y"}        //info: 输出提示信息;        //status: 返回提交数据的状态,是否提交成功。如可以用"y"表示提交成功，"n"表示提交失败，在ajax_post.php文件返回数据里自定字符，主要用在callback函数里根据该值执行相应的回调操作;        //你也可以在ajax_post.php文件返回更多信息在这里获取，进行相应操作；        //ajax遇到服务端错误时也会执行回调，这时的data是{ status:**, statusText:**, readyState:**, responseText:** }；        //这里执行回调操作;        //注意：如果不是ajax方式提交表单，传入callback，这时data参数是当前表单对象，回调函数会在表单验证全部通过后执行，然后判断是否提交表单，如果callback里明确return false，则表单不会提交，如果return true或没有return，则会提交表单。    }});

以上是validform的相关配置说明，具体参照validform的原api地址：validform API

这里要结合layer做表单验证提示，最主要的一个参数就是tiptype

tiptype的相关参数描述

可用的值有：1、2、3、4和function函数，默认tiptype为1。 3、4是5.2.1版本新增
1=> 自定义弹出框提示；
2=> 侧边提示(会在当前元素的父级的next对象的子级查找显示提示信息的对象，表单以ajax提交时会弹出自定义提示框显示表单提交状态)；
3=> 侧边提示(会在当前元素的siblings对象中查找显示提示信息的对象，表单以ajax提交时会弹出自定义提示框显示表单提交状态)；
4=> 侧边提示(会在当前元素的父级的next对象下查找显示提示信息的对象，表单以ajax提交时不显示表单的提交状态)；
如果上面的4种提示方式不是你需要的，你可以给tiptype传入自定义函数。通过自定义函数，可以实现你想要的任何提示效果：

tiptype:function(msg,o,cssctl){    //msg：提示信息;    //o:{obj:*,type:*,curform:*},    //obj指向的是当前验证的表单元素（或表单对象，验证全部验证通过，提交表单时o.obj为该表单对象），    //type指示提示的状态，值为1、2、3、4， 1：正在检测/提交数据，2：通过验证，3：验证失败，4：提示ignore状态,     //curform为当前form对象;    //cssctl:内置的提示信息样式控制函数，该函数需传入两个参数：显示提示信息的对象 和 当前提示的状态（既形参o中的type）;}

tiptype不为1时，Validform会查找class为”Validform_checktip”的标签显示提示信息。tiptype=1时，会自动创建弹出框显示提示信息。
Validform_checktip和表单元素之间的位置关系，会根据tiptype的值有对应的结构，上面已经做了说明。
5.3版本开始，如果页面里没有显示出错信息的标签，会根据tiptype值自动创建Validform_checktip对象。

JS逻辑层代码

$(".demoform").Validform({    // tiptype ，自定义弹出层    tiptype:function(msg,o){        if (o.type == 3){            // 只有在验证失败的时候，才会弹出相关的信息            layer.msg(msg, {time: 800});         }    }})