vue2之简易的pc端短信验证码的问题及处理方法


Posted in Javascript onJune 03, 2019

vue2之简易的pc端短信验证码的问题及处理方法

<提示语部分不要在意(非重点部分)>

简单说下布局(采用的是 vue的element ui的ui框架 )进行布局操作的

子组件模板部分如下(code部分是很基础的)

<template>
 <div class="forget">
  <el-dialog title="修改新密码" :visible.sync="dialog.visible"
  :close-on-click-modal="false"
     :close-on-press-escape="false"
  >
   <el-form :model="dialog.ruleForm" status-icon :rules="rules" :ref="dialog.ruleForms"

      label-width="100px" class="demo-ruleForm">
    <el-form-item label="手机号码" prop="phone" required>
     <el-input type="text" v-model.number="dialog.ruleForm.phone" autocomplete="off"
        :clearable="true"
     ></el-input>
    </el-form-item>
    <el-form-item label="手机验证码"prop="code" required>
     <div class="send-code">
      <el-input type="text" v-model="dialog.ruleForm.code" autocomplete="off"
         maxlength="6"
         show-word-limit
         :clearable="true"
      ></el-input>
      <el-link

        :style="{color:dialog.ruleForm.phone.toString().length===11?'#222':'#999'}"
        type="info" :underline="false"
        :disabled="getDisabled"
        @click="sendCode({
        phone:dialog.ruleForm.phone,sendCode:dialog.ruleForm.sendCode
        })"
      >{{dialog.ruleForm.sendCode}}</el-link>
     </div>
    </el-form-item>
    <el-form-item label="新密码" prop="newPwd" required>
     <el-input :clearable="true" type="password" v-model="dialog.ruleForm.newPwd"></el-input>
    </el-form-item>
   </el-form>
   <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="determine(dialog.ruleForms)"
       :loading="dialog.ruleForm.loading"
    >{{dialog.ruleForm.loadingText}}</el-button>
   </div>
  </el-dialog>
 </div>
</template>

子组件逻辑部分如下(code部分是很基础的)

在@/utils/validate.js中的使用正则代码

