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中this关键字(翻译+自我理解)
Oct 20 Javascript
基于jquery封装的一个js分页
Nov 15 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
详解Vue的ref特性的使用
Jan 24 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-Java-Bridge使用笔记
2014/09/22 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
js 居中漂浮广告
2010/03/21 Javascript
js 设置选中行的样式的实现代码
2010/05/24 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
Python调用C语言的实现
2019/07/26 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
python集合能干吗
2020/07/19 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
机电一体化专业应届本科生求职信
2013/09/27 职场文书
介绍信格式样本
2015/05/05 职场文书
计划生育目标责任书
2015/05/09 职场文书
婚宴新郎致辞
2015/07/28 职场文书
使用javascript解析二维码的三种方式
2021/11/11 Javascript
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
Python中的嵌套循环详情
2022/03/23 Python
Java Spring读取和存储详细操作
2022/08/05 Java/Android
Windows server 2016服务器基本设置
2022/08/14 Servers