javascript,html,正則表達式，郵箱密碼驗證

時間 2019-11-29

標籤 javascript html 正則表達式郵箱密碼驗證欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>郵箱密碼驗證</title>

<style media="screen">

margin: 0px;

padding: 0px;

}

#wrap {

width: 255px;

height: 17px;

display: none;

position: absolute;

top: 60px;

left: 180px;

}

#wrap>p {

width: 60px;

height: 15px;

line-height: 15px;

text-align: center;

display: inline-block;

font-size: 0.8em;

}

form {

margin: 20px;

}

span {

font-size: 0.8em;

}

　　　　#warning {
　　　　　　position: absolute;
　　　　　　top: 62px;
　　　　　　left: 50px;
　　　　}javascript

　　　　#falseAlarm {
　　　　　　position: absolute;
　　　　　　top: 62px;
　　　　　　left: 50px;
　　　　　　display:none;
　　　　　　color:red;
　　　　}html

</style>java

</head>

<body>

<form class="" action="index.html" method="post">

<span style="color:red">*</span><span>密碼</span>

<input id="passWord" style="width: 300px;height:30px;border:1px solid lightgrey;"type="password" name="name" value="">

</form>

<span id="warning">6~16個字符，區分大小寫</span>

<span id="falseAlarm">密碼長度應爲6~16個字符</span>

<div id="wrap">

<p id="weak">弱</p>

<p id="medium">中等</p>

<p id="strong">強</p>

</div>

</body>

<script type="text/javascript">

定義密碼的規則

一、密碼長度位6～16位有效字符

二、若是密碼是純數字、純字母大寫或者小寫，則密碼強大爲弱

三、密碼中包含數字和字母的組合，則密碼強度爲中等

四、密碼中包含字母、大小寫字母。下劃線的組合密碼強度爲強

var passWord = document.getElementById("passWord");

var wrap = document.getElementById('wrap');

var weak = document.getElementById('weak');

var medium = document.getElementById('medium');

var strong = document.getElementById('strong');

var warning = document.getElementById('warning');

var falseAlarm = document.getElementById('falseAlarm');

//添加鍵盤監聽事件

function addKeyEvent(event){

event = event | window.event;

var passcord = passWord.value;

//密碼強度爲弱正則表達式

var low = /(^\d{6,16}$)|(^[a-z]{6,16}$)|(^[A-Z]{6,16}$)|(^_{6,16}$)/g;

//密碼強度爲中等正則表達式

var middle = /(^[a-zA-Z]{6,16}$)|(^[a-z\d]{6,16}$)|(^[A-Z\d]{6,16}$)|(^[A-Z_]{6,16}$)|(^[_\d]{6,16}$)|(^[a-z_]{6,16}$)|(^[A-Z\d]{6,16}$)/g;

//密碼強度爲強正則表達式

var high = /(^[a-zA-Z\d]{6,16}$)|(^[a-zA-Z_]{6,16}$)|(^[a-z\d_]{6,16}$)(^[A-Z\d_]{6,16}$)|(^[a-zA-Z\d_]{6,16}$)/g;

if (low.test(passcord)) { //low.test(passcord) 若是知足low正則表達式，則返回true

wrap.style.display = "block";

weak.style.color = "white";

medium.style.color = "grey";

strong.style.color = "grey";

weak.style.background = "rgb(240,146,148)";

medium.style.background = "rgb(228,228,228)";

strong.style.background = "rgb(228,228,228)";

} else if (middle.test(passcord)) { //若是知足middle正則表達式，則返回true

wrap.style.display = "block";

weak.style.color = "rgb(243,218,80)";

medium.style.color = "white";

strong.style.color = "grey";

weak.style.background = "rgb(243,218,80)";

medium.style.background = "rgb(243,218,80)";

strong.style.background = "rgb(228,228,228)";

} else if(high.test(passcord)){ //若是知足high正則表達式，則返回true

wrap.style.display = "block";

weak.style.color = "rgb(76,173,79)";

medium.style.color = "rgb(76,173,79)";

strong.style.color = "white";

weak.style.background = "rgb(76,173,79)";

medium.style.background = "rgb(76,173,79)";

strong.style.background = "rgb(76,173,79)";

} else {

wrap.style.display = "none"; //若是不知足正則方程則不會顯示密碼強度

}

　　　　//假如輸入密碼位數超過16位，則會顯示密碼長度應爲6~16個字符

if (passcord.length >= 16) {

warning.style.display = "none";

falseAlarm.style.display = "block";

} else {

　　　　//假如輸入密碼位數沒超過16位，則會顯示：6~16個字符，區分大小寫

warning.style.display = "block";

falseAlarm.style.display = "none";

}

passWord.addEventListener('keyup',addKeyEvent,false);

</script>

</html>

效果如圖所示：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。