Validform+layer实现漂亮的表单验证特效

Validform是一款优秀的表单验证插件，layer是一款优秀的弹出窗口插件。下面通过例子看看这二者碰出的火花吧

首先要引入jquery,Validform和layer

<scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>

<scripttype="text/javascript"src="http://res.layui.com/lay/lib/layer/src/layer.js"></script>

<scripttype="text/javascript"src="http://lib.h-ui.net/Validform/5.3.2/Validform.min.js"></script>

HTML

<formaction="post.php"method="post"name="form"class="formform-horizontal"id="form-Validform">

<divclass="rowcl">

<labelclass="form-labelcol-3"><spanclass="c-red">*</span>用户昵称：</label>

<divclass="formControlscol-8">

<inputtype="text"class="input-text"value=""placeholder="可使用3-16位中英文字符"id="uname"name="uname"datatype="*2-16"nullmsg="用户昵称不能为空">

</div>

</div>

<divclass="rowcl">

<labelclass="form-labelcol-3"><spanclass="c-red">*</span>用户密码：</label>

<divclass="formControlscol-8">

<inputtype="text"class="input-text"value=""placeholder="5-20位,范围[0-9a-zA-Z_@!.-]"id="pwd"name="pwd"datatype="/w{5,20}/i"nullmsg="用户密码不能为空">

</div>

</div>

<divclass="rowcl">

<labelclass="form-labelcol-3"><spanclass="c-red">*</span>Email：</label>

<divclass="formControlscol-8">

<inputtype="text"class="input-text"value=""placeholder="****@***.***"id="email"name="email"datatype="e"nullmsg="Email不能为空">

</div>

</div>

<divclass="rowcl">

<labelclass="form-labelcol-3"></label>

<divclass="formControlscol-8">

<ahref="javascript:;"id="safecodes"style="color:red"><?phpecho$safecode;?></a>

</div>

</div>

</div>

<divclass="rowcl"style="text-align:center">

<inputclass="btnbtn-primaryradius"type="submit"value="提交">

</div>

</form>

JS

<scripttype="text/javascript">

$(function(){

$("#form-Validform").Validform({

tiptype:4,

ajaxPost:true,

callback:function(data){

if(data.status==1){

layer.msg(data.info,{icon:data.status,time:1000},function(){

location.reload();//刷新页面

});

}

else{

layer.msg(data.info,{icon:data.status,time:3000});

}

}

});

$('#safecodes').click(function(){

$('#safecode').val($('#safecodes').text());

});

});

</script>

服务端返回

{"info":"u6210u529f","status":1,"url":""}

本例子流程：点击提交->逐项验证表单->完成验证ajax提交->根据返回信息判断->弹出消息