Validform+layer实现漂亮的表单验证特效
更新时间:2016年1月20日 10:01 点击:2082
Validform是一款优秀的表单验证插件,layer是一款优秀的弹出窗口插件。下面通过例子看看这二者碰出的火花吧
首先要引入jquery,Validform和layer
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://res.layui.com/lay/lib/layer/src/layer.js"></script> <script type="text/javascript" src="http://lib.h-ui.net/Validform/5.3.2/Validform.min.js"></script>
HTML
<form action="post.php" method="post" name="form" class="form form-horizontal" id="form-Validform"> <div class="row cl"> <label class="form-label col-3"><span class="c-red">*</span>用户昵称:</label> <div class="formControls col-8"> <input type="text" class="input-text" value="" placeholder="可使用3-16位中英文字符" id="uname" name="uname" datatype="*2-16" nullmsg="用户昵称不能为空"> </div> </div> <div class="row cl"> <label class="form-label col-3"><span class="c-red">*</span>用户密码:</label> <div class="formControls col-8"> <input type="text" class="input-text" value="" placeholder="5-20位,范围[0-9a-zA-Z_@!.-]" id="pwd" name="pwd" datatype="/\w{5,20}/i" nullmsg="用户密码不能为空"> </div> </div> <div class="row cl"> <label class="form-label col-3"><span class="c-red">*</span>Email:</label> <div class="formControls col-8"> <input type="text" class="input-text" value="" placeholder="****@***.***" id="email" name="email" datatype="e" nullmsg="Email不能为空"> </div> </div> <div class="row cl"> <label class="form-label col-3"></label> <div class="formControls col-8"> <a href="javascript:;" id="safecodes" style="color:red"><?php echo $safecode; ?></a> </div> </div> </div> <div class="row cl" style="text-align:center"> <input class="btn btn-primary radius" type="submit" value=" 提交 "> </div> </form>
JS
<script type="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提交->根据返回信息判断->弹出消息
上一篇: JQuery实现网页右侧随动广告特效
下一篇: javascript实现倒计时跳转页面
相关文章
- 这篇文章主要为大家详细介绍了jquery表单验证插件validation使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
- 这篇文章主要为大家详细介绍了bootstrapValidator自定验证方法写法,研究bootstrapValidator验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02
- JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。通过本文给大家介绍Javascript的表单验证-提交表单,对javascript表单验证,提交表单相关知识感兴趣的朋友一起学习吧...2016-03-22
jQuery form 表单验证插件(fieldValue)校验表单
这篇文章主要介绍了jQuery form 表单验证插件(fieldValue)校验表单的相关资料,需要的朋友可以参考下...2016-01-25- JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。接下来通过本文给大家介绍Javascript的表单验证-初识正则表达式,对js表单验证正则表达式相关知识感兴趣的朋友一起学习吧...2016-03-22
- 这篇文章主要帮助大家拥有一个属于自己的javascript表单验证插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-03-28
AngularJS使用angular-formly进行表单验证
这篇文章主要介绍了AngularJS使用angular-formly进行表单验证的相关资料,需要的朋友可以参考下...2015-12-29- 这篇文章主要为大家详细介绍了JS实现支持Ajax验证的表单插件,感兴趣的小伙伴们可以参考一下...2016-03-28
Bootstrap 表单验证formValidation 实现表单动态验证功能
这篇文章主要介绍了Bootstrap 表单验证formValidation 实现表单动态验证功能,需要的朋友可以参考下...2017-05-22- 这篇文章主要针对jQuery Validate表单验证为大家进行详细介绍,如何在class属性里面并定义错误信息的提示,感兴趣的小伙伴们可以参考一下...2016-01-21
- 这篇文章主要介绍了Jquery插件easyUi实现表单验证示例,需要的朋友可以参考下...2015-12-17
- 这篇文章主要针对jQuery Validate表单验证为大家进行详细介绍,通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到js代码中,感兴趣的小伙伴们可以参考一下...2016-01-21
- 这篇文章主要为大家详细介绍了Vue表单验证插件的制作过程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-04-03
jQuery Validate表单验证插件 添加class属性形式的校验
这篇文章主要介绍了jQuery Validate表单验证插件,在class属性中添加校验规则进行简单的校验,感兴趣的小伙伴们可以参考一下...2016-01-21Laravel中使用FormRequest进行表单验证方法及问题汇总
Laravel 5.0 带来了FormRequests, 这是一种特殊的类型, 用于在提交表单时进行数据的检查和验证. 每个FormRequest类至少包含一个rules()方法, 这个方法返回一组验证规则. 除此之外还必须包含一个authorize()方法, 该方法返回一个布尔值, 代表是否允许用户执行本次请求....2016-06-24- 创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计、开发与测试等等环节。实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的。本文就给大家结合2款优秀的插件来实现这个问题,有需要的小伙伴可以参考下...2016-01-20
- 这篇文章主要介绍了CodeIgniter表单验证方法,结合实例形式详细分析了CodeIgniter进行表单验证的具体步骤与相关实现技巧,需要的朋友可以参考下...2016-03-07
- 这篇文章主要介绍了JavaScript中Form表单技术的相关资料,包括简单的表单验证和正则表达式验证,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-01
- 这篇文章主要介绍了AngularJS使用ngMessages进行表单验证的相关资料,需要的朋友可以参考下...2015-12-29
基于BootstrapValidator的Form表单验证(24)
这篇文章主要为大家详细介绍了基于BootstrapValidator的Form表验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-09