js学习入门教程笔记:css+html+js用户注册代码实现
2016-08-29 09:31
1471 查看
原文:js学习入门教程笔记:css+html+js用户注册代码实现
源代码下载地址:http://www.zuidaima.com/share/1834762971532288.htm
运行截图:如下:
用户注册:结构层:html;表现层:css;行为层:javascript;
html利用ul,li来构造:
注意事项:1、每个Input都要有相应的id,这是在js中去调用的。
2、<a href="javascript:void(0)"></a>,添加javascript:void(0)是为了阻止链接的跳转。
表现层:css
注意事项:1、页面开始一般都写上重置代码。
2、针对用户名、输入框、提示图标要写一组本身的样式、一组def默认的样式、一组point获得焦点的样式、一组error错误样式、一组ok输入正确的样式。
行为层:js
js编写的主体思路:1、中心点:每一个input框,也就是获取的inp=document.getElementsByTagName("input");
2、针对input输入框会有点击即获得焦点的状态,和失去焦点的状态。
3、当获得焦点的时候,会给用户名、输入框、提示图标(改变背景图片的位置)变成蓝色,即添加point样式。
4、当input输入框失去焦点时,会给用户名、输入框、提示图标变成红色,即添加error样式。
5、当input输入框内容正确后,会给用户名、输入框变成。
由最代码官方编辑于2014-5-23 13:32:47
源代码下载地址:http://www.zuidaima.com/share/1834762971532288.htm
运行截图:如下:
用户注册:结构层:html;表现层:css;行为层:javascript;
html利用ul,li来构造:
注意事项:1、每个Input都要有相应的id,这是在js中去调用的。
2、<a href="javascript:void(0)"></a>,添加javascript:void(0)是为了阻止链接的跳转。
<body> <div id="reg"> <form> <div class="reg_title"><h1>用户注册</h1></div> <ul class="reg_con"> <li> <ul class="def"> <li><span>用户帐号:</span><input type="text" id="uname"/></li> <li><p><i></i>给自己起个名字吧,它将成为您登录本站的用户名</p></li> </ul> </li> <li> <ul class="def"> <li><span>电子邮箱:</span><input type="text" id="email"/></li> <li><p><i></i>请输入您的常用邮箱地址,此邮箱地址将作为修改密码</p></li> </ul> </li> <li> <ul class="def"> <li><span>手机号码:</span><input type="text" id="mobile"/></li> <li><p><i></i>请输入您的手机号码,方便我们之间的联系</p></li> </ul> </li> <li> <ul class="def"> <li><span>安全密码:</span><input id="pwd" type="password"/></li> <li><p><i></i>请输入安全密码,它将作为您的登录密码</p></li> </ul> </li> <li> <ul class="def "> <li><span>确认密码:</span><input type="password" id="qrpwd"/></li> <li><p><i></i>请将上面的密码再输入一次</p></li> </ul> </li> <li> <ul> <li><span></span></li> <li id="reg_sub"><a href="javascript:void(0)" id="enter">立即注册</a></li> </ul> </li> </ul> </form> </div> </body>
表现层:css
注意事项:1、页面开始一般都写上重置代码。
2、针对用户名、输入框、提示图标要写一组本身的样式、一组def默认的样式、一组point获得焦点的样式、一组error错误样式、一组ok输入正确的样式。
/*reset重置代码开始*/ 复制代码
行为层:js
js编写的主体思路:1、中心点:每一个input框,也就是获取的inp=document.getElementsByTagName("input");
2、针对input输入框会有点击即获得焦点的状态,和失去焦点的状态。
3、当获得焦点的时候,会给用户名、输入框、提示图标(改变背景图片的位置)变成蓝色,即添加point样式。
4、当input输入框失去焦点时,会给用户名、输入框、提示图标变成红色,即添加error样式。
5、当input输入框内容正确后,会给用户名、输入框变成。
/*闭包*/ ( function(){ var $=function(_id){ return document.getElementById(_id); } var inpStyle=function(){ var inp=document.getElementsByTagName("input");//获得id为inpList 中的所有的input for(i=0;i<inp.length;i++){ inp[i].onfocus=function(){ var par=this.parentNode.parentNode; var msg=par.getElementsByTagName("p")[0]; par.className="point"; check.focus[this.id](par,this,msg); } inp[i].onblur=function(){ var par=this.parentNode.parentNode; var msg=par.getElementsByTagName("p")[0]; par.className="def"; check.blurs[this.id](par,this,msg); } } $("enter").onclick=function(){ subback(inp); } } var check={ focus:{ uname:function(_ul,_this,_p){ _ul.className="point"; _p.innerHTML="<i></i>给自己起个名字吧,它将成为您登录本站的用户名"; }, email:function(_ul,_this,_p){ _ul.className="point"; _p.innerHTML="<i></i>请输入您的常用邮箱地址,此邮箱地址将作为修改密码"; }, mobile:function(_ul,_this,_p){ _ul.className="point"; _p.innerHTML="<i></i>请输入您的手机号码,方便我们之间的联系"; }, pwd:function(_ul,_this,_p){ _ul.className="point"; _p.innerHTML="<i></i>请输入安全密码,它将作为您的登录密码"; }, qrpwd:function(_ul,_this,_p){ _ul.className="point"; _p.innerHTML="<i></i>请将上面的密码再输入一次"; } }, blurs:{ uname:function(_ul,_this,_p){//ul标签、当前输入框、错误的信息 _ul.className="error"; var flag=false; if(_this.value==""){ _p.innerHTML="<i></i>用户名不能为空!"; }else if(_this.value.length<3 || _this.value.length>16){ _p.innerHTML="<i></i>用户名长度应控制在3-16位字符之间!"; }else if(!/^[\w_-\u4e00-\u9fa5]+$/.test(_this.value)){ _p.innerHTML = "<i></i>用户名只能由大小写字母,数字,下划线,中横线和中文组成!"; }else{ _ul.className="ok"; _p.innerHTML="<i></i>"; flag=true; } return flag; }, email:function(_ul,_this,_p){ _ul.className="error"; var flag=false; if(_this.value==""){ _p.innerHTML="<i></i>邮箱不能为空!"; }else if(!/\w+((-w+)|(\.\w+))*\@[\w]+((\.|-)[\w]+)*\.[\w]+/.test(_this.value)){ _p.innerHTML="<i></i>请输入正确的邮箱地址!"; } else{ _ul.className="ok"; _p.innerHTML="<i></i>"; flag=true; } return flag=false; } , mobile:function(_ul,_this,_p){ _ul.className="error"; var flag=false; if(_this.value==""){ _p.innerHTML="<i></i>电话号码不能为空!"; }else if(!/0?(13|14|15|18)[0-9]{9}/.test(_this.value)){ _p.innerHTML="<i></i>请输入正确的电话号码!"; } else{ _ul.className="ok"; _p.innerHTML="<i></i>"; flag=true; } return flag; } , pwd:function(_ul,_this,_p){ _ul.className="error"; var flag=false; if(_this.value==""){ _p.innerHTML="<i></i>密码不能为空!"; }else if(_this.value.length<6 || _this.value.length>16){ _p.innerHTML="<i></i>密码应该在6-16位之间!"; }else if(!/^[\w_-]+$/.test(_this.value)){ _p.innerHTML="<i></i>密码只能由大小字母、数字、下划线组成!"; } else{ _ul.className="ok"; _p.innerHTML="<i></i>"; flag=true; } return flag; } , qrpwd:function(_ul,_this,_p){ _ul.className="error"; var flag=false; if(_this.value==""){ _p.innerHTML="<i></i>为了保证您输入的密码准确无误,请再次输入密码!!"; }else if(_this.value!=$("pwd").value){ _p.innerHTML="<i></i>密码两次输入不一致,请重新输入!"; } else{ _ul.className="ok"; _p.innerHTML="<i></i>"; flag=true; } return flag; } } } var subback=function(inps){ for(var i=0;i<inps.length;i++){ //inps[i].focus(); var flag=true; var par=inps[i].parentNode.parentNode; var msg=par.getElementsByTagName("p")[0]; if(!check.blurs[inps[i].id](par,inps[i],msg)){ flag=false; break; } } if(flag){ alert("可提交"); }<span style="background-color: rgb(255, 255, 255); line-height: 1.5;"> else{</span>
由最代码官方编辑于2014-5-23 13:32:47
相关文章推荐
- 韩顺平_php从入门到精通_视频教程_第11讲_初识css_类选择器_id选择器_html选择器_学习笔记_源代码图解_PPT文档整理
- CSS学习笔记-附加篇( CSS+JS实现的选项卡效果(html组件))
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第28讲_js二维数组_js冒泡排序_二分查找_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第25讲_js系统函数_js函数调用方式_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第29讲_二维数组转置_js面向对象编程介绍 类(原型对象)和对象_学习笔记_源代码图解_PPT文档整理
- 韩顺平_php从入门到精通_视频教程_第10讲_div-css开山篇_学习笔记_源代码图解_PPT文档整理
- jsbeautifier + CScript/WScript/JavaScript 编程实现 JavaScript、HTML、CSS 代码格式化 js 脚本命令行工具 并集成到 EditPlus
- 学习网站开发必备推荐!30天学会HTML和CSS基础入门视频教程 (免费精品课程)
- 韩顺平_轻松搞定网页设计(html+css+javascript)_ 第18讲_js课程介绍_js基本介绍_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第24讲_js案例讲解_js自定义函数_学习笔记_源代码图解_PPT文档整理
- JS操作的Html控件及其代码→学习笔记
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第22讲_js三大流程控制(顺序流程、分支控制、循环控制)_学习笔记_源代码图解_PPT文档整理
- 黑马程序员之HTML学习笔记:有关css和js针对不同浏览器兼容的问题
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理
- CSS+JS实现很流行的用户列表代码
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第19讲_js运行原理_js开发工具介绍_js程序(hello)_js基本语法_学习笔记_源代码图解_PPT文档整理
- 韩顺平_php从入门到精通_视频教程_第2讲_html运行原理②_html文件基本结构_html元素和属性_学习笔记_源代码图解_PPT文档整理
- 韩顺平_php从入门到精通_视频教程_第1讲_html介绍_html运行原理①_学习笔记_源代码图解_PPT文档整理
- 韩顺平_php从入门到精通_视频教程_第16讲_div-css作业评讲②_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第30讲_类和对象细节_创建对象的几种方式_js对象内存分析_学习笔记_源代码图解_PPT文档整理