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生成随机密码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue+element 解决浏览器自动填充记住的账号密码问题

    我们在做form表单的时候,会发现,浏览器会自动的将我们之前保存的密码,自动的填充到表单中input 为 type="password" 的框中 登录页面也就算了,但是注册页面就很难受了,有一种不受控制的感觉 不行,我的代码必须由我控制,下面是解决方案: 解决方法:只需要在每个input框前面加一个input,同时将其隐藏,就ok了,账号那个需要放在下面,原因不详... 总结 以上所述是小编给大家介绍的Vue+element 解决浏览器自动填充记住的账号密码问题,希望对大家有所帮助,如

  • vue实现键盘输入支付密码功能

    vue实现键盘输入支付密码功能

    本文实例为大家分享了vue实现键盘输入支付密码功能的具体代码,供大家参考,具体内容如下 支付密码功能界面如下图: 主要代码如下: <template> <div class="pay-tool"> <div class="pay-tool-title border-bottom"> <span class="icon icon-back" @click="backHandle">

  • vue实现密码显示隐藏切换功能

    先给大家分享效果图: 具体实现代码如下所示: html: <group> <span>设置密码</span> <x-input :type="this.registration_data.pwdType" placeholder="请填写密码" @on-change="password"></x-input> <img :src="this.registration_da

  • Vue基于iview实现登录密码的显示与隐藏功能

    Vue基于iview实现登录密码的显示与隐藏功能

    目录 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 3.3 密码显示状态 3.4 两种眼睛图标(睁眼,闭眼)的监听切换密码显示状态事件 4.小结 iview简介 iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 1.背景 近期,在使用abp开发项目过程中,前端vue输入登录密码时默认隐藏,但是如果用户输错密码需要切换显示跟隐藏.故有此文. 2.实现最终效果

  • VUE实现密码验证与提示功能

    本文实例为大家分享了VUE密码验证与提示功能的具体代码,供大家参考,具体内容如下 1. 概述 1.1 说明 vue项目中,为了较为明了的让用户看到所输入的密码信息的长度与复杂度是否满足要求,开发一个组件来满足此需求(当密码输入时进行密码验证操作,当密码的长度在8到24位之间,密码中包含数字/小写字母/大写字母/特殊字符中的三项或三项以上则位正确). 1.2 条件与思路 1.密码框得到焦点显示提示信息 2.验证密码长度在8到24位之间 3.验证密码复杂度(数字/小写字母/大写字母/特殊字符三项或三

  • Vue实现登录记住账号密码功能的思路与过程

    Vue实现登录记住账号密码功能的思路与过程

    目录 实现思路 这里有三种方法来存储账号密码: 功能界面 记住账号密码功能的具体实现 密码加密 localStorage cookies 总结 实现思路 用户登录时若勾选"记住我"功能选项,则将登录名和密码(加密后)保存至本地缓存中,下次登录页面加载时自动获取保存好的账号和密码(需解密),回显到登录输入框中. 这里有三种方法来存储账号密码: 1. sessionStorage(不推荐) 1). 仅在当前会话下有效,关闭浏览器窗口后就被清除了 2). 存放数据大小一般为5MB 3). 不

  • vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能 第一步:自定义一个生产随机验证码的组件,其本质是使用canvas绘制,详细代码如下: <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeig

  • vue 验证两次输入的密码是否一致的方法示例

    好记性不如烂笔头.总也记不住 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="新密码" prop="newPwd"> <el-input v-mo

  • Vue实现6位数密码效果

    Vue实现6位数密码效果

    在ios系统,原生 webview 嵌套H5页面使用时,编写完成的6位数输入密码,输入密码卡顿问题的解决方案: 如下图: 原因是因为,CSS 这块 造成的.简单来说,style left 为负数的时候出现的,android 目测不会出现此问题 input[type=tel] { opacity: 0; z-index: -1; position: absolute; left:-100%; } 解决方案: 重新设置 input样式问题 input[type=tel] { width: 0.1px

  • vue3生成随机密码的示例代码

    vue3生成随机密码的示例代码

    目录 实现效果 实现思路 完成布局 完成生成随机数的方法 完成生成随机密码的方法 部分代码 总结 实现效果 实现思路 完成布局 完成生成随机数的方法 完成生成随机密码的方法 完成布局 布局直接用element-plus组件库里的el-from+checkbox完成一个简单的表单布局即可. 完成生成随机数的方法 这里我们要四种随机数,大写字母.小写字母.数字.特殊符号.这里实现有两种方式. 第一种直接定义四个字符串,第一个字符串存所有的大写字母.第二个字符串存所有的小写字母.第三个所有的数字.第四

  • Java随机生成身份证完整示例代码

    身份证算法实现 1.号码的结构 公民身份号码是特征组合码, 由十七位数字本体码和一位校验码组成. 排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码  三位数字顺序码和一位数字校验码. 2.地址码(前六位数) 表示编码对象常住户口所在县(市.旗.区)的行政区划代码,按GB/T2260的规定执行. 3.出生日期码(第七位至十四位) 表示编码对象出生的年.月.日,按GB/T7408的规定执行,年.月.日代码之间不用分隔符. 4.顺序码(第十五位至十七位) 表示在同一地址码所标识的区域范围内,

  • 利用python生成照片墙的示例代码

    PIL(Python Image Library)是python的第三方图像处理库,但是由于其强大的功能与众多的使用人数,几乎已经被认为是python官方图像处理库了.其官方主页为:PIL. PIL历史悠久,原来是只支持python2.x的版本的,后来出现了移植到python3的库pillow,pillow号称是friendly fork for PIL,其功能和PIL差不多,但是支持python3.本文只使用了PIL那些最常用的特性与用法,主要参考自:http://www.effbot.org

  • Python实现迪杰斯特拉算法并生成最短路径的示例代码

    def Dijkstra(network,s,d):#迪杰斯特拉算法算s-d的最短路径,并返回该路径和代价 print("Start Dijstra Path--") path=[]#s-d的最短路径 n=len(network)#邻接矩阵维度,即节点个数 fmax=999 w=[[0 for i in range(n)]for j in range(n)]#邻接矩阵转化成维度矩阵,即0→max book=[0 for i in range(n)]#是否已经是最小的标记列表 dis=[

  • Unity中 mesh生成斜坡的示例代码

    Unity中 mesh生成斜坡的示例代码

    Mesh概念: Mesh是Unity中的一个组件,称为网格组件.通俗的讲,Mesh是指模型的网格,3D模型是由多边形拼接而成,而多边形实际上是由多个三角形拼接而成的.所以一个3D模型的表面其实是由多个彼此相连的三角面构成.三维空间中,构成这些三角形的点和边的集合就是Mesh. Mesh组成: 1.顶点坐标数组vertexes 2.顶点在uv坐标系中的位置信息数组uvs 3.三角形顶点顺时针或者逆时针索引数组triangles 4.MeshFiler组件,用于增加mesh属性 5.MeshRend

  • Python实现随机生成算术题的示例代码

    目录 前言 1.环境准备 2.主程序 3.效果展示 前言 前几天去我姐家里蹭饭吃,发现我姐家里的小外甥女儿已经上小学了,正在疯狂赶作业,加减乘除还有很多题目都经常出错. 我姐说老师每天给他们布置了作业:每天坚持做乘法和加减法混合运算.平常不仅费纸张还老是需要出题目,脑瓜子都想懵了 这我必须帮帮忙,用Python写了一段自动生成小学生计算题的代码,这下子外甥女儿应该会更喜欢我这个姨姨吧~ 1.环境准备 随机生成生成计算题,那我们便需要导入random模块. 环境安装:python 3.8: 解释器

  • 使用Python生成随机密码的示例分享

    生成随机密码这件事情用python来干确实相当的方便,优美的string方法加上choice简直是绝配 make_password.py ###简单几行代码执行即可生成记不住的字符串### $ python make_passwd.py DLrw9EiT Qs4Wm84q RQwl4L2L u9g0LgwW jHPtYdyU ... $ python make_passwd.py DLrw9EiT Qs4Wm84q RQwl4L2L u9g0LgwW jHPtYdyU ... 代码如下--注释比

  • 教你使用vue3写Json-Preview的示例代码

    引入后直接<json-preview v-model="jsonData"></json-preview>就可以使用了.近期比较忙,代码就不做调整了. 示例效果 index.vue 文件 <template> <div v-if="isObject" class="json-preview"> <span v-if="!!parentKey"><span cla

  • java生成压缩文件示例代码

    代码: 复制代码 代码如下: import java.io.BufferedOutputStream;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream; import org.apache.tools.zip.ZipEntry;import org.apache.tools.zip.ZipOutputStream; /**  * @project: Test  * @author

  • php生成随机密码自定义函数代码（简单快速）

    实现代码,复制即用: <?phpheader("Content-type:text/html;charset=utf-8");function getRandPass($length = 6){ $password = ''; //将你想要的字符添加到下面字符串中,默认是数字0-9和26个英文字母 $chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";  $char_

随机推荐