验证密码强度

已于 2023-12-08 14:44:52 修改
阅读量326 收藏
点赞数 6
文章标签： java 前端
于 2023-11-04 22:01:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/geng1025/article/details/134223872
版权

HTML:

<body>
		<div class="box">
			<input type="text" maxlength="16" placeholder="密码" id="password" />
			<div class="level_0" id="level"></div>
		</div>

		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</body>

CSS:

.box {
	width: 300px;
	height: 60px;
	margin: 50px auto;
}

.box input {
	width: 100%;
	height: 40px;
	margin-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	border: 1px solid #E0E0E0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	outline: none;
}

.level_0 {
	width: 100%;
	height: 15px;
	background-color: #FFF;
}

.level_1 {
	width: 33.33%;
	height: 15px;
	background-color: red;
}

.level_2 {
	width: 66.66%;
	height: 15px;
	background-color: orange;
}

.level_3 {
	width: 100%;
	height: 15px;
	background-color: green;
}

js：

document.getElementById("password").onkeyup = function() {
	document.getElementById("level").className = "level_" + (this.value.length >= 6 ? getLevel(this.value) : 0);
};

function getLevel(value) {
	var level = 0;
	if(/[0-9]/.test(value)) {
		level++;
	}
	if(/[a-zA-z]/.test(value)) {
		level++;
	}
	if(/[^0-9a-zA-Z_]/.test(value)) {
		level++;
	}
	return level;
}

效果图：

