javascript实现前端实现前端input密码输入强度验证密码输入强度验证
本文实例为大家分享了js实现密码输入强度验证的具体代码，供大家参考，具体内容如下
需求：需求：
1.需要对用户输入的密码进行验证，验证的级别分为强中弱，如果输入的密码强度少于6时，则不会验证，只有密码强度在6-
20时才会进行验证。
相关的正则
//密码为八位及以上并且字母数字特殊字符三项都包括
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$", "g");
//密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
2.密码的显示与隐藏，点击小眼可以对密码进行显示或者隐藏。
具体代码
html部分：
<div class="wrapper">
<div class="input_box">
<input type="password" name="" placeholder="请输入密码" oninput="passValidate(this)" id="inputPwd" value="">
<div class="eye_icon"></div>
</div>
<p>请至少使用字母、数字、符号两种类型组合的密码，长度为6~20位。</p>
<ul class="pwdStrength">
<li class="weak"></li>
<li class="middle"></li>
<li class="strong"></li>
<li class="result"></li>
</ul>
</div>
css部分：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
width: 500px;
height: 200px;
border: 1px solid #eee;
margin: 100px auto;
display: flex;
align-items: center;
flex-direction: column;
资源评论
