jqueryを使ってパスワード強さをチェックする方法
4085 ワード
この投稿では、JQueryを使用してパスワードの強度をチェックする方法を示します.ここでは、パスワードの強さがmin文字の要件を満たすかどうかをチェックします.
JavaScriptとJQueryパスワードの強さを使用してパスワードのサイズを確認する方法の例をあげる.パスワードは何度も認証の最も重要な部分です、あなたが有効なパスワードまたはパスワードを入力するようにエラーメッセージを見ることができる少なくとも6文字等であるので、ここで、我々はjQueryを使用しているパスワードをチェックします.
読んでくれてありがとう!
JavaScriptとJQueryパスワードの強さを使用してパスワードのサイズを確認する方法の例をあげる.パスワードは何度も認証の最も重要な部分です、あなたが有効なパスワードまたはパスワードを入力するようにエラーメッセージを見ることができる少なくとも6文字等であるので、ここで、我々はjQueryを使用しているパスワードをチェックします.
<html>
<body>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>How to check password strength in jQuery - websolutionstuff.com</title>
<style>
#password-strength-status {
padding: 5px 10px;
color: #FFFFFF;
border-radius: 4px;
margin-top: 5px;
}
.medium-password {
background-color: #b7d60a;
border: #BBB418 1px solid;
}
.weak-password {
background-color: #ce1d14;
border: #AA4502 1px solid;
}
.strong-password {
background-color: #12CC1A;
border: #0FA015 1px solid;
}
</style>
</head>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2>How to check password strength in jQuery - websolutionstuff.com</h2><br/>
<label>Password:</label>
<input type="password" name="password" id="password" class="form-control"/>
<div id="password-strength-status"></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
$("#password").on('keyup', function(){
var number = /([0-9])/;
var alphabets = /([a-zA-Z])/;
var special_characters = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<])/;
if ($('#password').val().length < 6) {
$('#password-strength-status').removeClass();
$('#password-strength-status').addClass('weak-password');
$('#password-strength-status').html("Weak (should be atleast 6 characters.)");
} else {
if ($('#password').val().match(number) && $('#password').val().match(alphabets) && $('#password').val().match(special_characters)) {
$('#password-strength-status').removeClass();
$('#password-strength-status').addClass('strong-password');
$('#password-strength-status').html("Strong");
} else {
$('#password-strength-status').removeClass();
$('#password-strength-status').addClass('medium-password');
$('#password-strength-status').html("Medium (should include alphabets, numbers and special characters or some combination.)");
}
}
});
});
</script>
Read More : How To Validate Password And Confirm Password Using JQuery
読んでくれてありがとう!
Reference
この問題について(jqueryを使ってパスワード強さをチェックする方法), 我々は、より多くの情報をここで見つけました https://dev.to/websolutionstuff/how-to-check-password-strength-using-jquery-3gbeテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol