Password强度及验证_js封装

最新推荐文章于 2023-08-10 09:45:00 发布
最新推荐文章于 2023-08-10 09:45:00 发布
阅读量730 收藏 1
点赞数
文章标签： class function div list input stylesheet

HTMl源码如下：

<head>

    <title>无标题页</title>

    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="JScript.js"></script>

  

</head>

<body>

    <div>

        <ul>

            <li>

                <div class="name_list font_space fleft"><span class="atten">*</span> 密 码：</div>

                <div class="input_list font_space fleft">

                    <input id="password" value="" name="password" size="36" maxlength="36"

                     onblur="this.style.borderColor='#A3BFA8';checkPWD(this.value);fCheckPwd(this.value);"

                     onfocus="this.style.borderColor='#99E300';_( 'chkPwd' ).style.display = 'none';this.style.borderColor='#99E300'"

                     onkeyup="checkPWD(this.value);" type="password" />

                    <div class="error_explain font_space" id="chkPwd" style="display: none;">请输入6～20位字符的密码</div>

                            <!--应用下面的层做密码安全提示

                       

                            最外层的 class 名和 span 内的文字即可调整密码强度呈现，对应关系如：

                            PSW_P_0-----未输入状态

                            PSW_P_1-----太短 （改变span内文字）

                            PSW_P_2-----很弱 （改变span内文字）

                            PSW_P_3-----一般 （改变span内文字）

                            PSW_P_4-----很强 （改变span内文字）

                            -->

                            <div class="PSW_P_0" id="chkpswd">

                                    <div class="PSW_P_W">密码安全程度：<span id="chkpswdcnt">太短</span></div>

                                    <div class="PSW_P_BGC">

                                            <div class="PSW_P_pC"></div>                       

                                    </div>             

                            </div>

                        </div>

                        <div class="explain_list fleft"><span class="explain">密码长度6～20位，由英文字母a～z

                (区分大小写)，数字0～9，特殊字符组成。</span></div>

            </li>

            <li>

                <div class="name_list font_space fleft"><span class="atten">*</span> 请再次输入密码：</div>

                <div class="input_list font_space fleft">

                <input name="password_cf" id="password_cf" value="" size="36" maxlength="36"

                 onblur="this.style.borderColor='#A3BFA8';confirmPwd( this )"

                 onfocus="this.style.borderColor='#99E300';_( 'pwdConfirm' ).style.display = 'none';" type="password" />

                <div class="error_explain font_space" id="pwdConfirm" style="display: none;">两次输入的密码不一致</div>

                </div>

            </li>

        </ul>

    </div>

</body>

</html>

 

HTML中用到的JScript.js：

// JScript 文件

function _(id) {//獲取對象

        return document.getElementById(id);

}

function checkPWD( me ){

        _( 'chkPwd' ).style.display = 'none';

        if (me == "") {

                _( "chkpswd" ).className = "PSW_P_0";

                _("chkpswdcnt").innerHTML = "";

                _( 'chkPwd' ).style.display = '';

        } else if (me.length < 6) {

                _( "chkpswd" ).className = "PSW_P_1";

                _("chkpswdcnt").innerHTML = "太短";

        } else if( ! isPassword( me ) || !/^[^%&]*$/.test( me )) {

                _( "chkpswd" ).className = "PSW_P_0";

                _("chkpswdcnt").innerHTML = "";

                _( 'chkPwd' ).style.display = '';

        }

        else {

                var csint = checkStrong(me);

                switch (csint) {

                case 1:

                        _("chkpswdcnt").innerHTML = "很弱";

                        _( "chkpswd" ).className = "PSW_P_"+(csint + 1);

                        break;

                case 2:

                        _("chkpswdcnt").innerHTML = "一般";

                        _( "chkpswd" ).className = "PSW_P_"+(csint + 1);

                        break;

                case 3:        

                        _("chkpswdcnt").innerHTML = "很强";

                        _( "chkpswd" ).className = "PSW_P_"+(csint + 1);

                        break;

                }

        }

}

 

