表单密码强度判断代码

最新推荐文章于 2022-01-10 09:40:53 发布
最新推荐文章于 2022-01-10 09:40:53 发布
阅读量1.3k 收藏
点赞数
分类专栏： js知识点 文章标签： 表单密码强度判断代码 css html js 列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WuqibuHuan/article/details/111150166
版权

**

HTML

**
<form name="form1" method="post" action="xxx.aspx" id="form1">
    <div id="pnBefore" class="t_zc_tc_a_tizhuce_a">
        <div class="t_zc_tc_a_tizhuce_bg">
            <div class="ywz_zhuce_bao" style="height: 580px; padding: 40px 0 0 0 !important;
                border-right: none !important; margin-bottom: 0px;">
                <div class="t_ywz_fuzai_yi"></div>
                <div class="t_ywz_fuzai_yi"></div>
                <div class="ywz_zhucexiaobo">
                    <div class="ywz_zhuce_youjian"> 设置密码：</div>
                    <div class="ywz_zhuce_xiaoxiaobao">
                        <div class="ywz_zhuce_kuangzi">
                            <input name="tbPassword" type="password" id="tbPassword" class="ywz_zhuce_kuangwenzi1">
                        </div>
                        <div class="ywz_zhuce_huixian" id="pwdLevel_1"> </div>
                        <div class="ywz_zhuce_huixian" id="pwdLevel_2"> </div>
                        <div class="ywz_zhuce_huixian" id="pwdLevel_3"> </div>
                        <div class="ywz_zhuce_hongxianwenzi"> 弱</div>
                        <div class="ywz_zhuce_hongxianwenzi"> 中</div>
                        <div class="ywz_zhuce_hongxianwenzi"> 强</div>
                    </div>
                    <div class="ywz_zhuce_yongyu1"> <span id="pwd_tip" style="color: #898989"><font style="color: #F00">*</font> 6-16位，由字母（区分大小写）、数字、符号组成</span> <span id="pwd_err" style="color: #f00; display:none;">6-16位，由字母（区分大小写）、数字、符号组成</span> </div>
                </div>
            </div>
        </div>
    </div>

</form>

**

css

**

/** 清除内外边距 **/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,/* structural elements 结构元素 */
dl,dt,dd,ul,ol,li,/* list elements 列表元素 */
pre,/* text formatting elements 文本格式元素 */
form,fieldset,legend,button,input,textarea,/* form elements 表单元素 */
 /* table elements 表格元素 */
img/* img elements 图片元素 */ {
	border:medium none;
	margin:0;
	padding:0;
}
input::-ms-clear {
	display:none;
}
/** 设置默认字体 **/
body,button,input,select,textarea {
	font-family:微软雅黑,Verdana,Geneva,sans-ser;
	font-size:14px;
	color:#666;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
}
em {
	font-style:normal;
}
/** 重置列表元素 **/
ul,ol,li {
	list-style:none outside;
	display:block;
	overflow:hidden;
}
/** 重置超链接元素 **/
a {
	text-decoration:none;
	color:#333;
}
/** 重置图片元素 **/
img {
	border:0px;
}
/** 重置表格元素 **/



