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 相关文章推荐
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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 include的妙用,实现路径加密
2008/07/29 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
Yii快速入门经典教程
2015/12/28 PHP
php图片添加水印例子
2016/07/20 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
Python常见文件操作的函数示例代码
2011/11/15 Python
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
在Python中移动目录结构的方法
2016/01/31 Python
scrapy爬虫实例分享
2017/12/28 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
公共事业管理本科生求职信
2013/10/07 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
学校运动会报道稿
2014/09/23 职场文书
食品安全责任书范本
2015/05/09 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript