uniapp实现注册发送获取验证码功能

 更新时间:2022年11月10日 09:59:54   作者:李现分现  
随着网络的发达,总会有人恶意注册网站,而使用输入验证码功能可以有效的阻止这一类现象的发生,下面这篇文章主要给大家介绍了关于uniapp实现注册发送获取验证码功能的相关资料,需要的朋友可以参考下

说明

验证码服务可自行去申请,不过好像是要企业才能申请,这里

结合uview组件库+mockjs在本地实现发送并获取验证码

配置

验证码组件u-verification-code官网不再维护,但不影响使用可在uniapp直接配置。

点击这里下载

在项目pages.json文件中配置好路径

"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},

mockjs使用

根目录创建mock文件夹,分别创建mock/index.js,mock/code.json

index.js

import Mock from 'mockjs'
import code from './code.json'
Mock.mock('/mock/code',{code:200,data:code,msg:"获取验证码成功"})

code.json

[
  "1234","4553","2346","9765","4567","4589","0087","4538","8796"
]

封装axios,创建请求api

根目录下创建utils

utils/mockRequest.js

import axios from '@/js_sdk/gangdiedao-uni-axios'
//根据自身情况引入axios

// 创建自定义接口服务实例
const http = axios.create({
	baseURL: '/mock',//根据个人后端情况,修改此处baseURL
	timeout: 6000, // 不可超过 manifest.json 中配置 networkTimeout的超时时间
	withCredentials: true,
	headers: {
		'Content-Type': 'application/json',
		//'X-Requested-With': 'XMLHttpRequest',
	},
})

// 拦截器 在请求之前拦截   添加token
http.interceptors.request.use(config => {
	//请求前有关处理逻辑
	return config
})
// 响应后的拦截
http.interceptors.response.use(response => {
    //响应拦截处理逻辑
	return response;
}, error => {
	
	return Promise.reject(error.message)
})

export default http


根目录创建api文件夹

api/index.js

import mockRequest from '@/utils/mockRequest.js'

//验证码
export const getCode = () => mockRequest.get('/code')

main.js注册全局api

import * as API from '@/api/index.js'
Vue.prototype.$API = API

前端调用

template

<u-input style="width: 300rpx" v-model="code" placeholder="请输入验证码" />
<view class="bd-primary xs orange br60 flex row-center" @click="sendSmsFun" hover-class="none">
  <!-- 获取验证码 -->
  <u-verification-code unique-key="register" ref="uCode" @change="codeChange">
  </u-verification-code>
  <view class="xs">{{codeTips}}</view>
</view>

script

async sendSmsFun() {
        // if (!this.$refs.uCode.canGetCode) return
        if (!this.registerForm.mobilePhoneNumber) {
          this.$common.errorToShow('请填写手机号信息~');
          return;
        }
        console.log("111");
        const {
          data: res
        } = await this.$API.getCode()
        console.log(res);
        if (res.code == 200) {
          this.$common.successToShow(res.msg)
          this.$refs.uCode.start();
          //获取随机验证码
          var random = Math.floor(Math.random() * 9)
          this.code = res.data[random]
        }
      },

codeChange(tip) {
        this.codeTips = tip
      },

效果

总结

到此这篇关于uniapp实现注册发送获取验证码功能的文章就介绍到这了,更多相关uniapp发送获取验证码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Raphael带文本标签可拖动的图形实现代码

    Raphael带文本标签可拖动的图形实现代码

    Javascript和Raphael顺便学习了一下,主要是为了实现一个可拖动的矩形同时矩形上还得显示标签,网上关于这方面的知识提的很是于是本人自不量力写了一下,感兴趣的你可不要错过了哈,希望可以帮助到你
    2013-02-02
  • 公众号SVG动画交互实战代码

    公众号SVG动画交互实战代码

    这篇文章主要介绍了公众号SVG动画交互实战代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • JavaScript中获取鼠标位置相关属性总结

    JavaScript中获取鼠标位置相关属性总结

    这篇文章主要介绍了JavaScript中获取鼠标位置相关属性总结,本文重点在搞清楚这些属性的区别,需要的朋友可以参考下
    2014-10-10
  • js生成1到100的随机数最简单的实现方法

    js生成1到100的随机数最简单的实现方法

    在本篇文章里小编给大家整理了关于js生成1到100的随机数最简单的实现方法,有需要的朋友们可以学习下。
    2020-02-02
  • JavaScript使用Math.Min返回两个数中较小数的方法

    JavaScript使用Math.Min返回两个数中较小数的方法

    这篇文章主要介绍了JavaScript使用Math.Min返回两个数中较小数的方法,涉及javascript中Math.Min方法的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • PHP 实现一种多文件上传的方法

    PHP 实现一种多文件上传的方法

    之前做项目的时候在实现表单中file类型input选择多图片时有很多种实现方法,今天小编给大家分享基于php实现一种多文件上传的方法,需要的朋友参考下吧
    2017-09-09
  • bootstrap paginator分页插件的两种使用方式实例详解

    bootstrap paginator分页插件的两种使用方式实例详解

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,下面通过本文给大家介绍bootstrap paginator分页插件的两种使用方式,一起看看吧
    2017-11-11
  • webpack css加载和图片加载的方法示例

    webpack css加载和图片加载的方法示例

    这篇文章主要介绍了webpack css加载和图片加载的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • JavaScript 中实现 use strict的方法及优势

    JavaScript 中实现 use strict的方法及优势

    本教程将讨论JavaScript中的use strict特性,在这里,我们将通过不同的示例了解如何在JavaScript代码语句中创建和执行use strict关键字,需要的朋友可以参考下
    2023-09-09
  • javascript关于“时间”的一次探索

    javascript关于“时间”的一次探索

    这篇文章主要介绍了javascript关于“时间”的一次探索,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07

最新评论