/**************代码 start*********************/
.ywz_zhuce_wenzi {
	float:left;
	width:1000px;
	text-align:left;
	height:30px;
	line-height:30px;
	font-weight:bold;
	font-size:16px;
	color:#333;
}
.ywz_zhuce_zou1 {
	float:left;
	width:1000px;
	height:690px;
	border:1px #dcdcdc solid;
}
.ywz_zhuce_huanying {
	float:left;
	width:600px;
	margin-left:61px;
	margin-top:36px;
	font-size:16px;
	font-weight:bold;
	color:#797979;
}
.ywz_zhuce_bao {
	float:left;
	width:640px;
	height:360px;
	padding:30px 0px 0px 66px;
	border-right:1px dashed #e5e5e5;
}
.ywz_zhucexiaobo {
	float:left;
	width:620px;
	padding-bottom:10px;
	padding-top:5px;
	margin-left:20px;
}
.ywz_zhuce_youjian {
	float:left;
	width:100px;
	margin:5px 0 0 0;
	font-size:14px;
	text-align:right;
}
/*用户*/
.ywz_hong {
	color:#ff4e00;
	font-size:12px;
	font-family:"宋体";
}
/*加红*/
.ywz_zhuce_kuangzi {
	float:left;
	width:226px;
	height:38px;
	color:#171717;
}
.ywz_zhuce_kuangwenzi2 {
	float:left;
	color:#3e3e3e;
	width:210px;
	height:36px;
	border:1px solid #C4C4C4;
	padding:0 15px 0 15px;
	line-height:35px;
	_padding-left:20px;
	outline:medium;
}
.ywz_zhuce_kuangwenzib {
	float:left;
	border:1px solid #C4C4C4;
	color:#3e3e3e;
	width:210px;
	height:36px;
	padding:0 15px 0 15px;
	line-height:35px;
	_padding-left:20px;
	outline:medium;
}
.ywz_zhuce_input {
	float:left;
	color:#3e3e3e;
	width:126px;
	height:36px;
	border:0;
	padding-left:25px;
	line-height:35px;
	_padding-left:20px;
	outline:medium;
	border-left:1px solid #c4c4c4;
	border-top:1px solid #c4c4c4;
	border-bottom:1px solid #ebebeb;
	border-right:1px solid #ebebeb;
	line-height:36px;
	color:#b6b6b6;
}
.ywz_zhuce_yuo {
	float:right;
	width:240px;
	margin-top:60px;
}
.ywz_zhuce_yongkuang1 {
	font-size:16px;
	font-weight:bold;
	color:#010101;
	clear:both;
	text-align:left;
	text-indent:22px;
}
.ywz_zhuce_hongkuang {
	float:left;
	margin-top:15px;
	background:#fe7213;
}
.ywz_zhuce_hongkuang a {
	float:left;
	font-size:14px;
	background:#A2A2A2;
	width:137px;
	height:34px;
	font-weight:bold;
	color:#FFF;
	line-height:34px;
}
.ywz_zhuce_hongkuang a:hover {
	float:left;
	background:#C00;
	width:137px;
	height:34px;
	color:#FFF;
}
.ywz_zhuce_denglusanjiao {
	float:left;
	margin-top:12px;
	margin-left:35px;
	color:#fff;
}
.ywz_zhuce_muqian {
	float:left;
	width:205px;
	margin-top:30px;
	font-size:12px;
	color:#666;
	text-align:left;
}
.ywz_zhuce_hongzi {
	color:#ff6701;
}
.ywz_zhuce_kuangwenzi3 {
	float:left;
	background:url(../images/zhuce_kuang_03.jpg) no-repeat;
	border:0;
	color:#3e3e3e;
	width:222px;
	height:30px;
	padding-left:2px;
	padding-top:12px;
}
.ywz_tc_dl {
	float:left;
	background:url(../images/denglu-yaoshi_03.jpg) no-repeat;
	width:20px;
	height:30px;
}
.ywz_zhuce_yongyu {
	float:left;
	color:#468e9d;
	font-size:12px;
	padding-left:15px;
	margin-top:10px;
	_padding-left:5px;
}
/*后面的文字*/
.ywz_zhuce_yongyu a {
	color:#468e9d;
}
.ywz_zhuce_yongyu a:hover {
	color:#468e9d;
	text-decoration:underline;
}
.ywz_zhuce_yongyu1 {
	float:left;
	color:#C00;
	font-size:12px;
	padding-left:10px;
	margin-top:10px;
	_padding-left:0px;
}
/*后面的文字*/
.ywz_zhuce_yongyu1 a {
	color:#C00;
	text-decoration:none;
}
.ywz_zhuce_yongyu1 a:hover {
	color:#C00;
}
.ywz_zhuce_xiaoxiaobao {
	float:left;
	width:226px;
}
.ywz_zhuce_hongxian {
	float:left;
	background:#ff3300;
	width:62px;
	height:4px;
	margin-top:5px;
	margin-left:5px;
	_margin-top:0px;
	_height:2px;
	font-size:0px;
}
.ywz_zhuce_hongxian2 {
	float:left;
	background:#099;
	width:62px;
	height:4px;
	margin-top:5px;
	margin-left:5px;
	_margin-top:0px;
	_height:2px;
	font-size:0px;
}
.ywz_zhuce_hongxian3 {
	float:left;
	background:#060;
	width:62px;
	height:4px;
	margin-top:5px;
	margin-left:5px;
	_margin-top:0px;
	_height:2px;
	font-size:0px;
}
.ywz_zhuce_huixian {
	float:left;
	background:#d6d3d3;
	width:62px;
	height:4px;
	margin-top:5px;
	_margin-top:0px;
	margin-left:5px;
	_height:2px;
	font-size:0px;
}
.ywz_zhuce_hongxianwenzi {
	float:left;
	width:62px;
	margin-left:5px;
	text-align:center;
	color:#b0adad;
	font-size:12px;
}
.ywz_zhuce_tongyi {
	float:right;
	width:530px;
	margin-bottom:10px;
}
/*同意内面*/
.ywz_zhuce_dui {
	float:left;
	width:10px;
	height:10px;
}
.ywz_zhuce_tongyiwenzi {
	float:left;
	font-size:12px;
	color:#555;
	padding-bottom:10px;
}
/*同意*/
.ywz_zhuce_lanseai {
	color:#1190ae;
}
.ywz_jhbg1 {
	background:url(../images/DENGSE_03.jpg) no-repeat center top;
	width:7px;
	height:12px;
	_padding-top:5px;
	_height:2px;
	_font-size:0px;
	*height:16px;
	display:inline-block;
}
.ywz_zhuce_bgkuang {
	float:right;
	width:520px;
	text-align:center;
}
.ywz_zhuce_tijiao {
	float:left;
	background:#e6343c;
	width:200px;
	height:40px;
}
.ywz_zhuce_tijiao a {
	float:left;
	background:#e6343c;
	width:2020px;
	height:40px;
	color:#FFF;
	font-size:16px;
	line-height:40px;
}
.ywz_zhuce_tijiao a:hover {
	float:left;
	background:#d52028;
	width:200px;
	height:40px;
}
.ywz_zhuce_zhujiwenzi {
	float:left;
	font-size:18px;
	font-weight:bold;
	color:#fff;
	padding-left:55px;
	padding-top:15px;
}
.register_hy2 {
	margin-top:6px;
	float:left;
	height:30px;
	line-height:30px !important;
	font-family:微软雅黑,Verdana,Geneva,sans-serif;
}
/*弹窗注册*/
.reg_succes1 a {
	color:#FFF;
	line-height:26px;
}
/*人头*/
.ywz_zhuce_kuangwenzi {
	float:left;
	background:url(../images/deng1.jpg) no-repeat;
	border:0;
	color:#3e3e3e;
	width:221px;
	height:40px;
	line-height:35px;
	padding-left:25px;
	_padding-left:20px;
	outline:medium;
}
/*邮箱*/
.ywz_zhuce_kuangwenzi0 {
	float:left;
	background:url(../images/zhuce_kuang_03.jpg) no-repeat;
	border:0;
	color:#3e3e3e;
	width:220px;
	height:35px;
	line-height:35px;
	padding-left:5px;
	_padding-left:7px;
	outline:medium;
}
/*钥匙*/
.ywz_zhuce_kuangwenzi1 {
	float:left;
	background:url(../images/dengl_06.jpg) no-repeat;
	border:0;
	color:#3e3e3e;
	width:210px;
	height:40px;
	line-height:35px;
	padding-left:25px;
	_padding-left:20px;
	outline:medium;
}
/*框*/
.ywz_zhuce_denglu {
	float:left;
	color:#468e9d;
	font-size:12px;
	padding-top:10px;
	padding-left:15px;
	_padding-left:0px;
}
.ywz_zhuce_denglu a {
	color:#468e9d;
}
.ywz_zhuce_denglu a:hover {
	color:#468e9d;
	text-decoration:underline;
}
.ywz_zhuce_denglulo {
	float:left;
	width:110px;
	color:#949494;
	margin-top:15px;
	font-size:12px;
}
.ywz_zhuce_denglu1 {
	color:#468e9d;
	font-size:12px;
}
.ywz_zhuce_denglu1 a {
	color:#468e9d;
}
.ywz_zhuce_denglu1 a:hover {
	color:#468e9d;
	text-decoration:underline;
}
.ywz_zhuce_denglukuang {
	float:left;
	width:500px;
	margin-top:0px;
	height:40px;
	text-align:center;
}
.dcdl {
	width:500px;
	background:#e6343c;
	width:182px;
	height:40px;
	line-height:40px;
	text-align:center;
	color:#fff;
	font-size:16px;
	font-weight:bold;
	border:none;
}
.dcdl:hover {
	background:#c1171f;
}
.ywz_zhuce_kuangzilu {
	float:left;
	width:105px;
}
.ywz_zhuce_kuangzidenglu {
	float:left;
	background:url(../images/dengloo_03.jpg) no-repeat;
	border:0px;
	color:#3e3e3e;
	width:120px;
	height:37px;
	line-height:30px;
	padding-left:5px;
	outline:medium;
}
/*验证码*/
.ywz_denglu_yanzheng {
	float:left;
	margin-left:15px;
	padding-left:8px;
	_margin-left:1px;
	_padding-left:2px;
}
.ywz_zhuce_dengbao {
	float:left;
	width:640px;
	height:280px;
	padding:30px 0px 0px 66px;
	border-right:1px dashed #e5e5e5;
}
/**************代码  end*********************/

