لقد كنت أعمل في مشروع تمريرة مؤخرًا. يتطلب إدخال كلمة مرور في وحدة التسجيل في الداخل قوة كلمة المرور (منخفضة ومتوسطة وعالية). اليوم سوف أشارككم نتائج العمل. الكود ليس معقدًا مثل البحث عبر الإنترنت ويمكنه تلبية الاحتياجات العامة.
رمز HTML كما يلي:
نسخة الكود كما يلي:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8"/>
<title> قوة كلمة المرور </title>
<type type = "text/css">
#PassStrength {الارتفاع: 6px ؛ العرض: 120px ؛ الحدود: 1px Solid #Ccc ؛ Padding: 2px ؛}
.strengthlv1 {الخلفية: أحمر ؛ الارتفاع: 6px ؛ العرض: 40px ؛}
.strengthlv2 {الخلفية: Orange ؛ الارتفاع: 6px ؛ العرض: 80px ؛}
.strengthlv3 {الخلفية: أخضر ؛ الارتفاع: 6px ؛ العرض: 120px ؛}
</style>
</head>
<body>
<type type = "password" name = "pass" id = "pass" maxLength = "16"/>
<viv>
<em> قوة كلمة المرور: </em>
<div id = "passstrength"> </viv>
</div>
</body>
</html>
<script type = "text/javaScript" src = "js/passwordstrength.js"> </script>
<script type = "text/javaScript">
عرض كلمة مرور جديدة ('pass' ، 'passstrength') ؛
</script>
رمز JS كما يلي:
نسخة الكود كما يلي:
وظيفة passwordStrength (passwordid ، strengeid) {
هذا.
var _ this = this ؛
document.getElementById (passwordid) .onkeyup = function () {
_This.CHECKSTRength (this.value) ؛
}
} ؛
passwordstrength.prototype.init = function (trughtid) {
var id = document.getElementById (strugentId) ؛
var div = document.createElement ('div') ؛
var strong = document.createElement ('Strong') ؛
this.ostrength = id.appendChild (div) ؛
this.ostrengthtxt = id.parentNode.appendChild (Strong) ؛
} ؛
passwordstrength.prototype.checksstrength = function (val) {
var alvtxt = ['' ، 'low' ، 'medium' ، 'High'] ؛
var lv = 0 ؛
if (val.match (/[[az]/g)) {lv ++ ؛}
if (val.match (/[0-9]/g)) {lv ++ ؛}
if (val.match (/(.
if (Val.Length <6) {lv = 0 ؛}
if (lv> 3) {lv = 3 ؛}
this.ostrength.className = 'proundlv' + lv ؛
this.ostrengthtxt.innerhtml = alvtxt [lv] ؛
} ؛
صورة التكاثر:
تعليمات للاستخدام:
1. المعلمة الأولى للكائن هي معرف مربع إدخال كلمة المرور ، والمعلمة الثانية هي معرف شريط قوة كلمة المرور.
2. يمكن لطريقة CheckStrength تخصيص قواعد قوة كلمة المرور.
3. تعرض قوة كلمة المرور منخفضة ومتوسطة وعالية تتوافق مع 3 أنماط CSS (قوة Lv1 ، StrengthLv2 ، القوة lv3).