项目：注册登录案例

通过之前所学内容，包括基本的html,css,javascript操作，还学习了正则表达式，运用所学内容，做了个注册登录的页面。

页面布局

如下：

HTML设置

在HTML里，我运用的是一个大的div包裹整个内容，每一块小内容再分别用div包裹，并设置好每项的id属性和class属性，再包括placeholder最最基本的友情提醒的属性。
以用户名为示范：

      <!-- 用户名 -->
      <div class="user">
        <span class="star">*</span>
        <label>用户名：</label>
        <input type="text" class="text" id="userName" placeholder="用户设置成功后不可修改">
        <p class="item"></p>
      </div>
      <div class="line"></div><br/>

CSS设置

接下来就是设置CSS样式，这里要求的是当文本框焦点时，右边会有提示，并且文本框有个阴影效果。

因为之前在html页面中我设置的提示字是用一个p标签class属性为item，所以这里我运用到display: inline-block;使其从块级元素成为行级元素。

/*文本框选中时样式设置*/
#main .user .text:focus{
   
  box-shadow: 1px 1px 10px #6385d1;
}
/*提示内容设置*/
#main .item{
   
  display: inline-block;
  position: absolute;
  left:70%;
  font-size:14px;
  font-weight: normal;
}

JavaScript设置

在JavaScript中要做的部分就很多了，首先就是最明显的，当用户没有输入某一项就跳转到另一项时，右边的提示文字会变成红色字体，并且会有新的提示语句，同时也要判断每一项是否符合填写要求，不能到最后要提交时再提醒，这样才能让用户有个好的体验。

那么以用户名来做个示范：

// 用户名设置
//当光标输入时友情提示
userName.onfocus=function(){
   
  item[0].innerHTML = "请输入6-30位字母、数字或'_'";
  item[0].style.color = 'green';
};
//当鼠标离开输入框时 产生验证
userName.onblur = function(){
   
  var reg =/^\w{6,30}$/;
  if(this.value==""){
   
    item[0].innerHTML = "用户名不能为空";
    item[0].style.color = 'red';
  } else if (!reg.exec(userName.value)){
   
    item[0].innerHTML = "请输入6-30位字母、数字或'_'";
    item[0].style.color = 'red';
  } else{
   
    item[0].innerHTML = "格式正确";
    item[0].style.color = 'green';
    test0 = true;
  }
}

在提交的时候，也需要做个校验，看看用户是否每一项都填写并且填对，是否阅读了规定条约并且打钩，这里我的做法是先将所有项默认不正确，到填写每一项时候判断成功，再讲他覆盖为正确
代码为：

//默认每一项格式不正确
var test0 = false,
test1 = false,
test2 = false,
test3 = false,
test4 = false,
test5 = false,
test6 = false;

在上面的JS设置用户名时也看到了最后那行test0 = true; 在每一项自己判断的时候都要加喔~

继续说提交的时候，这里我们要想一下，是用逻辑与还是或，思考后我用了逻辑或，这是一开始我写的代码

button.onclick=function(){
   
if(choose.checked==false || test0==false || test1==false || test2==false || test3==false || test4==false || test5==false || test6==false){
   
alert("您登记的信息有误！");
} else{
   
    alert("登记成功！");
  }
};

后来根据小伙伴的讲解，我觉得if后面那一行实在太长，改为他说的逻辑非和逻辑或，后来我的代码做了个改变，这是后来的代码

button.onclick=function(){
   
  if(!test0 || !test1 || !test2 || !test3 || !test4 || !test5 || !test6){
   
    alert("您登记的信息有误！");
  } else if(choose.checked==false){
   
    alert("您未勾选《我已阅读并同意遵守规定》")
  } else{
   
    alert("登记成功！");
  }
};

这样看起来代码就简洁并且很好理解了

最后我还归纳了几个知识点

1.封装ID

function $(id){
   
  return typeof(id)==="string"?document.getElementById(id):id;
}

2.querySelectorAll
querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回节点列表（集合）、数组
兼容：chrome4.0+、Ie8+、firefox3.5+、opera10+、safari3.2+
代码：

// 获取文档中所有 class="example" 的 <p> 元素
var x = document.querySelectorAll("p.example");