**

js

**

$('#tbPassword').focus(function() {
    $('#pwdLevel_1').attr('class', 'ywz_zhuce_hongxian');
    $('#tbPassword').keyup();
});

$('#tbPassword').keyup(function() {
    var __th = $(this);

    if (!__th.val()) {
        $('#pwd_tip').hide();
        $('#pwd_err').show();
        Primary();
        return;
    }
    if (__th.val().length < 6) {
        $('#pwd_tip').hide();
        $('#pwd_err').show();
        Weak();
        return;
    }
    var _r = checkPassword(__th);
    if (_r < 1) {
        $('#pwd_tip').hide();
        $('#pwd_err').show();
        Primary();
        return;
    }

    if (_r > 0 && _r < 2) {
        Weak();
    } else if (_r >= 2 && _r < 4) {
        Medium();
    } else if (_r >= 4) {
        Tough();
    }

    $('#pwd_tip').hide();
    $('#pwd_err').hide();
});



function Primary() {
    $('#pwdLevel_1').attr('class', 'ywz_zhuce_huixian');
    $('#pwdLevel_2').attr('class', 'ywz_zhuce_huixian');
    $('#pwdLevel_3').attr('class', 'ywz_zhuce_huixian');
}

function Weak() {
    $('#pwdLevel_1').attr('class', 'ywz_zhuce_hongxian');
    $('#pwdLevel_2').attr('class', 'ywz_zhuce_huixian');
    $('#pwdLevel_3').attr('class', 'ywz_zhuce_huixian');
}

