vue3生成隨機密碼的示例代碼
實現效果
實現思路
- 完成佈局
- 完成生成隨機數的方法
- 完成生成隨機密碼的方法
完成佈局
佈局直接用element-plus組件庫裡的el-from+checkbox完成一個簡單的表單佈局即可。
完成生成隨機數的方法
這裡我們要四種隨機數,大寫字母、小寫字母、數字、特殊符號。這裡實現有兩種方式。
第一種直接定義四個字符串,第一個字符串存所有的大寫字母、第二個字符串存所有的小寫字母、第三個所有的數字、第四個所有的特殊符號。
第二種使用Unicode編碼。將隨機數對應大寫字母、小寫字母、數字Unicode編碼的范圍取出對應的結果。 大寫字母是65-90、小寫字母是97-122,數字是48-57。
這兩種都要使用Math.floor(Math.random()) 獲取隨機數。我這裡用第二種方法
完成生成隨機密碼的方法
定義一個數組對象。每個對象有funcName:對應隨機數方法名,label:左側標簽名,checked:選中狀態。循環密碼長度,每次增加選擇密碼種類數量,遍歷定義的數組對象,判斷是否是選中狀態,如果是調用該種類的隨機方法,每次將返回的值拼接。循環完隨機密碼生成成功。
部分代碼
<script> import { reactive, toRefs } from "vue"; export default { components: {}, setup() { const state = reactive({ form: { padLength: 8 }, typeList: [ { id: 1, funcName:'IsUpper', label: '包括大寫字母', checked: true }, { id: 2, funcName:'IsLower', label: '包括小寫字母', checked: true }, { id: 3, funcName:'Isnumber', label: '包括數字', checked: true }, { id: 4, funcName:'IsCharacter', label:'包括符號', checked: true } ], password: '' }); const getRandomLower = () => { return String.fromCharCode(Math.floor(Math.random() * 26) + 97) } const getRandomUpper = () => { return String.fromCharCode(Math.floor(Math.random() * 26) + 65) } const getRandomNumber = () => { return String.fromCharCode(Math.floor(Math.random() * 10) + 48) } const getRandomCharacter = () => { const characters = '!@#$%^&*(){}[]=<>/,.' return characters[Math.floor(Math.random() * characters.length)] } let randomFunc = { IsUpper: getRandomUpper, IsLower: getRandomLower, Isnumber: getRandomNumber, IsCharacter: getRandomCharacter } const getPassword = () => { state.password = '' let typesCount = 0 state.typeList.forEach(v=>{ typesCount += v.checked }) if(typesCount === 0) { state.password = '' } for(let i = 0; i < state.form.padLength; i += typesCount) { state.typeList.forEach(item => { if(item.checked){ state.password += randomFunc[item.funcName]() } }) } } return { ...toRefs(state), getRandomLower, getRandomUpper, getRandomNumber, getRandomCharacter, getPassword }; }, }; </script>
總結
- Math.floor、Math.random生成隨機數的使用
- unicode編碼、String.fromCharCode方法的使用
到此這篇關於vue3生成隨機密碼的示例代碼的文章就介紹到這瞭,更多相關vue3生成隨機密碼內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- JavaScript中隨機數方法 Math.random()
- JavaScript的內置對象Math和字符串詳解
- jquery插件實現代碼雨特效
- JS實現隨機生成驗證碼
- javascript實現點擊產生隨機圖形