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":"\u6210\u529f","status":1,"url":""}
本例子流程：点击提交->逐项验证表单->完成验证ajax提交->根据返回信息判断->弹出消息