vue3+vite3+typescript實現(xiàn)驗證碼功能及表單驗證效果
驗證碼組件
<template> <div class="captcha" style="display: flex;"> <canvas ref="canvas" width="100" height="40"></canvas> </div> <div class="valicode-btn"> <el-button type="text" @click="refresh">看不清,換一張</el-button> </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue' const emits = defineEmits(['getCode']) const canvasRef = ref<HTMLCanvasElement | null>(null) const ctx = ref<CanvasRenderingContext2D | null>(null) const code = ref('') const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789' const charLength = chars.length function getRandomChar() { return chars.charAt(Math.floor(Math.random() * charLength)) } function draw() { if (!ctx.value) return ctx.value.clearRect(0, 0, canvasRef.value!.width, canvasRef.value!.height) let x = 10 for (let i = 0; i < 4; i++) { const c = getRandomChar() code.value += c ctx.value.font = 'bold 20px Arial' ctx.value.fillStyle = '#333' ctx.value.fillText(c, x, 25) x += 20 } for (let i = 0; i < 10; i++) { ctx.value.strokeStyle = '#ccc' ctx.value.beginPath() ctx.value.moveTo(Math.random() * 100, Math.random() * 40) ctx.value.lineTo(Math.random() * 100, Math.random() * 40) ctx.value.stroke() } emits('getCode', code.value) } function refresh() { code.value = '' draw() emits('getCode', code.value) } onMounted(() => { const code = ref('') canvasRef.value = document.querySelector('canvas') emits('getCode', code.value) ctx.value = canvasRef.value?.getContext('2d') draw() }) </script> <style scoped> .captcha { display: flex; align-items: center; justify-content: center; flex-direction: column; } .valicode-btn{ height:50px; line-height: 50px; } </style>
?? 這是一個Vue組件,包含一個驗證碼的canvas和一個刷新按鈕。具體解釋如下:
<template>
標簽中包含了組件的模板,其中包含了一個class為captcha
的div,其中包含了一個canvas元素和一個class為valicode-btn
的div,后者包含了一個刷新按鈕。<script>
標簽中使用了Vue 3的Composition API,包含了以下內(nèi)容:import
語句引入了Vue 3的ref
和onMounted
函數(shù),以及defineEmits
函數(shù)用于定義組件的自定義事件。const
關(guān)鍵字定義了一個canvasRef
變量,用于引用canvas元素;一個ctx
變量,用于引用canvas的2D上下文;一個code
變量,用于存儲驗證碼;一個chars
變量,用于存儲可用于生成驗證碼的字符;一個charLength
變量,用于存儲可用于生成驗證碼的字符的數(shù)量。getRandomChar
函數(shù)用于從chars
中隨機獲取一個字符??。draw
函數(shù)用于繪制驗證碼。首先清空canvas,然后循環(huán)4次,每次從chars
中隨機獲取一個字符,并將其繪制到canvas上。同時,將字符添加到code
變量中。接著循環(huán)10次,每次繪制一條隨機的直線,用于增加驗證碼的復雜度。refresh
函數(shù)用于刷新驗證碼。首先清空code
變量,然后調(diào)用draw
函數(shù)重新繪制驗證碼,并觸發(fā)自定義事件getCode
,將新的驗證碼傳遞給父組件。onMounted
函數(shù)用于在組件掛載后執(zhí)行一些操作。首先定義一個code
變量,然后引用canvas元素和2D上下文,并調(diào)用draw
函數(shù)繪制驗證碼。最后觸發(fā)自定義事件getCode
,將驗證碼傳遞給父組件。
3.<style>
標簽中定義了組件的樣式,其中.captcha
類用于設置驗證碼和刷新按鈕的布局,.valicode-btn
類用于設置刷新按鈕的樣式。scoped
屬性用于將樣式限定在組件內(nèi)部。
父組件
<div class="validate-code"> <div style="display: flex"> <el-form-item label="驗證碼:" prop="valicode"> <el-input v-model="form.valicode"/> </el-form-item> <valicode ref="refresh" @getCode="getCode" width="150px" /> </div> </div> <script setup lang="ts"> const code = ref('') const getCode=(value:any)=> { code.value = value console.log(value); } </script>
驗證碼組件是通過引入一個名為valicode
的組件來實現(xiàn)的。當驗證碼組件生成新的驗證碼時,會通過@getCode
事件將驗證碼傳遞給父組件,并通過console.log
打印出來。父組件通過v-model
綁定了驗證碼輸入框的值,當用戶輸入驗證碼時,會將輸入的值保存在form.valicode
中。整個表單的驗證依賴于prop
屬性,即valicode
。如果用戶未輸入驗證碼或輸入的驗證碼與生成的驗證碼不匹配,則表單驗證不通過。
表單驗證
const rules=reactive<FormRules>({ valicode: [ { required: true, message: '請輸入驗證碼', trigger: 'blur' }, { validator: checkCode, trigger: 'blur' }, ], }) const checkCode=(rule: any, value: any, callback: any)=>{ console.log(code.value); if (!value) { return callback(new Error('請輸入驗證碼')) } setTimeout(() => { if (value != code.value) { callback(new Error('驗證碼有誤,請重新輸入')) }else { callback() } }, 500) }
通過reactive
函數(shù)創(chuàng)建了一個名為rules的響應式對象,其中包含一個名為valicode的屬性,其值為一個數(shù)組,數(shù)組中包含兩個對象,分別表示對于valicode這個表單項的兩個驗證規(guī)則。第一個規(guī)則要求該表單項必填,且在失去焦點時進行驗證;第二個規(guī)則使用了自定義的驗證函數(shù)checkCode
,在失去焦點時進行驗證。
checkCode函數(shù)接收三個參數(shù),分別為驗證規(guī)則對象、當前表單項的值和回調(diào)函數(shù)。在函數(shù)內(nèi)部,首先打印出了一個名為code的響應式對象的值,然后判斷當前表單項的值是否為空,如果為空則通過回調(diào)函數(shù)返回一個錯誤信息。如果不為空,則通過setTimeout
函數(shù)模擬了一個異步驗證過程,500毫秒后判斷當前表單項的值是否等于code的值,如果不等于則通過回調(diào)函數(shù)返回一個錯誤信息,否則通過回調(diào)函數(shù)返回一個空值表示驗證通過。
這里setTimeout
函數(shù)給form標簽加上status-icon
會在校驗時有一個轉(zhuǎn)圈的效果哦~
最終效果
到此這篇關(guān)于vue3+vite3+typescript實現(xiàn)驗證碼功能及表單驗證效果的文章就介紹到這了,更多相關(guān)vue3+vite3+typescript驗證碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue自定義組件實現(xiàn)v-model雙向綁定數(shù)據(jù)的實例代碼
vue中父子組件通信,都是單項的,直接在子組件中修改prop傳的值vue也會給出一個警告,接下來就用一個小列子一步一步實現(xiàn)了vue自定義的組件實現(xiàn)v-model雙向綁定,需要的朋友可以參考下2021-10-10vue+elementUI組件tree如何實現(xiàn)單選加條件禁用
這篇文章主要介紹了vue+elementUI組件tree如何實現(xiàn)單選加條件禁用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09ElementUI時間選擇器限制選擇范圍disabledData的使用
本文主要介紹了ElementUI時間選擇器限制選擇范圍disabledData的使用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-06-06vue cli 3.x 項目部署到 github pages的方法
這篇文章主要介紹了vue cli 3.x 項目部署到 github pages的方法,非常不錯,具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04