Progress 进度条

使用说明

使用ax-progress表示进度条,进度结果放在最右侧,ax-progress-percent表示百分数结果,ax-progress-result表示图标结果。

87%
87%
87%
87%
87%
87%
87%
                                 <div class="ax-row">
                                    <div class="ax-col ax-col-12">
                                        <div class="ax-progress">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-percent">87%</span>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-progress ax-progress-secondary">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-percent">87%</span>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-progress ax-progress-danger">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-percent">87%</span>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-progress ax-progress-success">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-percent">87%</span>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-progress ax-progress-warning">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-percent">87%</span>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-progress ax-progress-info">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-percent">87%</span>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-progress ax-progress-ad">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-percent">87%</span>
                                        </div>
                                    </div>
                                    <span class="ax-gutter-xxl"></span>
                                    <div class="ax-col ax-col-12">
                                        <div class="ax-progress">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-result"><i class="ax-iconfont ax-icon-check-o-fill"></i></span>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-progress ax-progress-secondary">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-result"><i class="ax-iconfont ax-icon-info-o-fill"></i></span>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-progress ax-progress-danger">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-result"><i class="ax-iconfont ax-icon-close-o-fill"></i></span>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-progress ax-progress-success">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-result"><i class="ax-iconfont ax-icon-check-o"></i></span>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-progress ax-progress-warning">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-result"><i class="ax-iconfont ax-icon-info-o"></i></span>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-progress ax-progress-info">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-result"><i class="ax-iconfont ax-icon-close-o"></i></span>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-progress ax-progress-ad">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-result"><i class="ax-iconfont ax-icon-clock-fill"></i></span>
                                        </div>
                                    </div>
                                </div>
                         

渐变进度条

ax-progress-bar使用ax-gradient,可选颜色有ax-bg-primary,ax-bg-secondary,ax-bg-danger,ax-bg-success,ax-bg-warning,ax-bg-info,ax-bg-ad。默认是ax-bg-primary。渐变色值见Gradient 渐变

87%
87%
87%
87%
87%
87%
87%
                                    <div class="ax-row">
                                    <div class="ax-col ax-col-12">
                                        <div class="ax-progress">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar ax-bg-primary ax-gradient" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-percent">87%</span>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-progress">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar ax-bg-secondary ax-gradient" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-percent">87%</span>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-progress">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar ax-bg-danger ax-gradient" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-percent">87%</span>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-progress">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar ax-bg-success ax-gradient" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-percent">87%</span>
                                        </div>
                                    </div>
                                    <span class="ax-gutter-xxl"></span>
                                    <div class="ax-col ax-col-12">
                                        <div class="ax-progress">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar ax-bg-warning ax-gradient" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-percent">87%</span>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-progress">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar ax-bg-info ax-gradient" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-percent">87%</span>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-progress">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar ax-bg-ad ax-gradient" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-percent">87%</span>
                                        </div>
                                    </div>
                                </div>
                         

小进度条

ax-progress ax-sm即表示小进度条。

87%
                                        <div class="ax-progress ax-sm">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar ax-gradient" style="width: 87%;"></div>
                                            </div>
                                            <span class="ax-progress-percent">87%</span>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-progress ax-sm ax-progress-danger">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar" style="width: 45%;"></div>
                                            </div>
                                            <span class="ax-progress-result"><i class="ax-iconfont ax-icon-close-o"></i></span>
                                        </div>
                         

大进度条

ax-progress ax-lg即表示大进度条,高度28px。将进度值写在ax-progress-bar里。

87%
0%
24%
                                        <div class="ax-progress ax-lg">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar ax-gradient" style="width: 87%;"><i>87%</i></div>
                                            </div>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-progress ax-lg">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar ax-gradient" style="width: 0%;"><i>0%</i></div>
                                            </div>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-progress ax-lg">
                                            <div class="ax-progress-body">
                                                <div class="ax-progress-bar" style="width: 24%;"><i>24%</i></div>
                                            </div>
                                        </div>
                         