//確定密碼是否合法

function fCheckPwd(str){

    if(!isPassword(str)){

        _( 'chkPwd' ).style.display = '';

    }

}

 

function isPassword( str ){

        if (str.length < 6 || str.length > 16) return false;

        var len;

        var i;

        len = 0;

        for (i=0;i<str.length;i++){

                if (str.charCodeAt(i)>255) return false;

        }

        return true;

}

function CharMode(iN){

        if (iN>=48 && iN <=57) //数字

        return 1;

        if (iN>=65 && iN <=90) //大写字母

        return 2;

        if (iN>=97 && iN <=122) //小写

        return 4;

        else

        return 8; //特殊字符

}

//bitTotal函数

//计算出当前密码当中一共有多少种模式

function bitTotal(num){

        modes=0;

        for (i=0;i<4;i++){

                if (num & 1) modes++;

                num>>>=1;

        }

        return modes;

}

//checkStrong函数

//返回密码的强度级别

function checkStrong(sPW){

        Modes=0;

        for (i=0;i<sPW.length;i++){

                //测试每一个字符的类别并统计一共有多少种模式.

                Modes|=CharMode(sPW.charCodeAt(i));

        }

        return bitTotal(Modes);

}

 

//以下是確定密碼部分

function confirmPwd( me ){

        var oPassword = _( "password" );

        if (oPassword.value == "") {

                return;

        }

        if( ! ( me.value == oPassword.value ) || ! isPassword( me.value ) )

            _( "pwdConfirm" ).style.display = "";

}

HTNML中的StyleSheet.css文件：

 

body,div,ul,li,form,p{padding:0;margin:0;list-style-type:none;}