刻刻帝的海角
关注
  • 6
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JS验证密码强度
Kevin's life
02-01 2612
验证“密码强度”的例子很常见，我们注册新的账号的时候往往设置密码，此时就遇到验证密码强度的问题了。“密码强度”也就是密码难易程度的意思。         原理：1、如果输入的密码为单纯的数字或者字母：提示“低”           2、如果是数字和字母混合的：提示“中”         3、如果数字、字母、特殊字符都有：提示“强”        下面是一种“密码强度”的验
java正则验证密码强度_使用正则验证密码强度（俩种方式附代码）
weixin_30269407的博客
02-28 2492
这次给大家带来使用正则验证密码强度(俩种方式附代码)，使用正则验证密码强度的注意事项有哪些，下面就是实战案例，一起来看一下。前言用户注册时，都会用到密码正则校验。要写出正确的正则表达式，先要定义表达式规则。方案1 (简单)假设密码验证做如下规则定义：最短6位，最长16位 {6,16}可以包含小写大母 [a-z] 和大写字母 [A-Z]可以包含数字 [0-9]可以包含下划线 [ _ ] 和减号 [ ...
js验证密码强度
weixin_44644573的博客
02-10 2290
这篇文章我们来说一个验证密码强度的例子，大家在进入一个网站的时候，往往都会先注册一个账号，然后输入密码，在输密码的时候，系统会根据我们输入的密码组成的复杂程度来给你的密码显示一个密码强度，一般就是强中弱三种，我们先来说一下密码验证的原理，原理明白了，js代码就好写了，今天的代码会用到正则表达式。 首先说一下密码强度的三种等级是如何划分的， 弱：一般就是纯数字或纯小写字母或者纯大写字母组成的，这种密...
html5 设置密码验证强度,js如何验证密码强度
weixin_39963523的博客
06-25 501
验证“密码强度”的例子很常见，我们注册新的账号的时候往往设置密码，此时就遇到验证密码强度的问题了。“密码强度”也就是密码难易程度的意思。原理：1、如果输入的密码为单纯的数字或者字母：提示“低”2、如果是数字和字母混合的：提示“中”3、如果数字、字母、特殊字符都有：提示“强”下面是一种“密码强度”的验证方法，觉得很有意思。HTML和CSS代码：密码强度#pwdStrength {height: 30...
php 验证密码强度
m0_37711659的博客
06-25 642
<?php function password_strenth($password) { $score = 0; if(preg_match("/[0-9]+/",$password)) { $score ++; } if(preg_match("/[0-9]{3,}/",$password)) { $score ++; } if(preg_match("/[a-z]+/",$password)) { $score ++; } if(preg_match("/[a.
c#验证密码强度
网络资源
10-30 1503
using System.Text.RegularExpressions; public class checkpwd { /// <summary> /// 计算密码强度 /// </summary> /// <param name="password">密码字符串&l...
mysql 验证密码强度,MySQL关闭密码强度验证功能
weixin_29454359的博客
03-23 929
关于密码强度验证：[root@mysql mysql]# mysql -uroot -p123456mysql: [Warning] Using a password on the command line interface can be insecure.Welcome to the MySQL monitor. Commands end with ; or \g.Your MySQL con...
js基础之正则验证密码强度
时光清浅处，一步一安然
07-21 407
js基础之正则验证密码强度
php 验证密码正则,使用正则验证密码强度
weixin_35132871的博客
03-29 616
这次给大家带来使用正则验证密码强度，使用正则验证密码强度的注意事项有哪些，下面就是实战案例，一起来看一下。前言用户注册时，都会用到密码正则校验。要写出正确的正则表达式，先要定义表达式规则。方案1 (简单)假设密码验证做如下规则定义：最短6位，最长16位 {6,16}可以包含小写大母 [a-z] 和大写字母 [A-Z]可以包含数字 [0-9]可以包含下划线 [ _ ] 和减号 [ - ]根据以上规则...
jquery验证密码强度
04-19
NULL 博文链接：https://rd-030.iteye.com/blog/1881743
js验证密码强度解析
11-21
这篇文章我们来说一个验证密码强度的例子，大家在进入一个网站的时候，往往都会先注册一个账号，然后输入密码，在输密码的时候，系统会根据我们输入的密码组成的复杂程度来给你的密码显示一个密码强度，一般就是强中...
js如何验证密码强度
10-15
主要为大家详细介绍了js如何验证密码强度，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Linux下网络编程-简易Epll服务器和客户端
weixin_45256307的博客
05-06 418
Linux下网络编程-简易Epll服务器和客户端
一篇文章，系统性聊聊Java注解
架构风清扬
05-06 1054
一篇文章，系统性聊聊Java注解
Java代码基础算法练习-删除有序数组中的重复项-2024.05.07
最新发布
Sakurapaid的博客
05-07 188
给一个有序数组（共10个元素），请在不新建数组的情况下，删除重复出现的元素，使 每个元素只出现一次，最后请输出删除重复元素后数组的新长度和数组元素。要删除有序数组中的重复项，且不使用额外数组，可以采用。
Nacos 配置中心实例分析实践
m0_73557631的博客
05-03 1078
​ 浏览器: http://localhost:5000/nacos/config/ip。先创建e-commerce-nacos-config-client5000 模块。​ 启动e-commerce-nacos-config-client5000。​ 启动Nacos Server。
Java基础（三）：Java异常机制以及底层实现原理
Lee的博客
05-07 704
除了Java中提供的异常之外，我们也可以自定义一些异常，自定义异常可以自定义运行时异常和非运行时异常两种方式。自定义运行时异常之需要继承这个方法即可，这里我们加了一个构造方法，这样可以创建异常对象时加一些描述异常信息。自定义非运行时异常只需要继承Exception，这里也是加了一个构造方法，描述异常信息。
vue验证密码强度
05-25
Vue.js 是一个用于构建交互式 Web 界面的渐进式 JavaScript 框架。如果你想要在 Vue.js 中实现密码强度验证，可以使用一个密码强度评估库来计算密码的强度，并使用 Vue.js 来更新界面。 一个流行的密码强度评估库是 zxcvbn，它可以计算密码的熵值，并根据熵值给出密码的强度评分。你可以使用 npm 安装 zxcvbn： ``` npm install zxcvbn ``` 在 Vue.js 中，你可以在模板中使用 `v-model` 绑定输入框中的密码，并使用 `watch` 监听密码的变化。当密码发生变化时，你可以使用 zxcvbn 计算密码的强度，并更新界面。 下面是一个简单的 Vue.js 组件示例，用于实现密码强度验证： ```html <template> <div> <label>Password:</label> <input type="password" v-model="password"> <p v-if="passwordStrength.score >= 0"> Password strength: {{ passwordStrength.score }} ({{ passwordStrength.feedback.warning }}) </p> </div> </template> <script> import zxcvbn from 'zxcvbn'; export default { data() { return { password: '', passwordStrength: { score: -1, feedback: {} } }; }, watch: { password: function() { this.passwordStrength = zxcvbn(this.password); } } }; </script> ``` 在这个示例中，我们在模板中使用 `v-model` 绑定输入框中的密码，并在 `watch` 中监听密码的变化。当密码发生变化时，我们使用 zxcvbn 计算密码的强度，并将结果存储在 `passwordStrength` 对象中。然后，我们在模板中使用 `v-if` 来显示密码强度评分和反馈。 注意，这个示例并没有实现密码强度要求的验证逻辑。如果你需要在密码不符合要求时显示错误消息，你可以添加一些额外的代码来实现这个逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值