ฉันได้ทำงานในโครงการ Pass เมื่อเร็ว ๆ นี้ การป้อนรหัสผ่านในโมดูลการลงทะเบียนภายในต้องใช้ความแข็งแรงของรหัสผ่าน (ต่ำปานกลางและสูง) วันนี้ฉันจะแบ่งปันผลการทำงานกับคุณ รหัสไม่ซับซ้อนเท่ากับการค้นหาทางออนไลน์และสามารถตอบสนองความต้องการทั่วไป
รหัส HTML มีดังนี้:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8"/>
<title> ความแข็งแกร่งของรหัสผ่าน </title>
<style type = "text/css">
#PassStrength {ความสูง: 6px; Width: 120px; Border: 1px Solid #CCC; Padding: 2px;}
.StrengthLv1 {พื้นหลัง: สีแดง; ความสูง: 6px; ความกว้าง: 40px;}
.StrengthLv2 {พื้นหลัง: สีส้ม; ความสูง: 6px; ความกว้าง: 80px;}
.StrengthLv3 {พื้นหลัง: สีเขียว; ความสูง: 6px; ความกว้าง: 120px;}
</style>
</head>
<body>
<อินพุต type = "รหัสผ่าน" name = "pass" id = "pass" maxlength = "16"/>>>>
<div>
<em> ความแข็งแกร่งของรหัสผ่าน: </em>
<div id = "passstrength"> </div>
</div>
</body>
</html>
<script type = "text/javascript" src = "js/passwordstrength.js"> </script>
<script type = "text/javascript">
New PasswordStrength ('Pass', 'Passstrength');
</script>
รหัส JS มีดังนี้:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นรหัสผ่าน strength (passwordId, strengthid) {
this.init (StrengthId);
var _this = this;
document.getElementById (passwordId) .onkeyup = function () {
_this.checkstrength (this.value);
-
-
PasswordStrength.prototype.init = function (StrengthId) {
var id = document.getElementById (StrengthId);
var div = document.createElement ('div');
var strong = document.createElement ('strong');
this.ostrength = id.appendchild (div);
this.ostrengthTxt = id.parentNode.AppendChild (แข็งแกร่ง);
-
PasswordStrength.prototype.CheckStrength = function (val) {
var alvtxt = ['', 'ต่ำ', 'กลาง', 'สูง'];
var lv = 0;
if (val.match (/[az]/g)) {lv ++;}
if (val.match (/[0-9]/g)) {lv ++;}
if (val.match (/(. yould^ a-z0-9])/g)) {lv ++;}
if (val.length <6) {lv = 0;}
if (lv> 3) {lv = 3;}
this.ostrength.className = 'StrengthLv' + LV;
this.ostrengthtxt.innerhtml = alvtxt [lv];
-
ภาพการทำซ้ำ:
คำแนะนำสำหรับการใช้งาน:
1. พารามิเตอร์แรกของวัตถุคือ ID ของกล่องป้อนรหัสผ่านและพารามิเตอร์ที่สองคือ ID ของแถบความแข็งแรงของรหัสผ่าน
2. วิธีการตรวจสอบความยาวสามารถปรับแต่งกฎความแข็งแรงของรหัสผ่าน
3. ความแข็งแรงของรหัสผ่านแสดงต่ำปานกลางและสูงสอดคล้องกับ 3 รูปแบบ CSS (StrengthLV1, StrengthLV2, StrengthLV3)