ProgressBar SVG进度条

ProgressBar是github上很受欢迎的svg进度条插件,详细用法见Github。本框架在v2.8.3基础上全面融合该插件,在原插件基础上进行了扩展,内容如下:

  • 增加了属性containerClass,默认是ax-progress-circle
  • 增加了属性strokeLinecap,该属性表示轨道两端的形状,可选项有buttroundsquare,默认是round
  • 增加了属性strokeLinejoin,该属性表示轨道两端的形状,可选项有buttroundsquare,默认是round
  • 增加了属性strokeOpacity,该属性表示轨道的透明度。
  • 增加了方法setClass,给div设置类,使用方法举例:circle.setClass('ax-success')
  • 增加了方法reClass,给div取消设置类,可让进度条回到初始风格状态。使用方法举例:circle.reClass()
  • 对于Line进度条取消居中布局,强制使用左右弹性布局。
  • 修改Circle进度条默认宽度是120px
  • 修改SemicCircle进度条默认宽度是160px
  • <script src="https://src.axui.cn/src/plugins/progressbar/progressbar.min.js"></script>
    <script type='text/javascript'>
        $(window).load(function () {
    
            var circle = new ProgressBar.Circle('#circle');
            circle.animate(0.6,{
                step: function(state,circle) {
                    var value = Math.round(circle.value() * 100);
                    circle.setText(value+'%');
                }
            });
    
        });
    </script>
                            
  •                                     <div id="circle"></div>
                                        

通过使用animatestep方法实现不同的效果。

  • <script src="https://src.axui.cn/src/plugins/progressbar/progressbar.min.js"></script>
    <script type='text/javascript'>
        $(window).load(function () {
    
    
           var circle01 = new ProgressBar.Circle('#circle01',{
                step: function(state,circle01) {
                    var value = Math.round(circle01.value() * 100);
                    circle01.setText(value+'%');
                }
            });
            circle01.animate(0.6);
    
            $('#cirBtn01').click(function () {
                circle01.animate(1);
            });
            $('#cirBtn01-b').click(function () {
                circle01.animate(0.6);
            });
            //
            var circle02 = new ProgressBar.Circle('#circle02', {
                from: { color: '#198cff' },
                to: { color: '#6619ff' },
                step: function(state, circle02, attachment) {
                    circle02.path.setAttribute('stroke', state.color);
                    var value = Math.round(circle02.value() * 100);
                    circle02.setText(value+'%');
                }
            });
            circle02.animate(0.3);
    
            $('#cirBtn02').click(function () {
                circle02.animate(1, function () {
                    circle02.setText('完成!');
                    circle02.setClass('ax-success');
                    circle02.text.style.color='#6619ff';
                });
            });
            $('#cirBtn02-b').click(function () {
                circle02.animate(0.3);
                circle02.reClass();
            });
            //
            var circle03 = new ProgressBar.Circle('#circle03', {
                step: function(state, circle03, attachment) {
                    var value = Math.round(circle03.value() * 100);
                    circle03.setText(value+'%');
                }
            });
            circle03.animate(0.6);
    
            $('#cirBtn03').click(function () {
                circle03.animate(1, function () {
                    circle03.setText('<svg class="ax-svg"><use xlink:href="#ax-icon-check"></use></svg>');
                    circle03.setClass('ax-success');
                });
            });
            $('#cirBtn03-b').click(function () {
                circle03.animate(0.6);
                circle03.reClass();
            });
            //
            var circle04 = new ProgressBar.Circle('#circle04', {
                step: function(state, circle04, attachment) {
                    var value = Math.round(circle04.value() * 100);
                    circle04.setText('<div class="ax-row01">加载进度</div><div class="ax-row02">'+value+'%</div>');
                }
            });
            circle04.animate(0.3);
    
            $('#cirBtn04').click(function () {
                circle04.animate(1, function () {
                    circle04.setText('完成!');
                    circle04.setClass('ax-success');
                });
            });
            $('#cirBtn04-b').click(function () {
                circle04.animate(0.3);
                circle04.reClass();
            });
    
    
        });
    </script>
                            
  •                                 <div class="ax-row">
                                        <div class="ax-col ax-col-6">
                                            <div id="circle01"></div>
                                            <div class="ax-break"></div>
                                            <div align="center">
                                                <a href="###" class="ax-btn" id="cirBtn01-b">后退</a>
                                                <a href="###" class="ax-btn" id="cirBtn01">前进</a></div>
                                        </div>
                                        <span class="ax-gutter-xxl"></span>
                                        <div class="ax-col ax-col-6">
                                            <div id="circle02"></div>
                                            <div class="ax-break"></div>
                                            <div align="center">
                                                <a href="###" class="ax-btn" id="cirBtn02-b">后退</a>
                                                <a href="###" class="ax-btn" id="cirBtn02">前进</a></div>
                                        </div>
                                        <span class="ax-gutter-xxl"></span>
                                        <div class="ax-col ax-col-6">
                                            <div id="circle03"></div>
                                            <div class="ax-break"></div>
                                            <div align="center">
                                                <a href="###" class="ax-btn" id="cirBtn03-b">后退</a>
                                                <a href="###" class="ax-btn" id="cirBtn03">前进</a></div>
                                        </div>
                                        <span class="ax-gutter-xxl"></span>
                                        <div class="ax-col ax-col-6">
                                            <div id="circle04"></div>
                                            <div class="ax-break"></div>
                                            <div align="center">
                                                <a href="###" class="ax-btn" id="cirBtn04-b">后退</a>
                                                <a href="###" class="ax-btn" id="cirBtn04">前进</a></div>
                                        </div>
                                    </div>
                                        

