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>
默认是灰色，一级强度颜色是var(--color-error)，二级强度颜色是var(color-question)，三级强度颜色是var(color-success)，四级强度颜色是var(color-info)，五级强度颜色是var(color-primary-aj)。
默认：
很弱：
弱：
中：
强：
很强：
<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: 2.8rem;">
<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 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>
<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>
插件验证强度
使用axValid插件，并借助插件自带的strong参数来判断输入字段值的强度。strong的值范围是0~6(英文小写，英文大写，数字，特殊字符，中文，达到字数要求)。axValid详细可点击这里查看。
-
<form> <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" id="str01"></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> <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" id="str02"></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> <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" id="str03"></div> </div> <div class="ax-strength ax-row" style="width: 15.6rem;"> <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> <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" id="str04"></div> </div> <div class="ax-strength ax-row" style="width: 2.8rem;"> </div> </div> </div> </form> <div class="ax-break-md"></div> <form> <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" id="str05"> <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 id="strMsg"></div> </div> </div> </div> </div> </form> <div class="ax-break-md"></div> <form> <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" id="str06"></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> <div class="ax-break-md"></div> -
//风格1：下方多色强度 let input01 = document.querySelector('#str01'), bar01 = input01.closest('form').querySelector('.ax-strength').querySelectorAll('.ax-col'), ins01 = new axValid('#str01', { type: 'strong', format: 'a191#4,', mode: 'note', }); ins01.on('trigger', function (state, text,strong) {console.log(strong, state, text) bar01.forEach((elem, index) => { //index值范围：0~4；strong值范围：1~6 if (index < strong) { elem.setAttribute('class', 'ax-col ax-lv' + (index + 1)); } if (index + 1 == strong) { bar01.forEach(i => { i.classList.remove('ax-active'); }); elem.classList.add('ax-active'); } }); }); //风格2：下方单色强度 let input02 = document.querySelector('#str02'), bar02 = input02.closest('form').querySelector('.ax-strength').querySelectorAll('.ax-col'), ins02 = new axValid('#str02', { type: 'strong', format: 'a191#4,', mode: 'note', }); ins02.on('trigger', function (state, text,strong) { bar02.forEach((elem, index) => { //index值范围：0~4；strong值范围：1~6 if (index < strong) { if (strong < 6) { elem.setAttribute('class', 'ax-col ax-lv' + strong); } else { elem.setAttribute('class', 'ax-col ax-lv5'); } } if (index + 1 == strong) { bar02.forEach(i => { i.classList.remove('ax-active'); }); elem.classList.add('ax-active'); } }); }); //风格3：右方多色强度 let input03 = document.querySelector('#str03'), bar03 = input03.closest('form').querySelector('.ax-strength').querySelectorAll('.ax-col'), ins03 = new axValid('#str03', { type: 'strong', format: 'a191#4,', mode: 'newLine', }); ins03.on('trigger', function (state, text,strong) { bar03.forEach((elem, index) => { //index值范围：0~4；strong值范围：1~6 if (index < strong) { elem.setAttribute('class', 'ax-col ax-lv' + (index + 1)); } if (index + 1 == strong) { bar03.forEach(i => { i.classList.remove('ax-active'); }); elem.classList.add('ax-active'); } }); }); //风格4：右方单块强度 let input04 = document.querySelector('#str04'), bar04 = input04.closest('form').querySelector('.ax-strength'), ins04 = new axValid('#str04', { type: 'strong', format: 'a191#4,', mode: 'newLine', }); ins04.on('trigger', function (state, text,strong) { if (strong > 0) { bar04.innerHTML = ''; if (strong > 5) { bar04.querySelector('.ax-col').setAttribute('class', 'ax-col ax-active ax-lv5'); } else { bar04.querySelector('.ax-col').setAttribute('class', 'ax-col ax-active ax-lv' + strong); } } else { bar04.innerHTML = ''; } }); //风格5：下方多色强度（Input内） let input05 = document.querySelector('#str05'), bar05 = input05.closest('form').querySelector('.ax-strength').querySelectorAll('.ax-col'), ins05 = new axValid('#str05', { type: 'strong', format: 'a191#4,', mode: '#strMsg', }); ins05.on('trigger', function (state, text,strong) { bar05.forEach((elem, index) => { //index值范围：0~4；strong值范围：1~6 if (index < strong) { elem.setAttribute('class', 'ax-col ax-lv' + (index + 1)); } if (index + 1 == strong) { bar05.forEach(i => { i.classList.remove('ax-active'); }); elem.classList.add('ax-active'); } }); }); //风格6：右方SVG动画强度 let input06 = document.querySelector('#str06'), bar06 = input06.closest('form').querySelector('.ax-strength'), ins06 = new axValid('#str06', { type: 'strong', format: 'a191#4,', mode: 'newLine', }); ins06.on('trigger', function (state, text,strong) { if (strong == 1) { bar06.setAttribute('class', 'ax-strength ax-strength-svg ax-weak'); } else if (strong == 2) { bar06.setAttribute('class', 'ax-strength ax-strength-svg ax-medium'); } else if (strong >= 3) { bar06.setAttribute('class', 'ax-strength ax-strength-svg ax-strong'); } });
svg强度验证效果也可以使用progress进度条插件实现，详见：Progress 进度条。