JS验证网站账户密码是否符合要求

网站中账户添加重置密码功能。
重置密码窗体必须具有验证脚本，以确保用户创建强密码。

验证密码包含：

• 大写字母。
• 字母、数字和符号的组合。
• 大于特定数字的长度。
• 另一种类型的重置密码验证是重写密码，以确保用户知道他将使用的密码。
• 验证密码字段是否相同。

我已经使用HTML5、CSS3和jQuery创建了一个简单的重置密码表单。

• 该表单包含上述所有验证。
• 这个是个简单的项目演示，可以免费下载。
• 使用jQuery重置密码表单验证。
• 在下面有下载和查看演示案例。

HTML代码

<div class="wrapper">
 <h1>Reset Password</h1> <form>
 <input type="password" name="password" class="password" placeholder="Password"> 
<input type="password" name="retype_password" class="retype_password" placeholder="Retype Password">
 <input type="submit" class="change_password" value="Change" disabled> </form> 
<div id="password_details"> <h1>Password must meet the following requirements:</h1>
 <ul> <li id="letter" class="invalid">At least <strong>one letter</strong></li>
 <li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
 <li id="number" class="invalid">At least <strong>one number</strong></li>
 <li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
 <li id="match" class="invalid">Password fields must match</li> </ul> 
</div> 
</div>

 

Css代码

body{margin: 0;background-color: #66BB6A;font-family: arial, sans-serif;}
.wrapper{position:relative;max-width: 300px;width: 100%; margin: 200px auto; padding: 0;background-color: #fff;border-radius: 5px;}
.wrapper h1{text-align: center;background-color: #009688;margin: 0;color: #fff; border-top-right-radius: 5px; border-top-left-radius: 5px;font-size: 18px;padding: 15px 0;}
.wrapper input{padding: 10px;width: 100%; margin-bottom: 15px;font-size: 12px;border: 1px solid #dedede;}
.change_password{background-color: #66bb6a;color: #fff;border: none !important; cursor: pointer;}
.change_password:disabled{background-color: #dedede; color:#555;}
.wrapper form{padding: 15px;}
#password_details{display:none; position: absolute; left:calc(100% + 20px); border-radius: 5px; top:50px; min-width: 250px; background-color:#fff;padding: 10px;font-size: 12px;}
#password_details  h1{margin: 0;padding: 5px;font-size: 14px;color: #555;}
#password_details  ul{margin: 0;padding: 0 30px;}
#password_details ul li{padding:5px 0;}
#password_details:before{content: "\25C0";position: absolute;top: 20px;left: -10px;font-size: 14px; line-height: 14px;color: #fff;text-shadow: none;display: block;}
.invalid{color:#fc2e2e}
.valid{color:#12d600}

 

Js代码

$(document).ready(function(){
$('input[type=password]').keyup(function() {
validate();
});
function validate(){
$('#password_details').show();
var password = $('.password').val();
var retype_password = $('.retype_password').val();
//validate the length
if ( password.length < 8 ) {
$('#length').removeClass('valid').addClass('invalid');
$('.change_password').removeAttr('disabled');
} else {
$('#length').removeClass('invalid').addClass('valid');
$('.change_password').attr('disabled', 'disabled');
}
if ( password.match(/[A-z]/) ) {
$('#letter').removeClass('invalid').addClass('valid');
$('.change_password').removeAttr('disabled');
} else {
$('#letter').removeClass('valid').addClass('invalid');
$('.change_password').attr('disabled', 'disabled');
}
//validate capital letter
if ( password.match(/[A-Z]/) ) {
$('#capital').removeClass('invalid').addClass('valid');
$('.change_password').removeAttr('disabled');
} else {
$('#capital').removeClass('valid').addClass('invalid');
$('.change_password').attr('disabled', 'disabled');
}
//validate number
if ( password.match(/\d/) ) {
$('#number').removeClass('invalid').addClass('valid');
$('.change_password').removeAttr('disabled');
} else {
$('#number').removeClass('valid').addClass('invalid');
$('.change_password').attr('disabled', 'disabled');
}
//validate retype password
if(password == retype_password && password.length > 8 && password.match(/[A-z]/) && password.match(/[A-Z]/) && password.match(/\d/)){
$('#match').removeClass('invalid').addClass('valid');
$('.change_password').removeAttr('disabled');
}else{
$('#match').removeClass('valid').addClass('invalid');
$('.change_password').attr('disabled', 'disabled');
}
}
});

 

提取码: vhgn

原文链接：https://www.itaoda.cn/blog/335.html，转载请注明出处。