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


Posted in Javascript onJanuary 17, 2016

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提交->根据返回信息判断->弹出消息

Javascript 相关文章推荐
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
JS面向对象编程实现的拖拽功能案例详解
Mar 03 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 Javascript
javascript实现倒计时跳转页面
Jan 17 #Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 #Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 #Javascript
input点击后placeholder中的提示消息消失
Jan 15 #Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 #Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 #Javascript
利用CSS3在Angular中实现动画
Jan 15 #Javascript
You might like
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
php三元运算符知识汇总
2015/07/02 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
php设计模式之单例模式代码
2016/06/11 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
Ext 今日学习总结
2010/09/19 Javascript
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
JS跨域问题详解
2014/11/25 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
用python登录Dr.com思路以及代码分享
2014/06/25 Python
python实现简单ftp客户端的方法
2015/06/28 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
基于python绘制科赫雪花
2018/06/22 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
python Timer 类使用介绍
2020/12/28 Python
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
事业单位请假制度
2014/01/13 职场文书
农村改厕实施方案
2014/03/22 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
法院个人总结
2015/03/03 职场文书
2016中秋节广告语
2016/01/28 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python