function Medium() {
    $('#pwdLevel_1').attr('class', 'ywz_zhuce_hongxian');
    $('#pwdLevel_2').attr('class', 'ywz_zhuce_hongxian2');
    $('#pwdLevel_3').attr('class', 'ywz_zhuce_huixian');
}

function Tough() {
    $('#pwdLevel_1').attr('class', 'ywz_zhuce_hongxian');
    $('#pwdLevel_2').attr('class', 'ywz_zhuce_hongxian2');
    $('#pwdLevel_3').attr('class', 'ywz_zhuce_hongxian3');
}




function checkPassword(pwdinput) {
    var maths, smalls, bigs, corps, cat, num;
    var str = $(pwdinput).val()
    var len = str.length;

    var cat = /.{16}/g
    if (len == 0) return 1;
    if (len > 16) {
        $(pwdinput).val(str.match(cat)[0]);
    }
    cat = /.*[\u4e00-\u9fa5]+.*$/
    if (cat.test(str)) {
        return -1;
    }
    cat = /\d/;
    var maths = cat.test(str);
    cat = /[a-z]/;
    var smalls = cat.test(str);
    cat = /[A-Z]/;
    var bigs = cat.test(str);
    var corps = corpses(pwdinput);
    var num = maths + smalls + bigs + corps;

    if (len < 6) {
        return 1;
    }

    if (len >= 6 && len <= 8) {
        if (num == 1) return 1;
        if (num == 2 || num == 3) return 2;
        if (num == 4) return 3;
    }

    if (len > 8 && len <= 11) {
        if (num == 1) return 2;
        if (num == 2) return 3;
        if (num == 3) return 4;
        if (num == 4) return 5;
    }

    if (len > 11) {
        if (num == 1) return 3;
        if (num == 2) return 4;
        if (num > 2) return 5;
    }
}

