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 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
vue在图片上传的时候压缩图片
Nov 18 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 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正则表达式获取内容所有链接
2015/07/24 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
python:print格式化输出到文件的实例
2018/05/14 Python
python中的print()输出
2019/04/12 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
金融专业应届生求职信
2013/11/02 职场文书
餐饮业会计岗位职责
2013/12/19 职场文书
总经理职责
2013/12/22 职场文书
乔迁宴答谢词
2014/01/21 职场文书
2014年财务人员工作总结
2014/11/11 职场文书