默认进度文字是居中心位置,使用autoStyleContainer: false可取消这个默认设定。

  • <script src="https://src.axui.cn/src/plugins/progressbar/progressbar.min.js"></script>
    <script type='text/javascript'>
        $(window).load(function () {
    
            var circle05 = new ProgressBar.Circle('#circle05',{
                text:{
                    autoStyleContainer: false,
                },
                step: function(state,circle05) {
                    var value = Math.round(circle05.value() * 100);
                    circle05.setText(value+'%');
                }
            });
            circle01.animate(0.6);
            $('#cirBtn05').click(function () {
                circle05.animate(1, function () {
                    circle05.setText('完成!');
                });
            });
            $('#cirBtn05-b').click(function () {
                circle05.animate(0.3);
            });
        
        });
    </script>
                            
  •                                   <div id="circle05"></div>
                                        

使用ProgressBar.Line方法创建半圆进度条。

  • <script src="https://src.axui.cn/src/plugins/progressbar/progressbar.min.js"></script>
    <script type='text/javascript'>
        $(window).load(function () {
    
        var line01 = new ProgressBar.Line('#line01',{
                step: function(state,line01) {
                    var value = Math.round(line01.value() * 100);
                    line01.setText(value+'%');
                }
            });
            line01.animate(0.6);
    
            $('#lineBtn01').click(function () {
                line01.animate(1);
            });
            $('#lineBtn01-b').click(function () {
                line01.animate(0.6);
            });
            //
            var line02 = new ProgressBar.Line('#line02', {
                from: { color: '#198cff' },
                to: { color: '#6619ff' },
                step: function(state, line02, attachment) {
                    line02.path.setAttribute('stroke', state.color);
                    var value = Math.round(line02.value() * 100);
                    line02.setText(value+'%');
                }
            });
            line02.animate(0.3);
    
            $('#lineBtn02').click(function () {
                line02.animate(1, function () {
                    line02.setText('完成!');
                    line02.setClass('ax-success');
                    line02.text.style.color='#6619ff';
                });
            });
            $('#lineBtn02-b').click(function () {
                line02.animate(0.3);
                line02.reClass();
            });
            //
            var line03 = new ProgressBar.Line('#line03', {
                step: function(state, line03, attachment) {
                    var value = Math.round(line03.value() * 100);
                    line03.setText(value+'%');
                }
            });
            line03.animate(0.6);
    
            $('#lineBtn03').click(function () {
                line03.animate(1, function () {
                    line03.setText('<svg class="ax-svg"><use xlink:href="#ax-icon-check"></use></svg>');
                    line03.setClass('ax-success');
                });
            });
            $('#lineBtn03-b').click(function () {
                line03.animate(0.6);
                line03.reClass();
            });
    
    
        });
    </script>
                            
  •                                  <div class="ax-row">
                                        <div class="ax-col ax-col-8">
                                            <div id="line01"></div>
                                            <div class="ax-break"></div>
                                            <div align="center">
                                                <a href="###" class="ax-btn" id="lineBtn01-b">后退</a>
                                                <a href="###" class="ax-btn" id="lineBtn01">前进</a></div>
                                        </div>
                                        <span class="ax-gutter-xxl"></span>
                                        <div class="ax-col ax-col-8">
                                            <div id="line02"></div>
                                            <div class="ax-break"></div>
                                            <div align="center">
                                                <a href="###" class="ax-btn" id="lineBtn02-b">后退</a>
                                                <a href="###" class="ax-btn" id="lineBtn02">前进</a></div>
                                        </div>
                                        <span class="ax-gutter-xxl"></span>
                                        <div class="ax-col ax-col-8">
                                            <div id="line03"></div>
                                            <div class="ax-break"></div>
                                            <div align="center">
                                                <a href="###" class="ax-btn" id="lineBtn03-b">后退</a>
                                                <a href="###" class="ax-btn" id="lineBtn03">前进</a></div>
                                        </div>
                                    </div>
                                        

