【每日一练】小兔鲜项目-04

小兔鲜项目登录页：

结构部分：

 
  

    

    进入网站首页
  
  
  

    

      

        

          

            账户登录
            二维码登录
          
          

            

              手机验证码登录
            
            

              
              
            
            

              
              
            
            

              
                
                
              
              我已同意 《服务条款》 和 《服务条款》
            
            

              登 录
              
              忘记密码？
              免费注册
            
          
          

            
          
        
      
    
  
  
  

    
    

      

        关于我们
        帮助中心
        售后服务
        配送与验收
        商务合作
        搜索推荐
        友情链接
      
      
CopyRight © 小兔鲜儿
    
  

思路分析：

点击登录按钮 : 表单中的按钮，需要阻止默认跳转

1.检查用户名和密码长度 >= 6

2.检查是否勾选条款

3.免登录：存储用户名和密码 到localStorage

4.跳转首页 ： location.href = 'url'

交互行为：

//1.获取元素
let dl = document.querySelector('.dl')//登录
let username = document.querySelector('[name="username"]')//用户名
let password = document.querySelector('[name="password"]')//用户名
let remember = document.querySelector('.remember')//勾选框

//2.点击登录
dl.onclick = function(e){
  //1.0 阻止表单默认跳转
        e.preventDefault()
  //1.检查用户名和密码长度  username.value.length
        if( username.value.length < 6 || password.value.length < 6){
          alert('用户名和密码长度不得小于6位')
          return
        }
  //2.检查是否没有勾选
        if( !remember.checked ){ 
            alert('必须勾选协议')
            return
        }
  //3.存储用户名和密码
        localStorage.setItem('username',username.value)
        localStorage.setItem('password',password.value)
  //4.跳转首页
        location.href = './index.html'
}