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发送获取验证码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • function, new function, new Function之间的区别

    function, new function, new Function之间的区别

    function, new function, new Function之间的区别...
    2007-03-03
  • javascript实现漂亮的拖动层,窗口拖拽特效

    javascript实现漂亮的拖动层,窗口拖拽特效

    一个可关闭、可随意拖动位置的网页弹出层代码,美化的相当漂亮,简洁实用,还可拖动改变大小,通过八个方向改变大小,学习这类特效编写的网页设计者可参阅一下
    2015-04-04
  • javascript中定义变量const和var有什么区别详解

    javascript中定义变量const和var有什么区别详解

    这篇文章主要给大家介绍了关于javascript中定义变量const和var有什么区别的相关资料,在JavaScript中var和const都是用于声明变量的关键字,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • JavaScript中创建字典对象(dictionary)实例

    JavaScript中创建字典对象(dictionary)实例

    这篇文章主要介绍了JavaScript中创建字典对象(dictionary)实例,本文直接给出了实现的源码,并给出了使用示例,需要的朋友可以参考下
    2015-03-03
  • JS生态系统加速Tailwind CSS工作原理探究

    JS生态系统加速Tailwind CSS工作原理探究

    这篇文章主要为大家介绍了JS 生态系统加速Tailwind CSS使用及工作原理探究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2024-01-01
  • Three.js+React使二维图片呈现3D效果

    Three.js+React使二维图片呈现3D效果

    这篇文章主要为大家介绍了如何利用Three.js+React技术栈,将二维漫画图片转化为三维视觉效果。文中的实现方法讲解详细,需要的可以参考一下
    2022-02-02
  • Bootstrap CSS布局之图像

    Bootstrap CSS布局之图像

    这篇文章主要介为大家详细绍了Bootstrap CSS布局之图像的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JavaScript实现图片的放大缩小及拖拽功能示例

    JavaScript实现图片的放大缩小及拖拽功能示例

    这篇文章主要介绍了JavaScript实现图片的放大缩小及拖拽功能,结合实例形式分析了javascript鼠标事件响应及针对图形元素的属性操作相关实现技巧,需要的朋友可以参考下
    2019-05-05
  • 浅谈javascript中的闭包

    浅谈javascript中的闭包

    Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性。本文将以例子入手来介绍Javascript闭包的语言特性,并结合一点 ECMAScript语言规范来使读者可以更深入的理解闭包。
    2015-05-05
  • JS中判断字符串中是否包含指定字符的几种方法

    JS中判断字符串中是否包含指定字符的几种方法

    本文介绍了字符串处理的五种方法,包含indexOf()用于获取字符串中指定字符首次出现的位置,includes()判断字符串是否包含某个值,match()用正则表达式匹配字符串,正则表达式创建与检查匹配,search()执行搜索并返回匹配的索引位置,下面就来介绍一下
    2024-09-09

最新评论