当前位置: 首页 > news >正文

【sgPasswordInput】自定义组件:带前端校验密码强度的密码输入框,能够提供密码强度颜色提示和文字提示

 

特性:

  1. 有密码强度颜色提示
  2. 密码强度进度条提示
  3. 支持设置默认输入提示和密码长度

 sgPasswordInput源码

<template><div :class="$options.name" style="width: 100%"><el-inputstyle="width: 100%"ref="psw"type="password"v-model="psw"show-password:maxlength="maxlength || 20":show-word-limit="false":placeholder="placeholder || `请输入6位以上的密码`"@focus="$refs.psw.select()"@change="change"clearable/><el-alertv-if="passwordStrength"style="width: 100%; margin-top: 5px":closable="false":close-text="``":description="``":effect="'light'":show-icon="true":title="passwordStrength.text":type="passwordStrength.type"></el-alert><el-progressv-if="passwordStrength && passwordStrength.strength > 0"style="width: 100%; margin-top: 5px"type="line":percentage="passwordStrength.strength":show-text="false":stroke-width="10":text-inside="false":color="passwordStrength.color":define-back-color="'#eee'"/></div>
</template>
<script>
export default {name: "sgPasswordInput",data() {return {psw: "",};},props: ["value", "placeholder", "maxlength"],watch: {value: {handler(newValue, oldValue) {this.psw = newValue;},deep: true, //深度监听immediate: true, //立即执行},psw: {handler(newValue, oldValue) {this.$emit(`input`, newValue);},deep: true, //深度监听immediate: true, //立即执行},},computed: {passwordStrength() {let passwordStrength = this.checkPasswordStrength(this.psw);this.$emit(`passwordStrength`, passwordStrength);return passwordStrength;},},methods: {change(d) {this.$emit(`change`, d);},select(d) {this.$refs.psw.select();},//校验密码强度checkPasswordStrength(password) {if (!password) return null;let level = 0; //密码强度等级let preText = "密码需要包含";let containTexts = ["数字", "小写字母", "大写字母", "特殊字符"];let tipTexts = [];let r = {};/\d/.test(password) ? level++ : tipTexts.push(containTexts[0]); //包含数字/[a-z]/.test(password) ? level++ : tipTexts.push(containTexts[1]); //包含小写/[A-Z]/.test(password) ? level++ : tipTexts.push(containTexts[2]); //包含大写/\W/.test(password) ? level++ : tipTexts.push(containTexts[3]); //包含特殊字符password.length < 6 && (level = 0); //等级最弱switch (level) {case 0:r = {strength: 0,type: "error",color: "#F56C6C", //红色label: "不安全",text: `密码至少要6位`,};break;case 1:r = {strength: 25,type: "error",color: "#F56C6C", //红色label: "弱",text: `${preText}${tipTexts.join("、")}`,};break;case 2:r = {strength: 50,type: "warning",color: "#E6A23C", //橙色label: "一般",text: `${preText}${tipTexts.join("、")}`,};break;case 3:r = {strength: 75,type: "info",color: "#409EFF", //蓝色label: "较强",text: `${preText}${tipTexts.join("、")}`,};break;case 4:r = {strength: 100,type: "success",color: "#67C23A", //绿色label: "强",text: "密码安全度高",};break;}return r;},},
};
</script>
<style lang="scss" scoped>
.sgPasswordInput {>>> .el-alert {.el-alert__content {line-height: 1;.el-alert__title {margin-right: 0;}}}
}
</style>

 应用

<template><div :class="$options.name"><div style="width: 400px"><sgPasswordInputv-model="psw":placeholder="placeholder":maxlength="20"@change="change"@passwordStrength="passwordStrength"/></div></div>
</template>
<script>
import sgPasswordInput from "@/vue/components/admin/sgPasswordInput";
export default {name: "sgBody",components: { sgPasswordInput },data() {return {placeholder: "请输入强度高的密码",psw: "",};},methods: {change(d) {console.log(`change`, d);},passwordStrength(d) {console.log(`passwordStrength`, d);},},
};
</script>

相关文章:

【sgPasswordInput】自定义组件:带前端校验密码强度的密码输入框,能够提供密码强度颜色提示和文字提示

特性&#xff1a; 有密码强度颜色提示密码强度进度条提示支持设置默认输入提示和密码长度 sgPasswordInput源码 <template><div :class"$options.name" style"width: 100%"><el-inputstyle"width: 100%"ref"psw"type&…...

1599 - Ideal Path (UVA)

题目链接如下&#xff1a; https://onlinejudge.org/index.php?optioncom_onlinejudge&Itemid8&category448&pageshow_problem&problem4474 这道题也是看了刘汝佳的思路才写出来的.... 代码如下&#xff1a; #include <cstdio> #include <deque&…...

计算机网络(超级详细笔记)

使用教材计算机网络&#xff08;第8版&#xff09;&#xff08;谢希仁&#xff09; 第一章&#xff1a;概述 第二章&#xff1a;物理层 第三章&#xff1a;数据链路层 第四章&#xff1a;网络层 第五章&#xff1a;运输层 第六章&#xff1a;应用层 目…...

老杨说运维 | 年末大讲回顾:运维的尽头也是大模型吗?

哈喽~朋友们&#xff0c;这么快又见面啦。前阵子我们给CEO老杨安排了一场年末大讲&#xff0c;主要是跟大家聊聊智能运维的“智”与“能”以及剖析时下热点----运维大模型。后台收到了不少朋友的反馈&#xff0c;小编看了大受鼓舞并暗下决心----新的一年&#xff0c;希望能多安…...

Unity 利用UGUI之Scrollbar制作进度条

在Unity中除了用Slider、Image做进度条&#xff0c;其实用Scrollbar也可以做进度条。 首先&#xff0c;在场景中新建一个Scrollbar组件和一个Text组件&#xff1a; 其次&#xff0c;创建模拟进度的一个脚本&#xff0c;Scrollbar_Progressbar.cs: using System.Collections; …...

MySQL之导入、导出

文章目录 1.navicat导入导出2.mysqldump命令导入导出2.1导出2.2导入 3.load data infile命令导入导出4.远程备份5.思维导图 1.navicat导入导出 使用Navicat工具导入t_log 共耗时 55s 2.mysqldump命令导入导出 2.1导出 导出表数据和表结构 语法&#xff1a; mysqldump -u用…...

【unity小技巧】FPS游戏实现相机的偏移震动、武器射击后退和后坐力效果

最终效果 文章目录 最终效果前言相机偏移震动相机震动脚本换弹节点震动 武器射击后退效果武器后坐力效果完结 前言 关于后坐力之前其实已经分享了一个&#xff1a;FPS游戏后坐力制作思路 但是实现起来比较复杂&#xff0c;如果你只是想要简单的实现&#xff0c;可以看看这个&…...

MINCO+汽车

规划典型的解决方法: 如何准确的描述他的动力学,实际上是对这个物理对象进行建模.(规划等于开环的控制,控制等于闭环的规划),规划系统要做到是假设已知系统模型的情况下去计算一些可能会影响比较好的 未来运动的指令,做未来运动轨迹的推演.对自己建模的情况下还需对环境有个比较…...

大模型机器人发展史:从VoxPoser、RT2到斯坦福Mobile ALOHA、Google机器人

前言 23年7月&#xff0c;我在朋友圈评估Google的RT2说道&#xff1a; “大模型正在革新一切领域啊&#xff0c;超帅&#xff0c;通过大模型不仅能理解“人话”&#xff0c;还能对“人话”进行推理&#xff0c;并转变为机器人能理解的指令&#xff0c;从而分阶段完成任务。回…...

Ubunutu18.04 ROS melodic 无人机 XTDrone PX4 Vins-Fuison 运行配置

一、PX4飞控EKF配置 PX4默认使用的EKF配置为融合GPS的水平位置与气压计高度。如果我们想使用视觉定位&#xff0c;就需要把修改配置文件。让EKF融合来自mavros/vision_pose/pose的数据 1.1修改rcS配置文件 gedit ~/PX4_Firmware/ROMFS/px4fmu_common/init.d-posix/rcS 通过注…...

Linux 常见服务配置

笔记所以内容很多&#xff0c;建议选择性看看 SSH Secure Shell 用于与服务器建立安全的连接 对应服务 sshd 注意&#xff1a;配置文件 配制文件修改需要重启或重载sshd服务才能生效 systemctl sshd reload # 重载 sshd 配置文件 systemctl sshd restart # 重启 ssh…...

Flutter基础

一、关键字 class&#xff1a;用于定义一个新的类&#xff1b; extends: 用于指定一个类继承另一个类&#xff1b; mixin: 用于将一个类的代码片段添加到另一个类中&#xff0c;实现代码复用&#xff1b; abstract: 用于声明一个抽象类或抽象方法&#xff0c;不能直接实例化&a…...

MySQL-数据库概述

数据库相关概念&#xff1a; 数据库(DateBase)简称DB,就是一个存储数据的仓库&#xff0c;数据有组织的进行存储。 数据库分为关系型数据库简称RDBMS和非关系型数据库 关系型数据库简称RDBMS:建立在关系模型的基础上&#xff0c;由多张相互连接的二维表组成的数据库.简单来说…...

HTML---JQurey的基本使用

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 本章目标 &#xff08;1&#xff09;能够搭建jQuery开发环境 &#xff08;2&#xff09;使用ready( )方法加载页面、掌握jQuery语法 使用addClass( )方法和css( )方法为元素添加CSS样式使用n…...

搜索docker镜像

要查看Docker镜像库&#xff0c;可以使用docker search命令。 docker search <关键词>例如&#xff0c;如果你想要查找名为nginx的镜像&#xff0c;可以执行以下命令&#xff1a; docker search nginx命令执行后&#xff0c;将会列出所有与关键词nginx相关的Docker镜像…...

旋变检测AD2s1205手册学习笔记

旋变故障检测故障表 信号丢失检测 检测原理&#xff1a;任一旋变输入(正弦或余弦)降至指定的LOS正弦/余弦阈值 以下时&#xff0c;器件会检测到信号丢失(LOS)。AD2S1205通过将 监视信号与固定最小值进行比较检测此点 丢失的效果表现&#xff1a;LOS由DOS和LOT引脚均闩锁为逻辑…...

【温故而知新】JavaScript的防抖与节流

一、概念 JavaScript中的防抖&#xff08;debounce&#xff09;和节流&#xff08;throttle&#xff09;是用于控制函数执行频率的技术。 防抖&#xff1a;当一个事件连续触发时&#xff0c;防抖技术将只执行最后一次触发事件的函数调用。换句话说&#xff0c;只有在停止触发…...

C++模板——(3)类模板

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 勤奋&#xff0c;机会&#xff0c;乐观…...

深度学习中Epoch和Batch Size的关系

在深度学习中&#xff0c;Epoch&#xff08;周期&#xff09;和 Batch Size&#xff08;批大小&#xff09;是训练神经网络时经常使用的两个重要的超参数。它们之间的关系是通过以下方式连接的&#xff1a; Epoch&#xff08;周期&#xff09;&#xff1a; Epoch 表示整个训练…...

Python采集微博评论做词云图

嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 环境使用: Python 3.10 Pycharm 第三方模块使用: import requests >>> pip install requests import wordcloud >>> pip install wordclou…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...

[USACO23FEB] Bakery S

题目描述 Bessie 开了一家面包店! 在她的面包店里&#xff0c;Bessie 有一个烤箱&#xff0c;可以在 t C t_C tC​ 的时间内生产一块饼干或在 t M t_M tM​ 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC​,tM​≤109)。由于空间…...

Qt的学习(二)

1. 创建Hello Word 两种方式&#xff0c;实现helloworld&#xff1a; 1.通过图形化的方式&#xff0c;在界面上创建出一个控件&#xff0c;显示helloworld 2.通过纯代码的方式&#xff0c;通过编写代码&#xff0c;在界面上创建控件&#xff0c; 显示hello world&#xff1b; …...

【阅读笔记】MemOS: 大语言模型内存增强生成操作系统

核心速览 研究背景 ​​研究问题​​&#xff1a;这篇文章要解决的问题是当前大型语言模型&#xff08;LLMs&#xff09;在处理内存方面的局限性。LLMs虽然在语言感知和生成方面表现出色&#xff0c;但缺乏统一的、结构化的内存架构。现有的方法如检索增强生成&#xff08;RA…...