判断密码强度-优化

之前我们写过，判断密码强度的这个小案例，链接：判断密码强度 

但之前写的时候，密码强度从较低到中等到较高，密码框的颜色变化是在js里操作的，现在我们来把颜色改变封装成四个主题，normal、strength-low、strength-medium、strength-high，当密码强度发生变化时，在js代码里，切换body的className即可。

Theme.css

.normal{
    --input-border: "#A6A6A6";
    --showHide: "#A6A6A6";
    --iconText: "#A6A6A6";
}
.strength-low{
    --input-border: "#FF6333";
    --showHide: "#FF6333";
    --iconText: "#FF6333";
}

.strength-medium{
    --input-border: "#cc8500";
    --showHide: "#cc8500";
    --iconText: "#cc8500";
}

.strength-high{
    --input-border: "#22C32A";
    --showHide: "#22C32A";
    --iconText: "#22C32A";
}

style.less

@import url('/Theme.css');
// 引入Theme文件，转为变量
@input-border: var(--input-border);
@showHide: var(--showHide);
@iconText: var(--iconText);

// 中间内容和之前代码相似，略

.input-box .iconfont{
  // 略
  color: @showHide;
  // 略
}

js：

// 判断密码强度，更改body的className即可，其余没有变化，略

if (val.match(alphabet) && val.match(numbers) && val.length >= 6) {
    document.body.className = '.strength-medium';
}

更多css小动画，JavaScript小案例点击我的主页查看。