สิ่งนี้ทำให้ตรวจสอบความปลอดภัยของรหัสผ่านแบบเรียลไทม์บนเบราว์เซอร์ และให้ข้อเสนอแนะแก่ผู้ใช้เกี่ยวกับระดับความปลอดภัยของรหัสผ่านของลูกค้า ก่อนที่จะโพสต์สมัครสมาชิก ดังนี้
1. ตรวจสอบจำนวนอักขระ (More characters) – หากความยาวน้อยกว่า 8 อักขระ
2. มีความปลอดภัยน้อย (Weak ) – หากความยาวน้อยกว่า 10 อักขระและไม่มีการผสมผสานระหว่างสัญลักษณ์ ตัวพิมพ์ใหญ่ ข้อความ
3. มีความปลอดภัยกลาง (Medium) – หากความยาวตั้งแต่ 10 อักขระขึ้นไป และมีสัญลักษณ์ ตัวพิมพ์ใหญ่ ข้อความผสมกัน
4. มีความปลอดภัยสูง (Strong) – หากมีความยาว 14 อักขระขึ้นไปและมีสัญลักษณ์ ตัวพิมพ์ใหญ่ และข้อความผสมกัน
นี้คือโค้ดทั้งหมดที่ใช้....
Javascript Code
<script language="javascript">
function passwordChanged() {
var strength = document.getElementById('strength');
var strongRegex = new RegExp("^(?=.{14,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])
(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{10,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])
(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{8,}).*", "g");
var pwd = document.getElementById("password");
if (pwd.value.length == 0) {
strength.innerHTML = 'Type Password';
} else if (false == enoughRegex.test(pwd.value)) {
strength.innerHTML = '<span style="color:red">More Characters!</span>';
} else if (strongRegex.test(pwd.value)) {
strength.innerHTML = '<span style="color:green">Strong!</span>';
} else if (mediumRegex.test(pwd.value)) {
strength.innerHTML = '<span style="color:orange">Medium!</span>';
} else {
strength.innerHTML = '<span style="color:red">Weak!</span>';
}
}
</script>
HTML Code
<input style="width: 100%" name="password" id="password" type="text" size="15"
maxlength="100" onkeyup="return passwordChanged();" />
<span id="strength">Type Password</span>