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 相关文章推荐
判断是否输入完毕再激活提交按钮
Jun 26 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
Node.js返回JSONP详解
May 18 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
vue-cli项目中使用Mockjs详解
May 14 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多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
jquery 模板的应用示例
2013/11/12 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
Python matplotlib实时画图案例
2020/04/23 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
感恩教育月活动总结
2014/07/07 职场文书
依法行政工作汇报
2014/10/28 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书