vue实现登陆页面开发实践


Posted in Vue.js onMay 30, 2022

组件使用的是vant ui,具体用法可去官网看。

分几个部分考虑,

一、输入框input的校验:1、blur时没有值和格式不符合的逻辑校验
2、限制输入长度逻辑,比如手机号只能11位,验证码只能6位。
二、验证码按钮逻辑
1、不同状态下验证码颜色,文案,是否能点击,是否显示记数需要兼顾。
2、验证码能够正常点击是在手机号格式正确情况下,所以这里要有个监听手机号,一旦格式符合,验证码生效
3、关于计数器的逻辑。

以下会从上面的点开考虑:

一、input的校验没有可说的,记住俩点,一个控制输入长度,一个控制格式。

1、格式校验

handleblurtel(){
      let phoneCodeVerification = /^[1][3,4,5,7,8][0-9]{9}$/;
     if(this.form.tel===''){
       this.errorTxt="请输入手机号码" // 不同情况下错误提示
     }else if(!phoneCodeVerification.test(this.form.tel)){
       this.errorTxt="请输入正确的手机号码格式"
     }else{
       this.errorTxt='' //有效情况记得清空错误提示
       return true
     }
   },
 // 验证码必填和格式验证
   handleblurcode(){
     if(this.form.code===''){
       this.errorTxtcode="请输入验证码"
     }else if(this.form.code.length>0&&this.form.code.length<6){
       this.errorTxtcode="请输入正确的验证码格式"
     }else{
       this.errorTxt=''
       return true
     }
   }

2、长度控制

// 限制输入的字符串长度
    hanldeInputTel(){//手机号长度保证11位
      if(this.form.tel.length>11){
        this.form.tel=this.form.tel.slice(0,11)
      }
    },
    handleInputCode(){//验证码保证6位
      if(this.form.code.length>6){
        this.form.code=this.form.code.slice(0,6)
      }
    },

二、验证码逻辑:

贴下html代码:

<van-field
    v-model="form.code" 
    center
    clearable
    label="短信验证码"
    :error-message="errorTxtcode"
    placeholder="请输入短信验证码"
    @input="handleInputCode"
    @blur="handleblurcode"
    
  >
    <template #button>
      <button size="small" :disabled="btnStatus" :class="btnStyle" type="primary" @click="clickCode">
        <van-count-down :time="time" format="ss" v-if="countFlag===1" @finish="finishDown"></van-count-down>
        <span>{{countTxt}}</span>
      </button>
    </template>
  </van-field>

vue实现登陆页面开发实践

vant-count-down是vant组件自带的计数器用法,直接引入,time是初始化时间数,比如60s,1min,format是时间格式:时分秒,秒等。
@finish是自带的方法,具体api可去官方网站看,这里不做介绍。

1、初始化按钮状态:

data(){
    return {
      form:{
        tel:'',
        code:''
      },
      errorTxt:'',// 手机号错误提示
      errorTxtcode:'',// 验证码错误提示
      btnStatus:true,// 按钮不可点击
       btnStyle: 'nomalStyle',// 促初始化按钮样式
       time:60*1000,// 时间数
       countTxt:'发送验证码',// 初始化按钮文案
       countFlag:0//0:展示文案,1;展示计数,开始计时
    }
  
  },

1、开始计时:
按钮状态不可点击状态btnStatus,按钮样式:btnStyle,开始计数:countFlag

// 点击按钮开始计时
    clickCode(){
      this.btnStatus=true
      this.btnStyle=`countdown`
      this.countFlag=1//开始计时
      this.countTxt=''//文案为空
    },

2、倒计时结束后:需要修改这些参数
按钮可继续点击btnStatus,显示文案countFlag,c文案内容countTxt

//  倒计时结束
    finishDown(){
       this.btnStyle=`canClick`
       this.btnStatus=false
       this.countTxt='重新获取'
       this.countFlag=0
    },

3、按钮状态何时触发:
手机号符合格式情况下,watch里面监听手机号

watch:{
   form: {
      handler() {
        if(/^[1][3,4,5,7,8][0-9]{9}$/.test(this.form.tel)){
         this.btnStyle = 'canClick'
          this.btnStatus=false
        }else{
         this.btnStatus=true
        }
      },
      immediate: true,
      deep: true
    }
  },

vue实现登陆页面开发实践

vue实现登陆页面开发实践

vue实现登陆页面开发实践

4、最后点击提交的简单写法:

// 提交用户信息
    sumbit(){
      let telStatus=this.handleblurtel()
      let codeStatus=this.handleblurcode()
      if(telStatus&&codeStatus){
        this.axios.get({}).then(res=>{
          console.log('提交成功')
          // 把后端会的token存入前端缓存
          localStorage.setItem('token',res.data.toekn)
          // 跳转到首页
          this.$router.push({path:'/'})
        })
      }
    },

1,2,3步可以一步一步来,这样思路就会清晰,不然会觉得验证码一会儿这样显示一会儿那样显示,就会很混乱,所以先把单个功能开发完,最后写按钮变化前提条件 这样思路就很明确。

样式放在文末:

.nomalStyle {
    background: #EAEEFD;
    color: #5E6679;
  }
  button {
      width: 161px;
      height: 61px;
      border-radius: 31px;
      line-height: 61px;
      font-size: 24px;
      text-align: center;
    }
    .canClick {
    background-color: #3E64D4;
    color: #FFFFFF;
  }
   .countdown {
    background: #EAEEFD;
    color: #3E64D4
  }

到此这篇关于vue实现登陆页面开发实践的文章就介绍到这了!

Vue.js 相关文章推荐
vue $router和$route的区别详解
Dec 02 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
vue里使用create, mounted调用方法
Apr 26 Vue.js
vue router 动态路由清除方式
May 25 #Vue.js
vue如何清除浏览器历史栈
May 25 #Vue.js
vue3不同环境下实现配置代理
May 25 #Vue.js
vue使用element-ui按需引入
May 20 #Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 #Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 #Vue.js
Vue组件化(ref,props, mixin,.插件)详解
You might like
php session 预定义数组
2009/03/16 PHP
服务器web工具 php环境下
2010/12/29 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
vue $set 给数据赋值的实例
2019/11/09 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
详解python时间模块中的datetime模块
2016/01/13 Python
Python中url标签使用知识点总结
2020/01/16 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
Python3.9新特性详解
2020/10/10 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
大学生涯自我鉴定
2014/01/16 职场文书
2014年变电站工作总结
2014/12/19 职场文书
歌咏比赛主持词
2015/06/29 职场文书
公司财务管理制度
2015/08/04 职场文书
校园安全教育心得体会
2016/01/15 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python