js学习入门教程笔记：css+html+js用户注册代码实现

缺乏、安全感 2022-07-17 03:09 66阅读 0赞

原文：[js学习入门教程笔记：css+html+js用户注册代码实现][js_css_html_js]

源代码下载地址： [http://www.zuidaima.com/share/1834762971532288.htm][js_css_html_js]

运行截图：如下：

![20140523133819814.jpg][]

用户注册：结构层：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>用户帐号：<input type="text" id="uname"/></li>
 <li>给自己起个名字吧，它将成为您登录本站的用户名</li>
 </ul>
 </li>
 <li>
 <ul class="def">
 <li>电子邮箱：<input type="text" id="email"/></li>
 <li>请输入您的常用邮箱地址，此邮箱地址将作为修改密码</li>
 </ul>
 </li>
 <li>
 <ul class="def">
 <li>手机号码：<input type="text" id="mobile"/></li>
 <li>请输入您的手机号码，方便我们之间的联系</li>
 </ul>
 </li>
 <li>
 <ul class="def">
 <li>安全密码：<input id="pwd" type="password"/></li>
 <li>请输入安全密码，它将作为您的登录密码</li>
 </ul>
 </li>
 <li>
 <ul class="def ">
 <li>确认密码：<input type="password" id="qrpwd"/></li>
 <li>请将上面的密码再输入一次</li>
 </ul>
 </li>
 <li>
 <ul>
 <li></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].οnfοcus=function(){
 var par=this.parentNode.parentNode;
 var msg=par.getElementsByTagName("p")[0];
 par.className="point";
 check.focus[this.id](par,this,msg);
 }
 inp[i].οnblur=function(){
 var par=this.parentNode.parentNode;
 var msg=par.getElementsByTagName("p")[0];
 par.className="def";
 check.blurs[this.id](par,this,msg);
 }
 }
 $("enter").οnclick=function(){
 subback(inp);
 }
 }
 var check={
 focus:{
 uname:function(_ul,_this,_p){
 _ul.className="point";
 _p.innerHTML="给自己起个名字吧，它将成为您登录本站的用户名";
 },
 email:function(_ul,_this,_p){
 _ul.className="point";
 _p.innerHTML="请输入您的常用邮箱地址，此邮箱地址将作为修改密码";
 },
 mobile:function(_ul,_this,_p){
 _ul.className="point";
 _p.innerHTML="请输入您的手机号码，方便我们之间的联系";
 },
 pwd:function(_ul,_this,_p){
 _ul.className="point";
 _p.innerHTML="请输入安全密码，它将作为您的登录密码";
 },
 qrpwd:function(_ul,_this,_p){
 _ul.className="point";
 _p.innerHTML="请将上面的密码再输入一次";
 }
 },
 blurs:{
 uname:function(_ul,_this,_p){//ul标签、当前输入框、错误的信息
 _ul.className="error"; 
 var flag=false;
 if(_this.value==""){ 
 
 _p.innerHTML="用户名不能为空！";
 }else if(_this.value.length<3 || _this.value.length>16){ 
 _p.innerHTML="用户名长度应控制在3-16位字符之间！";
 }else if(!/^[\w_-\u4e00-\u9fa5]+$/.test(_this.value)){ 
 _p.innerHTML = "用户名只能由大小写字母，数字，下划线，中横线和中文组成！";
 }else{
 _ul.className="ok";
 _p.innerHTML="";
 flag=true;
 
 }
 
 return flag;
 },
 email:function(_ul,_this,_p){
 _ul.className="error";
 var flag=false;
 if(_this.value==""){
 
 _p.innerHTML="邮箱不能为空！";
 }else if(!/\w+((-w+)|(\.\w+))*\@[\w]+((\.|-)[\w]+)*\.[\w]+/.test(_this.value)){ 
 _p.innerHTML="请输入正确的邮箱地址！";
 }
 else{
 _ul.className="ok";
 _p.innerHTML="";
 flag=true;
 }
 return flag=false;
 }
 ,
 mobile:function(_ul,_this,_p){
 _ul.className="error";
 var flag=false;
 if(_this.value==""){
 
 _p.innerHTML="电话号码不能为空！";
 }else if(!/0?(13|14|15|18)[0-9]{9}/.test(_this.value)){ 
 _p.innerHTML="请输入正确的电话号码！";
 }
 else{
 _ul.className="ok";
 _p.innerHTML="";
 flag=true;
 }
 return flag;
 }
 ,
 pwd:function(_ul,_this,_p){
 _ul.className="error";
 var flag=false;
 if(_this.value==""){
 
 _p.innerHTML="密码不能为空！";
 }else if(_this.value.length<6 || _this.value.length>16){
 
 _p.innerHTML="密码应该在6-16位之间！";
 }else if(!/^[\w_-]+$/.test(_this.value)){ 
 _p.innerHTML="密码只能由大小字母、数字、下划线组成！";
 }
 else{
 _ul.className="ok";
 _p.innerHTML="";
 flag=true;
 }
 return flag;
 }
 ,
 qrpwd:function(_ul,_this,_p){
 _ul.className="error";
 var flag=false;
 if(_this.value==""){
 _p.innerHTML="为了保证您输入的密码准确无误，请再次输入密码！！";
 
 }else if(_this.value!=$("pwd").value){
 
 _p.innerHTML="密码两次输入不一致，请重新输入！";
 }
 else{
 _ul.className="ok";
 _p.innerHTML="";
 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("可提交");
 ｝ else{

由最代码官方编辑于2014-5-23 13:32:47

[js_css_html_js]: http://www.zuidaima.com/share/1834762971532288.htm
[20140523133819814.jpg]: http://static.zuidaima.com/images/10375/201405/20140523133819814.jpg