VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 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 短信验证码组件开发详解

    广而告之:
    热门推荐:
    PHP封装函数实现生成随机的字符串验证码

    前言 一般情况下我们在做程序的时候肯定会有很多地方使用到随机字符串、比如做验证码用到的、然后就把这个函数封装起来、使用时候要设置2个参数、原理是随机抓取字符串、对字符串进行拼接 $str设置里要被采集的字符串、比如 $str=´jfowef34098094j3204efa234sfg2z23sr···

    JavaScript刷新页面的几种方法总结

    1,reload 方法 该方法强迫浏览器刷新当前页面。 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") 2,replace 方法 方法通过指定URL替换当···

    人大复印资料处理程序

    <? //本程序为一个搜索,目前设计服务于文章库。 //编者:孔秀祥。日期:2001/4/10 if(!$UploadAction): require "config.php3"; if(!isset($table)){ //$table="artical"; } /* $link_id=@MYSQL_CONNECT($hostname,$dbusername,$dbpassword) OR ···

    PHP实现的多维数组去重操作示例

    本文实例讲述了PHP实现的多维数组去重操作。分享给大家供大家参考,具体如下: 最近用到了一个获取历史会议列表的问题,需要去这个多维数组去重后返回返回给客户端,这里使用了几个php的组装函数,分享下,示例代码如下: <?php $str = '{ "status": 0, "result":···

    PHP 命令行工具 shell

    所有这些命令都衍生一个子进程,用于运行您指定的命令或脚本,并且每个子进程会在命令输出写到标准输出 (stdout) 时捕捉它们。 shell_exec() shell_exec() 命令行实际上仅是反撇号 (`) 操作符的变体。如果您编写过 shell 或 Perl 脚本,您就知道可以在反撇号操作符内部···

    如何解决.vue文件url引用文件的问题

    解决.vue文件url引用文件的问题 遇到的问题: 在css中引入图片,明明目录结构是对的,还是This dependency was not found; dev好好的,build 之后凉凉,图片加载404 添加图片路径配置 webpack 添加 alias //webpack.base.conf.js alias: { '@': resolve('src'), //加···

    vs中通过剪切板循环来循环粘贴不同内容

    举个简单的例子,这里有一段代码: 复制代码 代码如下: function Button1_onclick() { alert("Hello"); alert("JacobSong"); } 首先剪切两个字符串:先剪切"JacobSong",然后是"Hello",在第一处按下Ctrl+Shift+V键,就会出现这样的 复制代码 代码如下: function Button1_···

    提升PHP执行速度全攻略(下)

    Web内容的压缩(令你客户用起来更“爽”) 经过以上两个的方法,相信你的PHP应用的性能已经得到了很大的提高,现在该从另一个方面来考虑了:下载速度。如果你的应用只是在公司内跑,所有的客户都使用100Mb/s的以太网连接到服务器,这可能不是一个问题,···

    DEDECMS自带评论系统增加字段方法 添加评论字段方法

    dedecms自带的评论系统功能较为简单,目前大部分是用搜狐的畅言评论系统,但是有时候我们因为域名没备案或者其他各种原因不想用第三方的评论需要,就需要对自带的评论系统进行二次开发,二次开发最常见的就是添加字段,那怎么加添加自己想要的字段呢,可以用phpmya···

    JavaScript之创意时钟项目(实例讲解)

    “时钟展示项目”说明文档(文档尾部附有相应代码) 一、最终效果展示: 二、项目亮点 1.代码结构清晰明了 2.可以实时动态显示当前时间与当前日期 3.界面简洁、美观、大方 4.提高浏览器兼容性 三、知识点汇总: jQuery、原生javascript、css3、h5 四、重难点解释 1.各个指针的···