自制“低奢内”CSS3注册表单,包含JS验证哦。请别嫌弃,好吗?。
要求
必备知识
基本了解CSS语法,初步了解CSS3语法知识。和JS/JQuery基本语法。
开发环境
Adobe Dreamweaver CS6
演示地址
演示地址
预览截图(抬抬你的鼠标就可以看到演示地址哦):
制作步骤:
一, html结构
<div id="home"><div class="tip current1"> <h2>提交的信息</h2><div class="msg"><p></p></div><div class="button"><button>确认</button></div> <i class="fa fa-times icon"></i></div><form id="regist" class="current1" method="post"> <h3>注册</h3><label>邮箱<input type="text" name="email" /><span>邮箱为空</span></label><label>名称<input type="text" name="name" /><span>用户名为空</span></label><label>密码<input type="password" name="pass" /><span>密码为空</span></label><button type="button">注册</button> </form> </div>
二, css代码
*{padding: 0;margin: 0;}/* 清除浮动 */ .clearfix:after {content: "";display: table;clear: both;} html, body { height: 100%; } body { font-family:"Microsoft YaHei"; background:#EBEBEB; background:url(../images/stardust.png); font-weight: 300; font-size: 15px; color: #333;overflow: hidden;} a {text-decoration: none;}/*home*/ #home{padding-top:100px;}.tip{background-color: #FFFFFF;width:360px; margin:auto; position:relative; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.44);} .tip h2{ font-weight:normal; padding:10px;border-bottom: 1px solid #E7E7E7;color:#C8C8C8;} .tip div.msg{ padding:10px;color:#C8C8C8; border-bottom: 1px solid #E7E7E7; word-break:break-all; } .tip div.button{ height:50px; background:#F0F0F0;} .tip button{ float:right; margin:10px;} .tip .icon{ display:block; position:absolute; right:15px; top:15px; color:#C8C8C8; cursor:pointer;}/*regist界面*/ #regist{ padding:30px; width:300px; background:#FFF; margin:auto; position:relative; top:-182px; border-radius: 3px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);}.current1{-moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }.current{-moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1);} #regist h3{ font-size:18px; line-height:25px; font-weight:300; letter-spacing:3px; margin-bottom:22px; color:#C8C8C8;} #regist label{ color:#C8C8C8; display:block; height:35px; padding:0 10px; font-size:12px; line-height:35px; background:#EBEBEB; margin-bottom:28px;position:relative;} #regist label input{ font:13px/20px "Microsoft YaHei"; background:none; height:20px; border:none; margin:7px 0 0 10px;width:245px;outline:none ; letter-spacing:normal; z-index:1; position:relative; } #regist label span{ display:block; height:35px; color:#F30; width:100px; position:absolute; top:0; left:190px; text-align:right;padding:0 10px 0 0; z-index:0; display:none; } #regist button,.tip button{ font-family:"Microsoft YaHei"; cursor:pointer; width:90px; height:30px; background:#FE4E5B; border:none; font-size:14px; line-height:30px; letter-spacing:3px; color:#FFF; position:relative; -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in;} #regist button:hover,.tip button:hover{ background:#F87982; color:#000;}
三, JS代码
$(function(){$("#regist").addClass("current"); /*** 正则检验邮箱* email 传入邮箱* return true 表示验证通过*/function check_email(email) {if (/^[\w\-\.]+@[\w\-]+(\.[a-zA-Z]{2,4}){1,2}$/.test(email)) return true;}//input 按键事件$("input[name]").keyup(function(e){//禁止输入空格 把空格替换掉if($(this).attr('name')=="pass"&&e.keyCode==32){$(this).val(function(i,v){return $.trim(v);});}if($.trim($(this).val())!=""){$(this).nextAll('span').eq(0).css({display:'none'}); }});//错误信息var succ_arr=[];//input失去焦点事件$("input[name]").focusout(function(e){var msg="";if($.trim($(this).val())==""){if($(this).attr('name')=='name'){succ_arr[0]=false;msg="用户名为空";}else if($(this).attr('name')=='pass'){succ_arr[1]=false;msg="密码为空";}else if($(this).attr('name')=='email'){succ_arr[2]=false;msg="邮箱为空";}}else{if($(this).attr('name')=='name'){succ_arr[0]=true;}else if($(this).attr('name')=='pass'){succ_arr[1]=true;}else if($(this).attr('name')=='email'){succ_arr[2]=true;if(!check_email($.trim($(this).val()))){succ_arr[2]=false;msg="格式不正确";}} }var a=$(this).nextAll('span').eq(0);a.css({display:'block'}).text(msg);});//Ajax用户注册$("button[type='button']").click(function(){$("input[name]").focusout(); //让所有的input标记失去一次焦点 来设置msg信息for (x in succ_arr){if(succ_arr[x]==false) return;}$("#regist").removeClass("current"); $(".tip").addClass("current");var data=$('#regist').serialize(); //序列化表单元素$(".tip p").html(data);/**有兴趣的可以到这里 自行发送Ajax请求 实现注册功能*/});$(".tip button,.tip i").click(function(){$("#regist").addClass("current"); $(".tip").removeClass("current");$("input[name]").val("");});});
这是要结束了吗?是的,结束了。是不是很简单呢?等等,好像少了一点一样,哦,代码需要引入了Font Awesome矢量字体图标呢! 可这是什么东西呢?点击下面链接进行查看吧:
Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标,新浪、人人 的矢量图标也到其中哟
关于登入表单可以点击这里查看:
自制“低奢内”CSS3登入表单,包含JS验证,请别嫌弃哦。
如以上文章或链接对你有帮助的话,别忘了在文章结尾处轻轻点击一下 “还不错”按钮或到页面右下角点击 “赞一个” 按钮哦。你也可以点击页面右边“分享”悬浮按钮哦,让更多的人阅读这篇文章。
转载于:https://www.cnblogs.com/Li-Cheng/p/3662149.html
自制“低奢内”CSS3注册表单,包含JS验证哦。请别嫌弃,好吗?。相关推荐
- 自制“低奢内”CSS3登入表单,包含JS验证,请别嫌弃哦。
要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...
- ajax注册表单用户名实时验证,Ajax注册表单用户名实时验证..doc
Ajax注册表单用户名实时验证. Ajax注册表单用户名实时验证 1.1.1 摘要 很多时候在网站上注册时,我们会发现,注册表单通常需要检查用户名和电子邮件地址的可用性:从而确保用户之间不拥有相同的用 ...
- Ajax注册表单用户名实时验证
原文地址为: Ajax注册表单用户名实时验证 1.1.1 摘要 很多时候在网站上注册时,我们会发现,注册表单通常需要检查用户名和电子邮件地址的可用性:从而确保用户之间不拥有相同的用户名和电子邮件地址: ...
- 注册表单校验 js java,JavaScript表单验证完美代码
用原生JS写一个简单的表单验证 首先,是html部分 新用户注册 基本信息 用户名: 请输入至少3位的用户名 密码: 请输入4到8位的密码 确认密码: 请再输入一遍密码 手机号码: 请输入11位手机号 ...
- 登录界面转换实现html,html5和css3登录注册表单界面切换动画
这是一款使用html5和css3 伪类:target制作的登录界面和注册表单界面切换动画. HTML html结构包含两个表单:登录表单和注册表单.开始时使用css将注册表单隐藏. Log in Yo ...
- 【前端实例代码】Html5+css3创建登录和注册表单~实现新拟态新拟物风格(Neumorphism)网页图标效果~手把手教学~新手必会~超简单 ~
b站视频演示效果: [web前端特效源码]Html5+css3创建登录和注册表单2!实现新拟态新拟物风格(Neumorphism)网页图标效果!手把手教学!新手必会!超简单 ~ 效果图: 完整代码: ...
- 哔哩哔哩注册--表单练习
哔哩哔哩注册–表单练习 HTML代码 可能代码有些不足或者用词不当等 希望大家能够见谅 这是一次bilibili的注册表单练习 里面都有详细注释 当然一个网页有许多种 这只是其中一种 是为了相互交流 ...
- (翻译)用米白色文本字段强化注册表单
设计网站时,大部分设计人员将精力放在内容页面上,忽略了注册表单,从而让后者看着乏味.陈旧.简陋.白底的注册表单中充斥着粗糙的黑色边框,再加上普通的文本字段和杂乱的文本,根本激发不出用户的注册热情. ...
- 一步步学习微软InfoPath2010和SP2010--第九章节--使用SharePoint用户配置文件Web service(2)--在事件注册表单上创建表单加载规则...
下面练习中,你将添加表单加载规则,将四个文本框域和图片控件与用户配置文件web service连接.当使用用户配置文件web service时,你需要将控件和来自web service合适的域绑定.这 ...
最新文章
- layui 表格新增删除一行
- html重复标题,在HTML中重复表标题
- Arthas 使用的四种方式
- [Everyday Mathematics]20150203
- 微信抢红包python脚本不用手机_用Python实现微信自动化抢红包,再也不用担心抢不到红包了...
- Pandas timedelta_range
- 安卓开发:用ImageView放上图片后上下有间隙
- pe卸载win10更新补丁_Win10怎么卸载有问题更新补丁|Win10卸载更新补丁
- html静态网站基于数码类电商购物网站网页设计与实现共计30个页面.rar(项目源码+毕业设计+论文+答辩PPT)
- Linux下套接字详解(八)----select模式下服务器(非阻塞,单进程+多进程+多线程)
- 扫描微信小程序体验版二维码无法打开
- LaTeX的长度单位
- 地图比例尺与空间分辨率之间的关系_航高、分辨率与比例尺的关系
- 邮箱注册哪个好?哪家的邮箱最好用呀
- 电子烟市场Juul来袭,锐刻福禄们该如何做防?
- php视频降清晰度,HTML5视频播放器-video-js(带清晰度切换) | 小灰灰博客
- 我的性格分析和对未来职业的规划
- web课程设计网页规划与设计:个人毕设网站设计 —— 二手书籍(11个页面) HTML+CSS+JavaScript
- 如何用js进行日期的加减(天数)?
- 一个电子商务网站的设计及开发环境配置文档
热门文章
- 2019宁波最重视的行业
- @staticmethod用法
- datatable删除csv中的一列
- sublime3在windows下面无法关联.py文件解决方案(转载)
- python十分钟教程_简洁的十分钟Python入门教程
- 用Scrutor来简化ASP.NET Core的DI注册
- 把握三大计划 抓住ERP项目实施的灵魂
- 【JavaScript】出现即使设置了ID也获取不到的可能原因与window.onload
- MySQL 5.6 Threadpool(优先队列)介绍及性能测试【转】
- 点击一次铵钮产生一个新文本框,分别输入值,然后获取