交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 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方法呢

    如下截图

    可以学习下这个链接的使用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端短信验证码的问题及处理方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    您可能感兴趣的文章:

    • vue 实现通过手机发送短信验证码注册功能
    • vue实现验证码按钮倒计时功能
    • 在Vue项目中引入腾讯验证码服务的教程
    • vue中手机号,邮箱正则验证以及60s发送验证码的实例
    • vue实现验证码输入框组件
    • Vue中添加手机验证码组件功能操作方法
    • 简单实现vue验证码60秒倒计时功能
    • vue生成随机验证码的示例代码
    • Vue 短信验证码组件开发详解

    广而告之:
    热门推荐:
    JQuery中的事件及动画用法实例

    本文实例讲述了JQuery中的事件及动画用法。分享给大家供大家参考。具体分析如下: 1.bind事件 复制代码 代码如下:<script src="script/jquery-1.7.1.min.js"></script> <script> $(function () { $("#divid h5.head").bind("click", function () {  //b···

    MySQL数据库同时查询更新同一张表的方法

    在平常的项目中,经常会碰到这样的问题:我需要在一张标中同时更新和查询出来的数据。例如:有如下图一张表数据,现在需要更新操作为:把status=1的name值更新为id=2的name值 通常情况下我们会想到如下语句来实现这个需求: UPDATE tb_testSET NAME = ( SELECT NAME FROM tb_t···

    详解vue-cil和webpack中本地静态图片的路径问题解决方案

    本文介绍了vue-cil和webpack中本地静态图片的路径问题解决方案,分享给大家,具体如下: 1 本地图片动态绑定img的src属性 一般我们在html中或者vue组件文件中引用图片是这样,这是不需要做特别处理的 我们将图片放入assets中或者重新建立个文件夹img什么的都可以,随意~ 但···

    mysql运行net start mysql报服务名无效的解决办法

    运行net start mysql报服务名无效的解决办法,供大家参考,具体内容如下 1. 症状 以前电脑上安装了 MySQL,今天在电脑上运行,发现没有 MySQL 服务了 C:UsersAdministrator>net start mysql 服务名无效。 请键入 NET HELPMSG 2185 以获得更多的帮助 2. 解决办法 输入 my···

    jQuery Ajax()方法使用指南

     jQuery提供了简单而强大的选择器功能,同时对Ajax操作也给出了很好的支持。在Ajax方面,jQuery除了提供底层的jQuery.ajax()方法外,也提供了下面的简单方法: (1)       jQuery.get(url, [data], [callback], [type]) (2)  ···

    织梦模板mip改造和对接熊掌号视频教程

    MIP(Mobile Instant Pages - 移动网页加速器),是一套应用于移动网页的开放性技术标准。通过提供 MIP-HTML 规范、MIP-JS 运行环境以及 MIP-Cache 页面缓存系统,实现移动网页加速。 MIP 主要由三部分组织成: 1、MIP-HTML:基于 HTML 中的基础标签制定了全新的规范,通···

    详解layui中的树形关于取值传值问题

    本文介绍了layui中的树形关于取值传值问题,分享给大家,具体如下: 这个是我们需要的效果,实际操作中会先执行渲染 然后在执行方法,然后我们发现树形的JSON是空,调试了N遍一直以为是优先级别的问题了。 最后解决方案是 <script type="text/javascript"> ////lay···

    Mysql auto

    方法一 delete from test; alter table `test` auto_increment=1 (好处,可以设置AUTO_INCREMENT 为任意值开始) 提示:如果表列和数据很多,速度会很慢,如90多万条,会在10分钟以上。 方法二 truncate table test (好处,简单,AUTO_INCREMENT 值重新开始计数) ···

    究竟什么是Node.js?Node.js有什么好处?

    Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个(只有一个)物理机的连接代码。 简介 如果您听说过 Node,或者阅读过一些文章,宣称 Node 是多么多么的棒,那么···

    jQuery ajax的功能实现方法详解

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧。 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是Promise模式的一种实现,而我们这里没有讲过,所以我们就不使用这一模式啦。 我们只定义一个ajax方···