JQuery密码强度验证

最新推荐文章于 2024-02-13 13:03:55 发布
最新推荐文章于 2024-02-13 13:03:55 发布
阅读量2.2k 收藏 2
点赞数 3
分类专栏： JQuery+JS+Ajax+JSON

源码来自github前端大神：view-source:http://blog.poetries.top/works/demo/jquery/jQuery%E5%AF%86%E7%A0%81%E5%BC%BA%E5%BA%A6%E7%9A%84%E5%88%A4%E6%96%AD.html
这里写图片描述
html文件


<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>jQuery密码强度验证</title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            html,body{
                width:100%;
                height:100%;
            }
            .pwdcheck {
                margin:50px auto;
                width:700px;
                height:50px;
            }
            .pwdcheck p.pwdInput input.pwd{
                width:150px;
                height:20px;
            }
            .pwdcheck p.pwdInput label {
                font-size:12px;
            }
            .pwdcheck p.pwdInput label.tips{
                color:red;
            }
            .pwdcheck p.pwdInput label span {
                color:#f00;
                padding:0 5px;
            }
            .pwdcheck p.pwdColor {
                width:150px;
                height:5px;
                margin-top:6px;
                margin-left:53px;
            }
            .pwdcheck p.pwdColor span {
                display:inline-block;
                width:40px;
                height:4px;
                float:left;
                margin-right:10px;
                background:#ccc;
            }

            .pwdcheck p.pwdText {
                margin-left:60px;
            }
            .pwdcheck p.pwdText span{
                margin-right:20px;
                margin-left:10px;
                font-size:12px;
                color:#ddd;
            }

            /* 密码强度改变的样式 */

            .pwdcheck p.pwdColor span.co1 {
                background:#f00;
            }
            .pwdcheck p.pwdColor span.co2 {
                background:#00ff66;
            }

            .pwdcheck p.pwdColor span.co3 {
                background:#0033cc;
            }




        </style>
    </head>
    <body>
        <div class="pwdcheck">
            <p class="pwdInput">
                密码：<input type="password" class="pwd" id="pwd" name="pwd" maxlength="16">
                <label><span>*</span>由字母（区分大小写）、数字、符号组成6-16位</label>
            </p>
            <p class="pwdColor">
                <span class="c1"></span>
                <span class="c2"></span>
                <span class="c3"></span>
            </p>
            <p class="pwdText">
                <span>弱</span>
                <span>中</span>
                <span>强</span>
            </p>
        </div>
    </body>
    <script type="text/javascript" src="js/jquery.js" ></script>
    <script type="text/javascript" >
    $("input#pwd").keyup(function(){

        var txt=$(this).val(); //获取密码框内容
        var len=txt.length; //获取内容长度

        if(txt=='' || len<6){
            $("label").show();
            $("label").addClass("tips");
        }else {
            $("label").hide();
        }

        checkpwd($(this));
    });

    //全部都是灰色的
    function primary(){
        $("p.pwdColor span").removeClass("co1,co2,co3");
    }

    //密码强度为弱的时候
    function weak(){
        $("span.c1").addClass("co1");
        $("span.c2").removeClass("co2");
        $("span.c3").removeClass("co3");
    }
    //密码强度为中等的时候
    function middle(){
        $("span.c1").addClass("co1");
        $("span.c2").addClass("co2");
        $("span.c3").removeClass("co3");
    }

    //密码强度为强的时候
    function strong(){
        $("span.c1").addClass("co1");
        $("span.c2").addClass("co2");  
        $("span.c3").addClass("co3");
    }

    /**判断密码的强弱规则
    1、如果是单一的字符（全是数字 或 字母 ）长度小于 6  弱
    2、如果是两两混合 (数字+字母（大小） 或 数字+特殊字符  或 特殊字符+字母  长度大于 8  中)
    3、如果是三者组合 (数字 +大写字母+小写字母 或 数字+字母+特殊字符 长度>8  强）)
**/

    //密码强弱判断函数

    function checkpwd(obj){
        var txt = $.trim(obj.val());//输入框内容 trim处理两端空格
        var len = txt.length;
        var num = /\d/.test(txt);//匹配数字
        var small = /[a-z]/.test(txt);//匹配小写字母
        var big = /[A-Z]/.test(txt);//匹配大写字母
        var corps = /\W/.test(txt);//特殊符号
        var val = num + small+big+corps; //四个组合


        if(len<1){
            primary();
        }else if(len<6){
            weak();
        }else if(len>6 && len<=8){
            if(val==1){
                weak();
            }else if(val==2){
                middle();
            }
        }else if(len>8){
            if(val==1){
                weak();
            }else if(val==2){
                middle();
            }else if(val==3){
                strong();
            }
            return false;
        }

    }



    </script>
