Strength 密码强度
使用方法
整体用ax-strength样式包裹，默认宽强度是100%，使用弹性等分布局，对ax-col使用ax-active即可显示当前安全级别。基本格式如下：
<div class="ax-strength ax-row">
<div class="ax-col ax-lv1 ax-active"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv3"><div class="ax-bar"></div><span class="ax-title"></span></div>
</div>
默认是灰色，一级强度颜色是color-danger，二级强度颜色是color-ad，三级强度颜色是color-success，四级强度颜色是color-info，五级强度颜色是color-primary。
默认：
很弱：
弱：
中：
强：
很强：
<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">
<div class="ax-strength ax-row">
<div class="ax-col"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col"><div class="ax-bar"></div><span class="ax-title"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<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">
<div class="ax-strength ax-row">
<div class="ax-col ax-lv1 ax-active"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv3"><div class="ax-bar"></div><span class="ax-title"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<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">
<div class="ax-strength ax-row">
<div class="ax-col ax-lv1"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2 ax-active"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv3"><div class="ax-bar"></div><span class="ax-title"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<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">
<div class="ax-strength ax-row">
<div class="ax-col ax-lv1"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv3 ax-active"><div class="ax-bar"></div><span class="ax-title"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<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">
<div class="ax-strength ax-row">
<div class="ax-col ax-lv1"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv3"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv4 ax-active"><div class="ax-bar"></div><span class="ax-title"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<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">
<div class="ax-strength ax-row">
<div class="ax-col ax-lv1"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv3"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv4"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv5 ax-active"><div class="ax-bar"></div><span class="ax-title"></span></div>
</div>
</div>
</div>
</div>
</div>
任意使用强度级别
增删对应的列即可。
三级强度：
四级强度：
五级强度：
<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">
<div class="ax-strength ax-row">
<div class="ax-col ax-lv1"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2 ax-active"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv3"><div class="ax-bar"></div><span class="ax-title"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<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">
<div class="ax-strength ax-row">
<div class="ax-col ax-lv1"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2 ax-active"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv3"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv4"><div class="ax-bar"></div><span class="ax-title"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<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">
<div class="ax-strength ax-row">
<div class="ax-col ax-lv1"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2 ax-active"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv3"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv4"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv5"><div class="ax-bar"></div><span class="ax-title"></span></div>
</div>
</div>
</div>
</div>
</div>
使用相同颜色
对多个列使用相同的级别样式，比如ax-lv2。
三级强度：
四级强度：
五级强度：
<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">
<div class="ax-strength ax-row">
<div class="ax-col ax-lv2"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2 ax-active"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2"><div class="ax-bar"></div><span class="ax-title"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<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">
<div class="ax-strength ax-row">
<div class="ax-col ax-lv2"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2 ax-active"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2"><div class="ax-bar"></div><span class="ax-title"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<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">
<div class="ax-strength ax-row">
<div class="ax-col ax-lv2"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2 ax-active"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col"><div class="ax-bar"></div><span class="ax-title"></span></div>
</div>
</div>
</div>
</div>
</div>
自定义宽强度
对ax-strength写上style样式即可。
300px：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">300px：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-strength ax-row" style="width: 300px;">
<div class="ax-col ax-lv1"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2 ax-active"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv3"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv4"><div class="ax-bar"></div><span class="ax-title"></span></div>
</div>
</div>
</div>
</div>
</div>
配合input使用
有五种组合方式，见演示效果。
密码：
密码：
密码：
密码：
密码：
密码强！
<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="username" type="password"></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<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">
<div class="ax-strength ax-row">
<div class="ax-col ax-lv1"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2 ax-active"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv3"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv4"><div class="ax-bar"></div><span class="ax-title"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<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="username" type="password"></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<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">
<div class="ax-strength ax-row">
<div class="ax-col ax-lv2"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2 ax-active"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col"><div class="ax-bar"></div><span class="ax-title"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<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="username" type="password"></div>
</div>
<div class="ax-strength ax-row" style="width: 124px;">
<div class="ax-col ax-lv1 ax-active"><span class="ax-title"></span><div class="ax-bar"></div></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2"><span class="ax-title"></span><div class="ax-bar"></div></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv3"><span class="ax-title"></span><div class="ax-bar"></div></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv4"><span class="ax-title"></span><div class="ax-bar"></div></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<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="username" type="password"></div>
</div>
<div class="ax-strength ax-row" style="width: 28px;">
<div class="ax-col ax-lv1 ax-active"><span class="ax-title"></span><div class="ax-bar"></div></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<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="username" type="password"></div>
<div class="ax-strength ax-row">
<div class="ax-col ax-lv3"><div class="ax-bar"></div></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv3"><div class="ax-bar"></div></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv3 ax-active"><div class="ax-bar"></div></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col"><div class="ax-bar"></div></div>
</div>
<div class="ax-valid ax-color-success">密码强！</div>
</div>
</div>
</div>
不同尺寸
有五种组合方式，见演示效果。
ax-xs密码：
ax-sm密码：
密码：
<div class="ax-form-group ax-xs">
<div class="ax-flex-row">
<div class="ax-form-label">ax-xs密码：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" type="password" class="ax-xs"></div>
</div>
</div>
</div>
<div class="ax-break-xxs"></div>
<div class="ax-form-group ax-xs">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-strength ax-row ax-xs">
<div class="ax-col ax-lv1"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2 ax-active"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv3"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv4"><div class="ax-bar"></div><span class="ax-title"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group ax-sm">
<div class="ax-flex-row">
<div class="ax-form-label">ax-sm密码：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" type="password" class="ax-sm"></div>
</div>
</div>
</div>
<div class="ax-break-xxs"></div>
<div class="ax-form-group ax-sm">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-strength ax-row ax-sm">
<div class="ax-col ax-lv1"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2 ax-active"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv3"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv4"><div class="ax-bar"></div><span class="ax-title"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<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="username" type="password"></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<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">
<div class="ax-strength ax-row">
<div class="ax-col ax-lv1"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv2 ax-active"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv3"><div class="ax-bar"></div><span class="ax-title"></span></div>
<span class="ax-gutter-xxs"></span>
<div class="ax-col ax-lv4"><div class="ax-bar"></div><span class="ax-title"></span></div>
</div>
</div>
</div>
</div>
</div>
插件验证强度 PLUGIN
本框架使用了知名的表单验证插件：jquery.validate，使用的版本是v1.19.1，其基本用法见表单验证，配合其addMethod扩展用法，进行密码强度判断。请观摩演示效果。
-
<script src="src/plugins/jquery.validate/jquery.validate.min.js" type="text/javascript"></script> <script type='text/javascript'> $(document).ready(function () { 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]'); $.validator.addMethod('passwordCheck01', 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; if (total == 0) { $("#vali01").find(".ax-strength .ax-col").removeClass("ax-lv1 ax-lv2 ax-lv3 ax-lv4 ax-lv5 ax-active"); $(element).data('error-msg',"请输入密码"); return false; } else if (value.length < 6 ){ $("#vali01").find(".ax-strength .ax-col").removeClass("ax-active"); $("#vali01").find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv1 ax-active"); $(element).data('error-msg',"密码长度不能小于 6 个字母"); return false; }else if (total <= 1 && value.length >= 6) { $("#vali01").find(".ax-strength .ax-col").removeClass("ax-active"); $("#vali01").find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv1 ax-active"); return true; } else if (total == 2 && value.length >= 6){ $("#vali01").find(".ax-strength .ax-col").removeClass("ax-active"); $("#vali01").find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv1"); $("#vali01").find(".ax-strength .ax-col:nth-of-type(2)").addClass("ax-lv2 ax-active"); return true; } else if(total == 3 && value.length >= 6){ $("#vali01").find(".ax-strength .ax-col").removeClass("ax-active"); $("#vali01").find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv1"); $("#vali01").find(".ax-strength .ax-col:nth-of-type(2)").addClass("ax-lv2"); $("#vali01").find(".ax-strength .ax-col:nth-of-type(3)").addClass("ax-lv3 ax-active"); return true; } else if(total == 4 && value.length >= 6){ $("#vali01").find(".ax-strength .ax-col").removeClass("ax-active"); $("#vali01").find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv1"); $("#vali01").find(".ax-strength .ax-col:nth-of-type(2)").addClass("ax-lv2"); $("#vali01").find(".ax-strength .ax-col:nth-of-type(3)").addClass("ax-lv3"); $("#vali01").find(".ax-strength .ax-col:nth-of-type(4)").addClass("ax-lv4 ax-active"); return true; } else { $("#vali01").find(".ax-strength .ax-col").removeClass("ax-active"); $("#vali01").find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv1"); $("#vali01").find(".ax-strength .ax-col:nth-of-type(2)").addClass("ax-lv2"); $("#vali01").find(".ax-strength .ax-col:nth-of-type(3)").addClass("ax-lv3"); $("#vali01").find(".ax-strength .ax-col:nth-of-type(4)").addClass("ax-lv4"); $("#vali01").find(".ax-strength .ax-col:nth-of-type(5)").addClass("ax-lv5 ax-active"); return true; } return true; }, function(params, element) { return $(element).data('error-msg'); }); $("#vali01").validate({ errorPlacement: function(error, element) { error.insertAfter(element.parent().parent()); }, debug:true, errorClass: "ax-form-txt", rules: { password: { passwordCheck01:true, } }, success: function(label) { label.removeClass("ax-color-danger").html("通过验证"); } }); $.validator.addMethod('passwordCheck02', 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; if (total == 0) { $("#vali02").find(".ax-strength .ax-col").removeClass("ax-lv1 ax-lv2 ax-lv3 ax-lv4 ax-lv5 ax-active"); $(element).data('error-msg',"请输入密码"); return false; } else if (value.length < 6 ){ $("#vali02").find(".ax-strength .ax-col").removeClass("ax-active"); $("#vali02").find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv1 ax-active"); $(element).data('error-msg',"密码长度不能小于 6 个字母"); return false; }else if (total <= 1 && value.length >= 6) { $("#vali02").find(".ax-strength .ax-col").removeClass("ax-lv1 ax-lv2 ax-lv3 ax-lv4 ax-lv5 ax-active"); $("#vali02").find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv1 ax-active"); return true; } else if (total == 2 && value.length >= 6){ $("#vali02").find(".ax-strength .ax-col").removeClass("ax-lv1 ax-lv2 ax-lv3 ax-lv4 ax-lv5 ax-active"); $("#vali02").find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv2"); $("#vali02").find(".ax-strength .ax-col:nth-of-type(2)").addClass("ax-lv2 ax-active"); return true; } else if(total == 3 && value.length >= 6){ $("#vali02").find(".ax-strength .ax-col").removeClass("ax-lv1 ax-lv2 ax-lv3 ax-lv4 ax-lv5 ax-active"); $("#vali02").find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv3"); $("#vali02").find(".ax-strength .ax-col:nth-of-type(2)").addClass("ax-lv3"); $("#vali02").find(".ax-strength .ax-col:nth-of-type(3)").addClass("ax-lv3 ax-active"); return true; } else if(total == 4 && value.length >= 6){ $("#vali02").find(".ax-strength .ax-col").removeClass("ax-lv1 ax-lv2 ax-lv3 ax-lv4 ax-lv5 ax-active"); $("#vali02").find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv4"); $("#vali02").find(".ax-strength .ax-col:nth-of-type(2)").addClass("ax-lv4"); $("#vali02").find(".ax-strength .ax-col:nth-of-type(3)").addClass("ax-lv4"); $("#vali02").find(".ax-strength .ax-col:nth-of-type(4)").addClass("ax-lv4 ax-active"); return true; } else { $("#vali02").find(".ax-strength .ax-col").removeClass("ax-lv1 ax-lv2 ax-lv3 ax-lv4 ax-lv5 ax-active"); $("#vali02").find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv5"); $("#vali02").find(".ax-strength .ax-col:nth-of-type(2)").addClass("ax-lv5"); $("#vali02").find(".ax-strength .ax-col:nth-of-type(3)").addClass("ax-lv5"); $("#vali02").find(".ax-strength .ax-col:nth-of-type(4)").addClass("ax-lv5"); $("#vali02").find(".ax-strength .ax-col:nth-of-type(5)").addClass("ax-lv5 ax-active"); return true; } return true; }, function(params, element) { return $(element).data('error-msg'); }); $("#vali02").validate({ errorPlacement: function(error, element) { error.insertAfter(element.parent().parent()); }, debug:true, errorClass: "ax-form-txt", rules: { password: { passwordCheck02:true, } }, success: function(label) { label.removeClass("ax-color-danger").html("通过验证"); } }); $.validator.addMethod('passwordCheck03', 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; if (total == 0) { $("#vali03").find(".ax-strength .ax-col").removeClass("ax-lv1 ax-lv2 ax-lv3 ax-lv4 ax-lv5 ax-active"); $(element).data('error-msg',"请输入密码"); return false; } else if (value.length < 6 ){ $("#vali03").find(".ax-strength .ax-col").removeClass("ax-active"); $("#vali03").find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv1 ax-active"); $(element).data('error-msg',"密码长度不能小于 6 个字母"); return false; }else if (total <= 1 && value.length >= 6) { $("#vali03").find(".ax-strength .ax-col").removeClass("ax-active"); $("#vali03").find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv1 ax-active"); return true; } else if (total == 2 && value.length >= 6){ $("#vali03").find(".ax-strength .ax-col").removeClass("ax-active"); $("#vali03").find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv1"); $("#vali03").find(".ax-strength .ax-col:nth-of-type(2)").addClass("ax-lv2 ax-active"); return true; } else if(total == 3 && value.length >= 6){ $("#vali03").find(".ax-strength .ax-col").removeClass("ax-active"); $("#vali03").find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv1"); $("#vali03").find(".ax-strength .ax-col:nth-of-type(2)").addClass("ax-lv2"); $("#vali03").find(".ax-strength .ax-col:nth-of-type(3)").addClass("ax-lv3 ax-active"); return true; } else if(total == 4 && value.length >= 6){ $("#vali03").find(".ax-strength .ax-col").removeClass("ax-active"); $("#vali03").find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv1"); $("#vali03").find(".ax-strength .ax-col:nth-of-type(2)").addClass("ax-lv2"); $("#vali03").find(".ax-strength .ax-col:nth-of-type(3)").addClass("ax-lv3"); $("#vali03").find(".ax-strength .ax-col:nth-of-type(4)").addClass("ax-lv4 ax-active"); return true; } else { $("#vali03").find(".ax-strength .ax-col").removeClass("ax-active"); $("#vali03").find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv1"); $("#vali03").find(".ax-strength .ax-col:nth-of-type(2)").addClass("ax-lv2"); $("#vali03").find(".ax-strength .ax-col:nth-of-type(3)").addClass("ax-lv3"); $("#vali03").find(".ax-strength .ax-col:nth-of-type(4)").addClass("ax-lv4"); $("#vali03").find(".ax-strength .ax-col:nth-of-type(5)").addClass("ax-lv5 ax-active"); return true; } return true; }, function(params, element) { return $(element).data('error-msg'); }); $("#vali03").validate({ debug:true, errorClass: "ax-valid", rules: { password: { passwordCheck03:true, } }, success: function(label) { label.removeClass("ax-color-danger").html("通过验证"); } }); $("#vali04").each(function(){ var thisForm = $(this); $.validator.addMethod('passwordCheck04', 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; if (total == 0) { thisForm.find(".ax-strength").html(''); $(element).data('error-msg',"请输入密码"); return false; } else if (value.length < 6 ){ thisForm.find(".ax-strength").html(''); $(element).data('error-msg',"密码长度不能小于 6 个字母"); return false; }else if (total <= 1 && value.length >= 6) { thisForm.find(".ax-strength").html(''); return true; } else if (total == 2 && value.length >= 6){ thisForm.find(".ax-strength").html(''); return true; } else if(total == 3 && value.length >= 6){ thisForm.find(".ax-strength").html(''); return true; } else if(total == 4 && value.length >= 6){ thisForm.find(".ax-strength").html(''); return true; } else { thisForm.find(".ax-strength").html(''); return true; } return true; }, function(params, element) { return $(element).data('error-msg'); }); thisForm.validate({ debug:true, errorClass: "ax-valid", rules: { password: { passwordCheck04:true, } }, success: function(label) { label.removeClass("ax-color-danger").html("通过验证"); } }); }); $("#vali05").each(function(){ var thisForm = $(this); $.validator.addMethod('passwordCheck05', 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; if (total == 0) { thisForm.find(".ax-strength .ax-col").removeClass("ax-lv1 ax-lv2 ax-lv3 ax-lv4 ax-lv5 ax-active"); $(element).data('error-msg',"请输入密码"); return false; } else if (value.length < 6 ){ thisForm.find(".ax-strength .ax-col").removeClass("ax-active"); thisForm.find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv1 ax-active"); $(element).data('error-msg',"密码长度不能小于 6 个字母"); return false; }else if (total <= 1 && value.length >= 6) { thisForm.find(".ax-strength .ax-col").removeClass("ax-lv1 ax-lv2 ax-lv3 ax-lv4 ax-lv5 ax-active"); thisForm.find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv1 ax-active"); return true; } else if (total == 2 && value.length >= 6){ thisForm.find(".ax-strength .ax-col").removeClass("ax-lv1 ax-lv2 ax-lv3 ax-lv4 ax-lv5 ax-active"); thisForm.find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv2"); thisForm.find(".ax-strength .ax-col:nth-of-type(2)").addClass("ax-lv2 ax-active"); return true; } else if(total == 3 && value.length >= 6){ thisForm.find(".ax-strength .ax-col").removeClass("ax-lv1 ax-lv2 ax-lv3 ax-lv4 ax-lv5 ax-active"); thisForm.find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv3"); thisForm.find(".ax-strength .ax-col:nth-of-type(2)").addClass("ax-lv3"); thisForm.find(".ax-strength .ax-col:nth-of-type(3)").addClass("ax-lv3 ax-active"); return true; } else if(total == 4 && value.length >= 6){ thisForm.find(".ax-strength .ax-col").removeClass("ax-lv1 ax-lv2 ax-lv3 ax-lv4 ax-lv5 ax-active"); thisForm.find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv4"); thisForm.find(".ax-strength .ax-col:nth-of-type(2)").addClass("ax-lv4"); thisForm.find(".ax-strength .ax-col:nth-of-type(3)").addClass("ax-lv4"); thisForm.find(".ax-strength .ax-col:nth-of-type(4)").addClass("ax-lv4 ax-active"); return true; } else { thisForm.find(".ax-strength .ax-col").removeClass("ax-lv1 ax-lv2 ax-lv3 ax-lv4 ax-lv5 ax-active"); thisForm.find(".ax-strength .ax-col:nth-of-type(1)").addClass("ax-lv5"); thisForm.find(".ax-strength .ax-col:nth-of-type(2)").addClass("ax-lv5"); thisForm.find(".ax-strength .ax-col:nth-of-type(3)").addClass("ax-lv5"); thisForm.find(".ax-strength .ax-col:nth-of-type(4)").addClass("ax-lv5"); thisForm.find(".ax-strength .ax-col:nth-of-type(5)").addClass("ax-lv5 ax-active"); 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: { passwordCheck05:true, } }, success: function(label) { label.removeClass("ax-color-danger").html("通过验证"); } }); }); $("#vali06").each(function(){ var thisForm = $(this); $.validator.addMethod('passwordCheck06', 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; if (total == 0) { thisForm.find(".ax-strength-svg").removeClass("ax-weak ax-medium ax-strong"); $(element).data('error-msg',"请输入密码"); return false; } else if (value.length < 6 ){ thisForm.find(".ax-strength-svg").removeClass("ax-medium ax-strong"); thisForm.find(".ax-strength-svg").addClass("ax-weak"); $(element).data('error-msg',"密码长度不能小于 6 个字母"); return false; }else if (total <= 1 && value.length >= 6) { thisForm.find(".ax-strength-svg").removeClass("ax-medium ax-strong"); thisForm.find(".ax-strength-svg").addClass("ax-weak"); return true; } else if (total == 2 || total == 3 && value.length >= 6){ thisForm.find(".ax-strength-svg").removeClass("ax-weak ax-strong"); thisForm.find(".ax-strength-svg").addClass("ax-medium"); return true; } else if(total >= 4 && value.length >= 6){ thisForm.find(".ax-strength-svg").removeClass("ax-weak ax-medium"); thisForm.find(".ax-strength-svg").addClass("ax-strong"); return true; } else { thisForm.find(".ax-strength-svg").removeClass("ax-weak ax-medium"); thisForm.find(".ax-strength-svg").addClass("ax-strong"); 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: { passwordCheck06:true, } }, success: function(label) { label.removeClass("ax-color-danger").html("通过验证"); } }); }); }); </script> -
<form id="vali01" method="get" action=""> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">风格1：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="password" type="password"></div> </div> </div> </div> <div class="ax-break-md"></div> <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"> <div class="ax-strength ax-row"> <div class="ax-col"><div class="ax-bar"></div><span class="ax-title"></span></div> <span class="ax-gutter-xxs"></span> <div class="ax-col"><div class="ax-bar"></div><span class="ax-title"></span></div> <span class="ax-gutter-xxs"></span> <div class="ax-col"><div class="ax-bar"></div><span class="ax-title"></span></div> <span class="ax-gutter-xxs"></span> <div class="ax-col"><div class="ax-bar"></div><span class="ax-title"></span></div> <span class="ax-gutter-xxs"></span> <div class="ax-col"><div class="ax-bar"></div><span class="ax-title"></span></div> </div> </div> </div> </div> </div> </form> <div class="ax-break-md"></div> <form id="vali02" method="get" action=""> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">风格2：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="password" type="password"></div> </div> </div> </div> <div class="ax-break-md"></div> <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"> <div class="ax-strength ax-row"> <div class="ax-col"><div class="ax-bar"></div><span class="ax-title"></span></div> <span class="ax-gutter-xxs"></span> <div class="ax-col"><div class="ax-bar"></div><span class="ax-title"></span></div> <span class="ax-gutter-xxs"></span> <div class="ax-col"><div class="ax-bar"></div><span class="ax-title"></span></div> <span class="ax-gutter-xxs"></span> <div class="ax-col"><div class="ax-bar"></div><span class="ax-title"></span></div> <span class="ax-gutter-xxs"></span> <div class="ax-col"><div class="ax-bar"></div><span class="ax-title"></span></div> </div> </div> </div> </div> </div> </form> <div class="ax-break-md"></div> <form id="vali03" method="get" action=""> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">风格3：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="password" type="password"></div> </div> <div class="ax-strength ax-row" style="width: 124px;"> <div class="ax-col"><span class="ax-title"></span><div class="ax-bar"></div></div> <span class="ax-gutter-xxs"></span> <div class="ax-col"><span class="ax-title"></span><div class="ax-bar"></div></div> <span class="ax-gutter-xxs"></span> <div class="ax-col"><span class="ax-title"></span><div class="ax-bar"></div></div> <span class="ax-gutter-xxs"></span> <div class="ax-col"><span class="ax-title"></span><div class="ax-bar"></div></div> <span class="ax-gutter-xxs"></span> <div class="ax-col"><span class="ax-title"></span><div class="ax-bar"></div></div> </div> </div> </div> </form> <div class="ax-break-md"></div> <form id="vali04" method="get" action=""> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">风格4：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="password" type="password"></div> </div> <div class="ax-strength ax-row" style="width: 28px;"> </div> </div> </div> </form> <div class="ax-break-md"></div> <form id="vali05" method="get" action=""> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">风格5：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="password" type="password"></div> <div class="ax-strength ax-row"> <div class="ax-col"><div class="ax-bar"></div></div> <span class="ax-gutter-xxs"></span> <div class="ax-col"><div class="ax-bar"></div></div> <span class="ax-gutter-xxs"></span> <div class="ax-col"><div class="ax-bar"></div></div> <span class="ax-gutter-xxs"></span> <div class="ax-col"><div class="ax-bar"></div></div> <span class="ax-gutter-xxs"></span> <div class="ax-col"><div class="ax-bar"></div></div> </div> </div> </div> </div> </form> <div class="ax-break-md"></div> <form id="vali06" method="get" action=""> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">风格6：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="password" type="password"></div> </div> <div class="ax-strength ax-strength-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.6986 86.6986"><path class="svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path></svg></div> </div> </div> </form>
svg强度验证效果也可以使用progress进度条插件实现，详见：Progress 进度条。