使用ProgressBar.SemiCircle方法创建半圆进度条。

  • <script src="https://src.axui.cn/src/plugins/progressbar/progressbar.min.js"></script>
    <script type='text/javascript'>
        $(window).load(function () {
    
    $('#semiBtn01').click(function () {
                semi01.animate(1);
            });
            $('#semiBtn01-b').click(function () {
                semi01.animate(0.6);
            });
            //
            var semi02 = new ProgressBar.SemiCircle('#semi02', {
                from: { color: '#198cff' },
                to: { color: '#6619ff' },
                step: function(state, semi02, attachment) {
                    semi02.path.setAttribute('stroke', state.color);
                    var value = Math.round(semi02.value() * 100);
                    semi02.setText(value+'%');
                }
            });
            semi02.animate(0.3);
    
            $('#semiBtn02').click(function () {
                semi02.animate(1, function () {
                    semi02.setText('完成!');
                    semi02.setClass('ax-success');
                    semi02.text.style.color='#6619ff';
                });
            });
            $('#semiBtn02-b').click(function () {
                semi02.animate(0.3);
                semi02.reClass();
            });
            //
            var semi03 = new ProgressBar.SemiCircle('#semi03', {
                step: function(state, semi03, attachment) {
                    var value = Math.round(semi03.value() * 100);
                    semi03.setText(value+'%');
                }
            });
            semi03.animate(0.6);
    
            $('#semiBtn03').click(function () {
                semi03.animate(1, function () {
                    semi03.setText('');
                    semi03.setClass('ax-success');
                });
            });
            $('#semiBtn03-b').click(function () {
                semi03.animate(0.6);
                semi03.reClass();
            });
            //
            var semi04 = new ProgressBar.SemiCircle('#semi04', {
                step: function(state, semi04, attachment) {
                    var value = Math.round(semi04.value() * 100);
                    semi04.setText('
    加载进度
    '+value+'%
    '); } }); semi04.animate(0.3); $('#semiBtn04').click(function () { semi04.animate(1, function () { semi04.setText('完成!'); semi04.setClass('ax-success'); }); }); $('#semiBtn04-b').click(function () { semi04.animate(0.3); semi04.reClass(); }); }); </script>
  •                                 <div class="ax-row">
                                        <div class="ax-col ax-col-6">
                                            <div id="semi01"></div>
                                            <div class="ax-break"></div>
                                            <div align="center">
                                                <a href="###" class="ax-btn" id="semiBtn01-b">后退</a>
                                                <a href="###" class="ax-btn" id="semiBtn01">前进</a>
                                            </div>
                                        </div>
                                        <span class="ax-gutter-xxl"></span>
                                        <div class="ax-col ax-col-6">
                                            <div id="semi02"></div>
                                            <div class="ax-break"></div>
                                            <div align="center">
                                                <a href="###" class="ax-btn" id="semiBtn02-b">后退</a>
                                                <a href="###" class="ax-btn" id="semiBtn02">前进</a>
                                            </div>
                                        </div>
                                        <span class="ax-gutter-xxl"></span>
                                        <div class="ax-col ax-col-6">
                                            <div id="semi03"></div>
                                            <div class="ax-break"></div>
                                            <div align="center">
                                                <a href="###" class="ax-btn" id="semiBtn03-b">后退</a>
                                                <a href="###" class="ax-btn" id="semiBtn03">前进</a>
                                            </div>
                                        </div>
                                        <span class="ax-gutter-xxl"></span>
                                        <div class="ax-col ax-col-6">
                                            <div id="semi04"></div>
                                            <div class="ax-break"></div>
                                            <div align="center">
                                                <a href="###" class="ax-btn" id="semiBtn04-b">后退</a>
                                                <a href="###" class="ax-btn" id="semiBtn04">前进</a>
                                            </div>
                                        </div>
                                    </div>
                                        

借助setTimeout函数可以通过设定的时间完成进度。

  • <script src="https://src.axui.cn/src/plugins/progressbar/progressbar.min.js"></script>
    <script type='text/javascript'>
        $(window).load(function () {
    
          var timeout = new ProgressBar.Circle('#timeout',
                {
                    step: function(state, timeout, attachment) {
                        timeout.setClass('ax-rotate-360');
                    }
                });
    
            timeout.set(0.05);
            setTimeout(function() {
                timeout.animate(0.2);
            }, 3000);
            setTimeout(function() {
                timeout.animate(0.4);
            }, 4000);
            setTimeout(function() {
                timeout.animate(1);
            }, 5000);
    
            $('#timeoutBtn').click(function () {
                timeout.set(0.05);
                setTimeout(function() {
                    timeout.animate(0.2);
                }, 3000);
                setTimeout(function() {
                    timeout.animate(0.4);
                }, 4000);
                setTimeout(function() {
                    timeout.animate(1);
                }, 5000);
            });
    
        });
    </script>
                            
  •                                         <div id="timeout"></div>
                                            <div class="ax-break"></div>
                                            <div align="center">
                                                <a href="###" class="ax-btn" id="timeoutBtn">重置</a>
                                            </div>
                                        

结合使用validate插件实现密码强度进度,插件的使用方法见:插件验证强度

密码强度:
  • <script src="https://src.axui.cn/src/plugins/progressbar/progressbar.min.js"></script>
    <script src="https://src.axui.cn/src/plugins/jquery.validate/jquery.validate.min.js" type="text/javascript"></script>
    <script type='text/javascript'>
        $(window).load(function () {
    
             var strength = new ProgressBar.Circle('#strength');
            strength.set(0);
            strength.setText('弱');
    
            $("#vali").each(function(){
    
                //progress
                var weakColor = [255,132,0];
                var strongColor = [65, 163, 88];
                var defaultColor = [179,179, 179];
    
                function interpolateColor(rgbA, rgbB, value) {
                    var rDiff = rgbA[0] - rgbB[0];
                    var gDiff = rgbA[1] - rgbB[1];
                    var bDiff = rgbA[2] - rgbB[2];
                    value = 1 - value;
                    return [
                        rgbB[0] + rDiff * value,
                        rgbB[1] + gDiff * value,
                        rgbB[2] + bDiff * value
                    ];
                }
    
                function rgbArrayToString(rgb) {
                    return 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
                }
    
                function barColor(progress) {
                    return interpolateColor(weakColor, strongColor, progress);
                }
                //
    
                var chaVal = 0;
                var upVal = 0;
                var lowVal = 0;
                var numVal = 0;
                var speVal = 0;
                var upperCase= new RegExp('[A-Z]');
                var lowerCase= new RegExp('[a-z]');
                var numbers = new RegExp('[0-9]');
                var specialchars = new RegExp('[^a-zA-Z0-9]');
    
                var thisForm = $(this);
    
                $.validator.addMethod('passwordCheck', function (value, element) {
    
    
                    if (value.length >= 12) { chaVal = 1; } else { chaVal = 0; };
                    if (value.match(upperCase)) { upVal = 1} else { upVal = 0; };
                    if (value.match(lowerCase)) { lowVal = 1}  else { lowVal = 0; };
                    if (value.match(numbers)) { numVal = 1}  else { numVal = 0; };
                    if (value.match(specialchars)) { speVal = 1}  else { speVal = 0; };
    
                    var total = chaVal + upVal + lowVal + numVal + speVal;
    
                    //progress
                    var progress=total / 3;
                    var startColor = +strength.value().toFixed(2) === 0
                        ? rgbArrayToString(defaultColor)
                        : rgbArrayToString(barColor(strength.value()));
    
                    var endColor = progress === 0
                        ? rgbArrayToString(defaultColor)
                        : rgbArrayToString(barColor(progress));
                    var passwordGrades = {
                        0: '弱',
                        1: '弱',
                        2: '中',
                        3: '强',
                    };
                    //
                    strength.animate(progress,{
                        from: { color: startColor },
                        to: { color: endColor },
                        step: function(state, strength) {
                            strength.setText(passwordGrades[total]);
                            strength.text.style.color=state.color;
                            strength.path.setAttribute('stroke', state.color);
                        }
                    });
                    //
    
                    if (total == 0) {
                        $(element).data('error-msg',"<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 请输入密码</div>");
                        return false;
                    } else if (value.length < 6 ){
                        $(element).data('error-msg',"<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 密码长度不能小于 6 个字母</div>");
                        return false;
                    }else if (total <= 1 && value.length >= 6) {
                        return true;
                    } else if (total == 2 || total == 3 && value.length >= 6){
                        return true;
                    } else if(total >= 4  && value.length >= 6){
                        return true;
                    } else {
                        return true;
                    }
                    return true;
    
                }, function(params, element) {
                    return $(element).data('error-msg');
                });
    
                thisForm.validate({
                    errorPlacement: function(error, element) {
                        error.appendTo(element.parent().parent());
                    },
                    debug:true,
                    errorClass: "ax-valid",
                    rules: {
                        password: {
                            passwordCheck:true,
                        }
                    },
                    success: function(label) {
                        label.removeClass("ax-color-danger").html("<div class='ax-color-primary'><span class='ax-iconfont ax-icon-check-o-fill'></span> 通过验证<span></span></div>");
                    }
                });
    
    
    
            });
    
    
        });
    </script>
                            
  •                                 <form id="vali" method="get" action="">
                                        <div class="ax-form-group">
                                            <div class="ax-flex-row">
                                                <div class="ax-form-label">密码强度:</div>
                                                <div class="ax-form-con">
                                                    <div class="ax-form-input"><input name="password"  type="password"></div>
                                                </div>
                                                <div id="strength"></div>
                                            </div>
                                        </div>
                                    </form>