JQuery密码强度验证

源码来自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
JQuery密码强度验证_第1张图片
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>

你可能感兴趣的:(JQuery密码强度验证)