uniapp實(shí)現(xiàn)注冊(cè)發(fā)送獲取驗(yàn)證碼功能
更新時(shí)間：2022年11月10日 09:59:54 作者：李現(xiàn)分現(xiàn)
隨著網(wǎng)絡(luò)的發(fā)達(dá),總會(huì)有人惡意注冊(cè)網(wǎng)站,而使用輸入驗(yàn)證碼功能可以有效的阻止這一類現(xiàn)象的發(fā)生,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)注冊(cè)發(fā)送獲取驗(yàn)證碼功能的相關(guān)資料,需要的朋友可以參考下
說(shuō)明
驗(yàn)證碼服務(wù)可自行去申請(qǐng)，不過(guò)好像是要企業(yè)才能申請(qǐng)，這里
結(jié)合uview組件庫(kù)+mockjs在本地實(shí)現(xiàn)發(fā)送并獲取驗(yàn)證碼
配置
驗(yàn)證碼組件u-verification-code官網(wǎng)不再維護(hù)，但不影響使用可在uniapp直接配置。
在項(xiàng)目pages.json文件中配置好路徑
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
mockjs使用
根目錄創(chuàng)建mock文件夾，分別創(chuàng)建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:"獲取驗(yàn)證碼成功"})
code.json
[ "1234","4553","2346","9765","4567","4589","0087","4538","8796" ]
封裝axios，創(chuàng)建請(qǐng)求api
根目錄下創(chuàng)建utils
utils/mockRequest.js
import axios from '@/js_sdk/gangdiedao-uni-axios'
//根據(jù)自身情況引入axios
// 創(chuàng)建自定義接口服務(wù)實(shí)例
const http = axios.create({
baseURL: '/mock',//根據(jù)個(gè)人后端情況，修改此處baseURL
timeout: 6000, // 不可超過(guò) manifest.json 中配置 networkTimeout的超時(shí)時(shí)間
withCredentials: true,
headers: {
'Content-Type': 'application/json',
//'X-Requested-With': 'XMLHttpRequest',
},
})
// 攔截器 在請(qǐng)求之前攔截 添加token
http.interceptors.request.use(config => {
//請(qǐng)求前有關(guān)處理邏輯
return config
})
// 響應(yīng)后的攔截
http.interceptors.response.use(response => {
//響應(yīng)攔截處理邏輯
return response;
}, error => {
return Promise.reject(error.message)
})
export default http
根目錄創(chuàng)建api文件夾
api/index.js
import mockRequest from '@/utils/mockRequest.js'
//驗(yàn)證碼
export const getCode = () => mockRequest.get('/code')
main.js注冊(cè)全局api
import * as API from '@/api/index.js' Vue.prototype.$API = API
前端調(diào)用
template
<u-input style="width: 300rpx" v-model="code" placeholder="請(qǐng)輸入驗(yàn)證碼" />
<view class="bd-primary xs orange br60 flex row-center" @click="sendSmsFun" hover-class="none">
<!-- 獲取驗(yàn)證碼 -->
<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('請(qǐng)?zhí)顚?xiě)手機(jī)號(hào)信息～');
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();
//獲取隨機(jī)驗(yàn)證碼
var random = Math.floor(Math.random() * 9)
this.code = res.data[random]
}
},
codeChange(tip) {
this.codeTips = tip
},效果
總結(jié)
到此這篇關(guān)于uniapp實(shí)現(xiàn)注冊(cè)發(fā)送獲取驗(yàn)證碼功能的文章就介紹到這了,更多相關(guān)uniapp發(fā)送獲取驗(yàn)證碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
function, new function, new Function之間的區(qū)別
function, new function, new Function之間的區(qū)別...2007-03-03
javascript實(shí)現(xiàn)漂亮的拖動(dòng)層，窗口拖拽特效
一個(gè)可關(guān)閉、可隨意拖動(dòng)位置的網(wǎng)頁(yè)彈出層代碼，美化的相當(dāng)漂亮，簡(jiǎn)潔實(shí)用，還可拖動(dòng)改變大小，通過(guò)八個(gè)方向改變大小，學(xué)習(xí)這類特效編寫(xiě)的網(wǎng)頁(yè)設(shè)計(jì)者可參閱一下2015-04-04
javascript中定義變量const和var有什么區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于javascript中定義變量const和var有什么區(qū)別的相關(guān)資料,在JavaScript中var和const都是用于聲明變量的關(guān)鍵字,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
JavaScript中創(chuàng)建字典對(duì)象（dictionary）實(shí)例
這篇文章主要介紹了JavaScript中創(chuàng)建字典對(duì)象（dictionary）實(shí)例,本文直接給出了實(shí)現(xiàn)的源碼,并給出了使用示例,需要的朋友可以參考下2015-03-03
JS生態(tài)系統(tǒng)加速Tailwind?CSS工作原理探究
這篇文章主要為大家介紹了JS?生態(tài)系統(tǒng)加速Tailwind?CSS使用及工作原理探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
Three.js+React使二維圖片呈現(xiàn)3D效果
這篇文章主要為大家介紹了如何利用Three.js+React技術(shù)棧，將二維漫畫(huà)圖片轉(zhuǎn)化為三維視覺(jué)效果。文中的實(shí)現(xiàn)方法講解詳細(xì)，需要的可以參考一下2022-02-02
這篇文章主要介為大家詳細(xì)紹了Bootstrap CSS布局之圖像的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript實(shí)現(xiàn)圖片的放大縮小及拖拽功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片的放大縮小及拖拽功能,結(jié)合實(shí)例形式分析了javascript鼠標(biāo)事件響應(yīng)及針對(duì)圖形元素的屬性操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
Javascript中有幾個(gè)非常重要的語(yǔ)言特性——對(duì)象、原型繼承、閉包。其中閉包 對(duì)于那些使用傳統(tǒng)靜態(tài)語(yǔ)言C/C++的程序員來(lái)說(shuō)是一個(gè)新的語(yǔ)言特性。本文將以例子入手來(lái)介紹Javascript閉包的語(yǔ)言特性，并結(jié)合一點(diǎn) ECMAScript語(yǔ)言規(guī)范來(lái)使讀者可以更深入的理解閉包。2015-05-05
本文介紹了字符串處理的五種方法,包含indexOf()用于獲取字符串中指定字符首次出現(xiàn)的位置,includes()判斷字符串是否包含某個(gè)值,match()用正則表達(dá)式匹配字符串,正則表達(dá)式創(chuàng)建與檢查匹配,search()執(zhí)行搜索并返回匹配的索引位置,下面就來(lái)介紹一下2024-09-09