jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码


Posted in Javascript onAugust 21, 2015

本文实例讲述了jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码。分享给大家供大家参考。具体如下:

这里实现圆角表单,圆角输入框,无刷新验证,漂亮唯美,是对这款基于HTML5/CSS3/jQuery来实现的表单效果的简要概括,用HTML5可以实现很多超乎寻常的效果,从此你会喜欢上HTML5,会骂一下万恶的IE,到现在IE8还不支持HTML5,正悲哀着呢。

先来看看运行效果截图:

jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5+css3+jQuery圆角注册表单效果</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
(function($) { $.InFieldLabels = function(label, field, options) { var base = this; base.$label = $(label); base.$field = $(field); base.$label.data("InFieldLabels", base); base.showing = true; base.init = function() { base.options = $.extend({}, $.InFieldLabels.defaultOptions, options); base.$label.css('position', 'absolute'); var fieldPosition = base.$field.position(); base.$label.css({ 'left': fieldPosition.left, 'top': fieldPosition.top }).addClass(base.options.labelClass); if (base.$field.val() != "") { base.$label.hide(); base.showing = false; }; base.$field.focus(function() { base.fadeOnFocus(); }).blur(function() { base.checkForEmpty(true); }).bind('keydown.infieldlabel', function(e) { base.hideOnChange(e); }).change(function(e) { base.checkForEmpty(); }).bind('onPropertyChange', function() { base.checkForEmpty(); }); }; base.fadeOnFocus = function() { if (base.showing) { base.setOpacity(base.options.fadeOpacity); }; }; base.setOpacity = function(opacity) { base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration); base.showing = (opacity > 0.0); }; base.checkForEmpty = function(blur) { if (base.$field.val() == "") { base.prepForShow(); base.setOpacity(blur ? 1.0 : base.options.fadeOpacity); } else { base.setOpacity(0.0); }; }; base.prepForShow = function(e) { if (!base.showing) { base.$label.css({ opacity: 0.0 }).show(); base.$field.bind('keydown.infieldlabel', function(e) { base.hideOnChange(e); }); }; }; base.hideOnChange = function(e) { if ((e.keyCode == 16) || (e.keyCode == 9)) return; if (base.showing) { base.$label.hide(); base.showing = false; }; base.$field.unbind('keydown.infieldlabel'); }; base.init(); }; $.InFieldLabels.defaultOptions = { fadeOpacity: 0.5, fadeDuration: 300, labelClass: 'infield' }; $.fn.inFieldLabels = function(options) { return this.each(function() { var for_attr = $(this).attr('for'); if (!for_attr) return; var $field = $("input#" + for_attr + "[type='text']," + "input#" + for_attr + "[type='password']," + "input#" + for_attr + "[type='tel']," + "input#" + for_attr + "[type='email']," + "textarea#" + for_attr); if ($field.length == 0) return; (new $.InFieldLabels(this, $field[0], options)); }); }; })(jQuery);
$("#RegisterUserForm label").inFieldLabels();
});
</script>
<style type="text/css">
html, body, h1, form, fieldset, input{margin: 0;padding: 0;border: none;}
body{font-family: Helvetica, Arial, sans-serif;font-size: 12px;}
#registration{color: #fff;background: #2d2d2d;background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(60,60,60)), color-stop(0.74, rgb(43,43,43)), color-stop(1, rgb(60,60,60)) );background: -moz-linear-gradient( center bottom, rgb(60,60,60) 0%, rgb(43,43,43) 74%, rgb(60,60,60) 100% );-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;margin: 10px;width: 430px;}
#registration a{color: #8c910b;text-shadow: 0px -1px 0px #000;}
#registration fieldset{padding: 20px;}
input.text{-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;border: solid 1px #444;font-size: 14px;width: 90%;padding: 7px 8px 7px 30px;-moz-box-shadow: 0px 1px 0px #777;-webkit-box-shadow: 0px 1px 0px #777;background: #ddd url('img/inputSprite.png') no-repeat 4px 5px;background: url('images/inputSprite.png') no-repeat 4px 5px, -moz-linear-gradient( center bottom, rgb(225,225,225) 0%, rgb(215,215,215) 54%, rgb(173,173,173) 100% );background: url('images/inputSprite.png') no-repeat 4px 5px, -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(225,225,225)), color-stop(0.54, rgb(215,215,215)), color-stop(1, rgb(173,173,173)) );color: #333;text-shadow: 0px 1px 0px #FFF;}
input#email{background-position: 4px 5px;background-position: 4px 5px, 0px 0px;}
input#password{background-position: 4px -20px;background-position: 4px -20px, 0px 0px;}
input#name{background-position: 4px -46px;background-position: 4px -46px, 0px 0px;}
input#tel{background-position: 4px -76px;background-position: 4px -76px, 0px 0px;}
#registration h2{color: #fff;text-shadow: 0px -1px 0px #000;border-bottom: solid #181818 1px;-moz-box-shadow: 0px 1px 0px #3a3a3a;text-align: center;padding: 18px;margin: 0px;font-weight: normal;font-size: 24px;font-family: Lucida Grande, Helvetica, Arial, sans-serif;}
#registerNew{width: 203px;height: 40px;border: none;text-indent: -9999px;background: url('images/createAccountButton.png') no-repeat;cursor: pointer;float: right;}
#registerNew: hover{background-position: 0px -41px;}
#registerNew: active{background-position: 0px -82px;}
#registration p{position: relative;}
fieldset label.infield{color: #333;text-shadow: 0px 1px 0px #fff;position: absolute;text-align: left;top: 3px !important;left: 35px !important;line-height: 29px;}
</style>
</head>
<body>
<div id="registration">
 <h2>Create an Account</h2>
 <form id="RegisterUserForm" action="" method="post">
 <fieldset>
  <p>
  <label for="name">Name</label>
  <input id="name" name="name" type="text" class="text" value="" />
  </p>
  <p>
  <label for="tel">Phone Number</label>
  <input id="tel" name="tel" type="tel" class="text" value="" />
  </p>
  <p>
  <label for="email">Email</label>
  <input id="email" name="email" type="email" class="text" value="" />
  </p>
  <p>
  <label for="password">Password</label>
  <input id="password" name="password" class="text" type="password" />
  </p>
  <p><input id="acceptTerms" name="acceptTerms" type="checkbox" />
  <label for="acceptTerms">
  I agree to the <a href="">Terms and Conditions</a> and <a href="">Privacy Policy</a>
  </label>
  </p>
  <p>
  <button id="registerNew" type="submit">Register</button>
  </p>
 </fieldset>
 </form>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
jquery结婚电子请柬特效源码分享
Aug 21 #Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 #Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 #Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 #Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 #Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 #Javascript
纯javascript实现图片延时加载方法
Aug 21 #Javascript
You might like
yii框架builder、update、delete使用方法
2014/04/30 PHP
PHP的全局错误处理详解
2016/04/25 PHP
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
jQuery动态添加
2016/04/07 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
Python编码类型转换方法详解
2016/07/01 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
详解Django的CSRF认证实现
2018/10/09 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
用python进行视频剪辑
2020/11/02 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
介绍一下Ruby的多线程处理
2013/02/01 面试题
大学生实习思想汇报
2014/01/12 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
分析并发编程之LongAdder原理
2021/06/29 Java/Android
openstack云计算keystone组件工作介绍
2022/04/20 Servers