function corpses(pwdinput) {
    var cat = /./g
    var str = $(pwdinput).val();
    var sz = str.match(cat)
    for (var i = 0; i < sz.length; i++) {
        cat = /\d/;
        maths_01 = cat.test(sz[i]);
        cat = /[a-z]/;
        smalls_01 = cat.test(sz[i]);
        cat = /[A-Z]/;
        bigs_01 = cat.test(sz[i]);
        if (!maths_01 && !smalls_01 && !bigs_01) {
            return true;
        }
    }
    return false;
}

**

效果图

**

这里会根据字母 数字 符号的组成来设置密码的强度

厚积薄发的Cicci
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue.js表单密码强度验证代码.zip
07-04
vue.js表单密码强度验证代码是一款适用于手机注册表单输入密码强度验证特效。
Laravel后台框架dcat-admin 编辑用户密码hash
多才多多
10-09 1158
dcat admin 修改普通用户的密码
JavaScript表单——验证密码强度
flymyd的博客
07-08 1079
第一种： HTML部分： 密码强度 #passStrength{height:6px;width:120px;border:1px solid #ccc;padding:2px;} .strengthLv1{background:red;height:6px;width:40px;} .strengthLv2{background:orange;height:6px
密码强度验证js代码
萧笛之音
12-06 153
[code="java"] JS判断密码强度 //判断输入密码的类型 function CharMode(iN){ if (iN>=48 && iN =65 && iN =97 && iN >=1; } return modes; } //返回强度级别 function checkStrong(sPW){ if (sPW.leng...
JS----简单表单密码强度检验
Damys
04-08 1838
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>表单常用的密码强度检验</title> </head> <body> <input type="password" id = 'oInput'/><span id = 'oSpan'></span> <script> (function(win){ va
Java实现--密码强度检测--的工具类代码
05-12 1万+
介绍做项目过程中，需要使用java来检测用户设置的密码强度问题，网上说的也比较多，但是对于密码到底什么样算是好的密码，并没有一个统一的标准。我这里借鉴网上的一个密码强度检测的办法，进行一个简单的说明，当然，我这里只是借鉴，并不能说非常好，只是个人觉得这个标准已经非常好了。 参考的网址链接：http://password.mx500.com/ 该网址打开界面如下： 该网址里面详细说明了一个密码的
js密码强度实时检测代码
01-21
密码强度的判断, 在注册网站用户的时候, 是一个必须要做的事情, 不同的网站, 实现的方式是不一样的. 密码的判断, 其实也就是一个表单验证的其中一项. 那我们来实现这么一个简单的操作. 首先做一个简单的密码输入框...
jQuery实现密码强度的智能判断特效特效代码
03-20
jQuery实现密码强度的智能判断特效,jQuery,密码强度,表单按钮.
表单中的JS密码强度计算、长度计算程序
05-01
内容索引:脚本资源,Ajax/JavaScript,密码强度计算　此代码演示了在表单中运用JS来判断用户输入的密码强度，以及长度是否符合要求，随着用户的输入程序会出现“强、中、弱”的强度提示。现在很多网站在用户注册表单...
jQuery实现密码强度的智能判断特效.zip
07-04
jQuery实现密码强度的智能判断特效,jQuery,密码强度,表单按钮.
密码强度 js代码
05-22
密码强度 js代码 提示用户当前密码的安全强度，很方便使用，酷酷的！
用户注册密码强度提示代码.rar
07-04
用户注册密码强度提示代码
Javascript校验密码复杂度的正则表达式
12-13
目前使用的正则表达式如下： 代码如下: (?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30} 对应的验证规则是：密码中必须包含字母、数字、特称字符，至少8个字符，最多30个字符。 这个正则表达式在C#可以正常使用，但是在Javascript中却有问题。 请问是在js中如何写这样的正则表达式？ 测试字符串：a123456- 解决方法如下所示： 把\d改为[0-9]问题就解决了，正则表达式如下： 代码如下: var regex = new RegExp(‘(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])
jquery.validate表单验证密码完整例子(带密码强度显示）
10-12
jquery.validate表单验证密码完整例子(带密码强度显示）
漂亮表单验证和密码强度的验证
10-14
漂亮表单验证和密码强度、现在各个网站论坛的注册页面的简单验证
前端案例：简易登录表单的制作，包括用户名、密码、随机验证码（代码完整，复制即用）
热门推荐
商务合作 | 共同学习 | 携手共进
01-10 9万+
一个简易登录表单的实现，包括用户名、密码、验证码；验证码使用canvas绘制，随机生成。
html判断确认密码函数代码,javascript密码强度校验代码（两种方法）
weixin_31599065的博客
06-09 1003
先看效果图：javascript密码强度校验代码，具体实现思路不多说了，请看下面代码和demo。第一种方法：/**密码安全程度*return ：全部为字母或者数字,或者密码长度小于*return : 字母数字组成，或者字母特殊字符，或者数字和特殊字符*return : 字母和数字和特殊字符*/String.prototype.passwordStrength=function(){if(this....
jquery表单密码强度检测实现（）
zgphacker2010的专栏
12-18 1368
最近打算在用户改密表单 或 创建账号表单中，对输入的密码进行强度检测功能。在网上找了两篇比较实用的资源，本人对这些资源进行了整合。下面给出了几种效果图： 效果1：jquery.validate表单验证密码完整例子(带密码强度显示） 说明，这里的强中弱三种效果是使用背景图片实现的 效果2：jquery注册表单设置密码强度提示判断验证代码 说明，这个案例中是使用纯CSS效果实现 效果...
JS判断密码强度的代码
10-01 218
Code1<html>2<head>3<title>JS判断密码强度的代码-www.webdm.cn</title>4<scriptlanguage=javascript>5//判断输入密码的类型6functionCharMode(iN){7if(iN>=48&&iN...
jsp判断表单密码和确认密码
最新发布
05-31
你可以使用 JavaScript 和 JSP 来判断表单中的密码和确认密码是否一致。以下是一个简单的示例： 1. 在 JSP 文件中，你可以使用以下代码来创建一个表单： ``` 密码： ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值