// 验证手机号码
export const validatPhone = /^(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/
//验证密码
export const validatePassword = /^(?=.*\d)(?=.*[a-zA-Z]).{5,20}$/

<script>
 import {validatPhone,validatePassword} from '@/utils/validate'
 export default {
  props:{
   dialog:{
    type:Object,
    default: {}
   },
  },
  name: "Forget",
  data(){
  // 使用正则进行验证手机号码
   const validatePhone = (rule, value, callback) => {
    if (!value) {
     return callback(new Error('请输入手机号码'));
    }
    else {
     if (!validatPhone.test(value)) {
      callback(new Error('请输入手机号码'));
      return
     }
     callback();
    }
   };
   // 使用进行验证手机验证码
   const validateCode = (rule, value, callback) => {
    if (value === '') {
     return callback(new Error('请输入验证码'));
    } else {
    //真正环境请修改成自己的逻辑即可
     if (this.dialog.ruleForm.code !== '123456') {
      callback(new Error('验证码失误,请重新输入'))
      // this.dialog.ruleForm.code = ''
      return
     }
     callback();
    }
   };
   // 使用正则进行验证密码
   const validatenewPwd = (rule, value, callback) => {
    if (value === '') {
     callback(new Error('请输入密码'));
     return
    } else if (!validatePassword.test(value)) {
     return callback(new Error('新密码不合法'));
    } else {
     callback();
    }
   };
   return {
    rules:{ //验证表单元素中的规则
     phone:[
      { validator: validatePhone, trigger: ['blur','change'] }
     ],
     code:[
      { validator: validateCode, trigger: ['blur','change'] }
     ],
     newPwd:[
      { validator: validatenewPwd, trigger: ['blur','change'] }
     ],
    },
    timer: null//操作定时器

   }
  },
  computed:{
   //getDisabled() 当手机号码的长度等于11位和点击验证码状态为false时,则可以进行倒计时操作 
   getDisabled(){
    let phone= this.dialog.ruleForm.phone
    const isChick = this.dialog.ruleForm.isChick
    if(phone.toString().length === 11 && isChick ===false){
     return false
    }
    else {
     // this.dialog.ruleForm.disabled = true
     return true
    }

   }
  },
  methods:{
   // 发送验证码
   sendCode(opt){
    this.$emit('sendCode',opt)
   },
   // 点击取消按钮时触发
   cancel(){
    this.$emit('cancel')
   },
   // 点击确定按钮时触发
   determine(resf){

    this.$refs[resf].validate((valid) => {
     if (valid) {
      this.$emit('determine',resf)
     } else {
      console.log('error submit!!');
      return false;
     }
    });

   },
  }
 }
</script>

子组件逻辑部分如下(code部分是很基础的)

<style scoped lang="scss">
 .forget{
  /deep/ .el-dialog__wrapper{
   .el-dialog{
    max-width: 500px;
    .el-dialog__header{
     text-align: center;
    }
   }
   .demo-ruleForm{
    .el-form-item__content{
     max-width:100%
    }
   }
   .el-dialog__body{
    .el-form-item{
     text-align: center;
    }
   }
  }
  .send-code{
   display: flex;flex: 1;justify-content: space-evenly;
   /deep/ .el-input{
    margin-right: 12px
   }
   /deep/ .el-link{
    white-space: nowrap;
    display: inline-block;
    line-height: 1;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 10px;
    font-size: 14px;
    border-radius: 4px;
   }
  }
  .dialog-footer{
   display: flex;
   flex: 1;
   justify-content: center;
   /deep/ .el-button{
    flex: 0 0 40%;
   }
  }
 }
</style>

父组件中的模板部分

<template>  <forget :dialog="dialog"@cancel="dialog.visible= false" @determine="determine" @sendCode="sendCode"></forget>
</template>

为什么需要使用set这个api方法呢

如下截图

vue2之简易的pc端短信验证码的问题及处理方法

可以学习下这个链接的使用set的例子

全局变量globals.js文件

[vue-set]的文档( cn.vuejs.org/v2/api/#Vue… )

说明(*****向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。)

export default {
 //判断是否点击了
 isChick(data,key='disabled',count=0){
  data[key] =true
  if(count<=0){
   data[key] =false
  }
 },
 //此处是重点 使用的vue官网给的api方法
 [vue-set](https://cn.vuejs.org/v2/api/#Vue-set)
 sendCode(self,name,k,v){
  self.$set(name,k,v)
 }
}

父组件中的逻辑部分

<script>
 export default {
  data() {
   return {
   // 显示子组件修改密码的对象变量
      dialog: {
     visible: false, //是否显示 
     ruleForms: 'ruleForms', //点击按钮后,需要操作的refs(也就是dom元素)
     ruleForm: { //所需要进行在表单中操作的部分
      phone: '',
      newPwd: '',
      code: '',
      sendCode: '发送验证码',
      disabled: false,
      isChick:false,
      loading: false,
      loadingText: '确 定'
     },
     
    }, 
    //倒计时60秒
     timeCount:60
   }
   
  },
  methods:{
   //重点部分
   sendCode60s(self,opt){
    let count=self.timeCount;
    const ruleForm = self[opt.dialog][opt.ruleForm]
    self.timer = setInterval(()=>{
     //这个按钮是
     self.$globals.isChick(ruleForm,'disabled',count)
     let code = count<10?`0${count}s后重新发送`: `${count}s后重新发送`
     self.$globals.sendCode(self,ruleForm,opt.sendCode,code)
     self.$globals.isChick(ruleForm,'isChick',count)
     if(count<=0){
      ruleForm.disabled = false
      self.$globals.isChick(ruleForm,'disabled')
      code = '发送验证码'
      clearInterval(self.timer)
      count =self.timeCount
      self.$globals.sendCode(self,ruleForm,opt.sendCode,code)
      self.$globals.isChick(ruleForm,'isChick')
     }
     count --
    },1000)

   },
   //发送验证码sendCode
   sendCode(opt){
    const phone = opt.phone
    //判断手机号码第1位是否是数字1开头
    if(phone.slice(0,1)!=='1'){
     this.$message({
      showClose: true,
      message: '请输入正确的手机号码',
      type: 'error'
     });
     return
    }
    this.$confirm(`向${phone}发送短信验证码?`, '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
    }).then(() => {
     this.$message({
      type: 'success',
      message: '发送短信验证码成功!'
     });
     const opt ={
      dialog: 'dialog',
      ruleForm: 'ruleForm',
      sendCode:'sendCode'
     }
     this.sendCode60s(this,opt)
    }).catch(() => {
     this.$message({
      type: 'info',
      message: '发送短信验证码失败'
     });
    });
   },
   //新的密码
   determine(formName){
    console.log(formName)
    // this.$refs[formName].validate((valid) => {
    //  if (valid) {
    //   this.dialog.ruleForm.loading = true
    //   this.dialog.ruleForm.loadingText ='发送中...'
    //  } else {
    //   return false;
    //  }
    // });
   },
   
  }
 }
</script>

总结

以上所述是小编给大家介绍的vue2之简易的pc端短信验证码的问题及处理方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
jquery滚动特效集锦
Jun 03 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
详解JS数值Number类型
Feb 07 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
微信小程序批量上传图片到七牛(推荐)
Dec 19 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 #Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 #Javascript
Vue基础学习之项目整合及优化
Jun 02 #Javascript
JavaScript判断对象和数组的两种方法
May 31 #Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 #Javascript
Vuex新手的理解与使用详解
May 31 #Javascript
一文快速了解JQuery中的AJAX
May 31 #jQuery
You might like
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
php之Memcache学习笔记
2013/06/17 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
python enumerate函数的使用方法总结
2017/11/15 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
生产车间主管岗位职责
2013/12/28 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
元旦联欢会主持词
2014/03/26 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
报名委托书
2015/01/29 职场文书
小学重阳节活动总结
2015/03/24 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
离婚纠纷代理词
2015/05/23 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android