下载包
yarn add zxcvbn
或
npm i zxcvbn -S
在页面引入并使用
import zxcvbn from 'zxcvbn';
zxcvbn是个函数,入参是字符串也就是用于检测的密码。
zxcvbn('123456abc!!!')
函数返回一个对象:
- 其中与密码强度相关的有guesses、guesses_log10、score。
- guesses数据比较大不好判断。
- score得分只有0~4整数范围没有小数,变化不够丰富,但是在特定需求的情况下也可以使用。
- 推荐使用
guesses_log10
,可以将密码强度的弱、中、强
分为0 ~ 4
、4 ~ 8
、8~12及以上
。
结合h5的meter标签
以react中为例:
import React, { Component } from 'react';
import zxcvbn from 'zxcvbn';
export default class index extends Component {
state = {
value: 0,
msg: '',
};
render() {
return (
<div>
<div>密码:</div>
<input
value={this.state.msg}
onChange={e => {
this.setState({
msg: e.target.value,
value: zxcvbn(e.target.value).guesses_log10,
});
}}
></input>
<div>强度:</div>
<meter min="0" max="12" low="4" high="8" optimum="10" value={this.state.value}></meter>
</div>
);
}
}