</html>
秋小苒
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery密码强度验证
12-09
jquery 密码强度 验证，简洁明了，密码分别为6、7、8位时
jquery表单密码强度检测实现（）
zgphacker2010的专栏
12-18 1368
最近打算在用户改密表单 或 创建账号表单中，对输入的密码进行强度检测功能。在网上找了两篇比较实用的资源，本人对这些资源进行了整合。下面给出了几种效果图： 效果1：jquery.validate表单验证密码完整例子(带密码强度显示） 说明，这里的强中弱三种效果是使用背景图片实现的 效果2：jquery注册表单设置密码强度提示判断验证代码 说明，这个案例中是使用纯CSS效果实现 效果...
jquery实现密码强度验证
daditao的专栏
05-28 1163
$('#pass').keyup(function(e) { var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))
利用jQuery实现一个简单的密码验证问题
最新发布
m0_73708717的博客
02-13 251
("span").text("密码只能由数字字母下划线组成").css("color","red")$("span").text("密码长度应该为6-10位").css("color","red")<input type="text" placeholder="密码只能包含数字字母下划线，且为6-10位">我们首先要获取input里面的value值，在进行后续的操作，后续的操作也就是利用for循环判断即可。最后在设置span的样式即可。最后实现的效果大概是这个样子。
jQuery Password Validation（密码验证）
unber的博客
06-07 476
您可以重新加载 $.validator.passwordRating 实际发现不同的评价方法。或者您重新加载 $.validator.passwordRating.messages 来提供其他消息，比如当地化。一种评价密码的相关因素的功能：比大小写字母的混合情、字符（数字、特殊字符）的混合情、长度、与用户名的相似度（可选的）。一种使用评价功能显示密码强度的验证插件自定义方法。显示的文本可以被本地化。您可以简单地自定义强烈显示的外部视图、本地化信息显示，并收集到已有的表中。该插件目标前版本是 1.0.0。
jQuery实现密码强度检测
weixin_30885111的博客
07-26 169
jQuery普遍运用于JAVA_WEB前端，可以说jQuery的运用无处不在，学好jQuery，对于一个程序员来说是必由之路。下面简单介绍一下jQuery实现密码强度检测。 如图所示： 核心代码： 第一步：css样式： /** 清除内外边距 **/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structu...
JQuery实现密码强度验证
weixin_33785108的博客
02-28 136
密码强度验证的方式有很多，今天给大家推荐一个通过JQuery实现的密码强度验证控件，只需要很少的代码便能实现。 因为是基于JQuery的控件，当然需要JQuery库，还要一个本控件的JS。JQuery的JS大家可以到官网下载：http://code.jquery.com/jquery-1.4.2.min.js 这个控件的JS文件：password_s...
jQuery密码强度验证代码
04-07
jQuery密码强度验证代码是一款jQuery基于SVG制作的带密码强度验证提示输入框，支持密码显示或隐藏。
jquery 密码强度验证
11-15
jquery 密码强度验证 输入密码 系统自动验证密码强度
jQuery密码强度验证控件使用详解
11-29
本文实例为大家分享了jQuery密码强度验证控件，供大家参考，具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> [removed][removed] <...
jQuery密码强度验证插件
06-01
jQuery密码强度验证插件
漂亮易用的jQuery密码强度验证插件
10-22
一个漂亮易用的jQuery密码强度验证插件，随着密码强度的改变而改变密码输入的颜色
jquery密码强度检测_密码强度验证_密码强度正则表达式代码_动画效果
05-23
jquery密码强度检测_密码强度验证_密码强度正则表达式代码_动画效果（动画效果不用jquery）
jquery密码强度校验
10-23
主要介绍了jquery密码强度校验，这是一个非常常见的功能，在输入密码的时候提示密码的强度，本文使用jQuery来实现，有需要的小伙伴可以参考下。
jquery密码强度效果
09-21
jquery密码强度效果，正则验证密码强度
jQuery输入密码强度验证代码
06-10
jQuery输入密码强度验证代码，在密码校验框输入密码后检查是否包含大小写字母和数字和长度至少为十个字符，以判断密码强弱。
关于Jquery的Validate插件--rules添加自定义方法（强密码验证方法）
Little_Matches的博客
08-11 1006
链接:Query Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。此处提供强验证密码方法写法。
jquery密码强度判断js特效
ICode联盟
11-30 281
下载地址 jquery密码强度智能判断特效是一款非常实用的jquery特效，基本上每个有会员模块的网站都可用上，可以提示会员注册时输入的密码强度，主要用到了keyup事件。 $("#tbPassword").focus(function () { $("#pwdLevel_1").attr("class", "ywz_zhuce_hongxian"); $("#tbPassword").keyup(); }); $("#tbPassword").keyup(function () { var __th =
使用jQuery实现密码强度校验实时显示
Zijeak的博客
03-31 440
<!DOCTYPE html> <html> <head> <title>密码强度校验</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascri...
jquery 密码强度校验
07-27
- *1* [jQuery密码强度校验](https://blog.csdn.net/weixin_30412577/article/details/99327820)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值