body{background-color:#FFF;margin-top:7px;}

body,div{text-align:center;font-size:12px;font-family:宋体;margin-left:auto;margin-right:auto;line-height:19px;}

input,select{border:#A3BFA8 1px solid;background-color:#FFF;}

ul,li{clear:both;}

 

.name_list{width:180px;text-align:right; margin-bottom:12px;padding-top:2px; clear:both;}

.font_space{letter-spacing:1px;}

.fleft{float:left;}

.atten{font-size:12px;font-weight:normal;color:#F00;}

.input_list{width:250px;text-align:left;}

 

.explain{color:#A3A3A3;}

.explain_list{background:url(http://mimg.126.com/new/reg/explain.gif) no-repeat;margin-left:0px;padding-left:14px;width:230px;text-align:left;}

/*错误提示*/

.error_explain{ clear:both; text-align:left; padding:0px 50px 5px 0px; color:#FF0000;}

 

/*PSW_P_0-----未输入状态        PSW_P_1-----太短        PSW_P_2-----很弱        PSW_P_3-----一般        PSW_P_4-----很强 */

 

.PSW_P_0,.PSW_P_1,.PSW_P_2,.PSW_P_3,.PSW_P_4{position:relative;height:30px;color:#666}/*密码强度容器*/

        .PSW_P_W{position:absolute;left:0px;top:3px}/*密码强度固定文字*/

        .PSW_P_BGC{position:absolute;left:0px;top:22px;width:235px!important;width:234px;height:4px;background-color:#E0E0E0; font-size:0px;line-height:0px}/*灰色强度背景*/

        .PSW_P_pC{float:left;font-size:0px;line-height:0px;height:4px}/*色块背景*/

       

        .PSW_P_0 span{display:none}

        .PSW_P_1 span{display:inline;color:#F00}

        .PSW_P_2 span{display:inline;color:#C48002}

        .PSW_P_3 span{display:inline;color:#2CA4DE}

        .PSW_P_4 span{display:inline;color:#063}

       

        .PSW_P_0 .PSW_P_pC{ width:0px}

        .PSW_P_1 .PSW_P_pC{ width:25%;background-color:#F00}

        .PSW_P_2 .PSW_P_pC{ width:50%;background-color:#F90}

        .PSW_P_3 .PSW_P_pC{ width:75%;background-color:#2CA4DE}

        .PSW_P_4 .PSW_P_pC{ width:100%;background-color:#063}

comzheng
关注
react入门—实现复杂表单方法的封装以及表单验证功能的实现（表单验证方法的封装优化）
weixin_45745641的博客
03-11 1479
文章目录前言复杂表单页面的实现表单验证方法 前言 在前端开发中，表单验证是很常见的功能，这边文章就来讲一下react入门实现复杂表单的功能，以及表单验证功能的实现 复杂表单页面的实现 实现一个表单页面，包含输入框，单选框和下拉框，点击提交能够拿取输入的数据 1.首先定义我们的非受限组件Hello，并在state中定义我们需要用到的变量： class Hello extends React.Component { state = { name: '',
JS判断密码强度封装
zhang1339435196的博客
01-19 577
/** * 校验密码强度 * 强度规则： * 1) 任何少于6个字符的组合，弱；任何字符数的同类字符组合，弱； * 2) 不少于6位的两类字符组合，中； * 3) 12位字符数以下的三类或四类字符组合，强； * 4) 12位字符数以上的三类或四类字符组合，非常好。 * @param value * @returns {number} 强度等级 */ export const checkPasswordStrong = (value) => { let modes = 0 if
php强中弱密码,JS实现密码弱中强显示
weixin_29051193的博客
03-17 246
本文主要和大家分享JS实现密码弱中强显示，主要以代码的方式和大家分享，希望能帮助到大家。onload = function () {var tds = document.getElementById('tb').getElementsByTagName('td');document.getElementById('txt').onkeyup = function () {for (var i = ...
input type=“password“密码自动带入密码如何解决
张木期的博客
11-15 8671
用input type="password"密码框，浏览器会自动带入密码，可以加个autocomplete=“new-password” 比如 <a-input-password v-model="password" style="width:370px;margin-left:10px;" placeholder="8-15个字符，必须同时包含数字、英文、特殊符号" autocomplete="new-
input type="password" 浏览器自动填充账号和密码
weixin_44119268的博客
01-19 2729
再input标签上设置属性type为password很容易被浏览器识别，然后自动填充以前保存的密码。这里推荐一种特别简单的方法解决这个问题。 在input属性type为text的标签上添加下面的属性 autoComplete="off" 在input属性type为password的标签上添加下面的属性 autoComplete="new-password" 就能解决浏览器自动填充账号和密码的问...
解决 input type="password" 标签自动记住账号密码
qq_37668442的博客
07-27 3295
参考 https://blog.csdn.net/zgahlibin/article/details/78321246 描述 如谷歌浏览器，使用input type="password"控件登录时，网址最后有一个小钥匙，而且会弹出提示框：是否记住该网站的密码。 期望达到的效果是没有小钥匙，而且不弹出提示框。 思路 放弃使用type="password"控件，而使用type=“text” 替换。每...
vue.js表单密码强度验证代码
04-07
2. **创建Vue组件**：创建一个新的Vue组件，如`PasswordStrength.vue`，用于封装密码输入和强度验证的功能。 3. **数据绑定**：在组件的data选项中，定义一个`password`变量，用于存储用户的输入。同时，定义一个`...
passwordCheck_changeclass_
09-29
6. **类（Class）的使用**：在面向对象编程中，密码检查或更改功能可能会封装在一个名为`PasswordCheck`或`ChangeClass`的类中，包含如`validatePassword`、`changePassword`等方法。 7. **用户输入验证**：在前端...
password_checker
03-08
"password_checker"是一个基于JavaScript的项目，主要用于检查和验证用户输入的密码强度。在网络安全日益重要的今天，密码的安全性成为了用户账户安全的第一道防线。这个工具可以帮助开发者或用户确保创建的密码符合...
Js验证密码强弱jquery插件版实例
05-12
　password_strength_plugin.js完成核心的密码强度检测。 　在网页中，检测密码强度是一个重要的概念，关系到每位用户的安全，因此在用户注册时应该给予一定的风险提示，并判断用户所注册的密码是否安全。
解决 input type=“password“ 标签自动记住账号密码问题
lxt_nb的博客
09-06 734
html 解决 input type="password" 标签自动记住账号密码问题主要实现逻辑代码 主要实现逻辑 把input type=“password” 改成 type=“text” 隐藏input密码，用 ‘●’ 代替input中的内容，把真实密码存到input标签的一个属性中实现，下面的逻辑，每次input框中内容变化，获取真实密码逻辑如下： 代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch
如何真正解决浏览器给输入框input自动填充密码
iUserWang
09-10 8724
我们在使用浏览器的过程中，经常会保存一些账户和密码。如下图所示，可以在自动填充中查看： 这个方式为我们大大减轻了需要记忆多个用户名和密码的负担。 但对于开发人员来说，也带来了些小困扰。 一、问题 input的type是text等类型时，一切正常。 而当你将你的input的type改成password的时候，问题就出现了。 <input type="password" class="for...
vue 浏览器 input type=“password“自动填充密码处理
weixin_46544600的博客
01-12 1068
autocomplete=“new-password” 也有问题。autocomplete=“off” 不生效。最后将type 值动态化处理好了。
记住账号密码 （根据输入的账号，密码框自动输入有效密码）
xy_peng的博客
12-05 9077
login window.onload=function onLoginLoaded() { if(isPostBack == "False") { GetLastUser(); } } function GetLastUser() { var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";//GUID标识符 var usr
解决 input 自动填充用户名及密码
weixin_42645102的博客
07-03 2377
问题：iview input自动填充用户名及密码 解决： 1.复制自动填充的 input 标签，于是有两个相同的输入框 <FormItem label="新密码" prop="passwd"> <Input type="password" v-model="formValidate.passwd" placeholder="请设置新密码"></Inpu...
2022年网络安全面试题总结
m0_73896875的博客
07-07 2779
2022年网络安全最新企业真实面试题 问题1：您之前使用过的安全设备有哪些，说一下您是如何使用的？ 答案：我使用过360态势感知（也叫本脑）ids/ips/waf/科来的全流量分析设备等，介绍一个会的就行，比如 360 本脑 直接说参加过一次国护在三峡，主要是做分析研判，查看告警信息，以及用日志分析来查找这个内外网的ip详细信息，最终来确定是否为误报。 问题2：您熟悉云安全技术架构吗？ 答案：了解过一些，将控制平面泄漏风险降至最低，采用策略作为云基础设施代码，使开发人员能够安全的构建云环境等等。
vue自定义密码输入框解决浏览器自动填充密码的问题
最新发布
woisking2的博客
08-10 2467
在尝试了上述几种解决方案后，发现效果都不是很好，所以我感觉只有让input的type属性始终为password，才能更有效的解决这个问题。可以考虑自定义一个密码输入框组件，通过某些方法去改变input的值的显示方式，来达到隐藏密码的效果。目前想出了两种方法：一个是不改变input的值，仅仅隐藏input的内容，用另一个容器去显示密码或者显示；另一个是将实际密码存在另一个变量中，将input的value值改成来显示。
限制用户不允许输入中文字符
you can you up up up的博客
03-29 3387
应用JavaScript提供的excape()方法，该方法返回一个包含了charstring内容的字符串值，通过判断转换后的字符串是否包含“%u”,即可知道字符串中是否包含中文字符‘ <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.get...
浏览器自动回显账户密码问题
m0_38022543的博客
06-23 818
浏览器自动回显账户密码问题
JavaScript策略模式实践：输入验证
"本文主要探讨了JavaScript设计模式中的策略模式，并着重讲解了如何在输入验证场景中应用这一模式。通过封装不同的验证策略为独立的函数，实现策略的可替换性，使得验证规则的变化不会影响到整个系统。同时，提供了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值