短視訊原始碼,密碼框驗證資訊文字提示
阿新 • • 發佈:2022-03-31
短視訊原始碼,密碼框驗證資訊文字提示實現的相關程式碼
案例分析:
1.首先判斷的事件是表單失去焦點onblur
2.如果輸入正確則提示正確的資訊顏色為綠色
3.如果輸入不是6到16位,則提示錯誤資訊顏色為紅色
4.因為裡面變化樣式較多,我們採取className修改樣式
示例程式碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
.box {
width: 400px;
height: 30px;
margin: 100px auto;
display: flex;
}
input {
height: 100%;
width: 200px;
}
.message {
display: block;
height: 100%;
width: 200px;
padding-left: 10px;
padding-top: 7px;
font-size: 12px;
color: #777;
}
.wrong {
color: red;
}
.right {
color: green;
}
</style>
</head>
<body>
<div class="box">
<input type="password">
<span class="message">6-16位字元,區分大小寫</span>
</div>
<script>
var input = document.querySelector('input');
var span = document.querySelector('span');
input.onblur = function() {
var count = input.value.length;
if((count<6&&count>0)) {
span.innerHTML = '密碼較短,最短支援6個字元';
span.className = 'message wrong';
}
else if(count>16) {
span.innerHTML = '密碼較長,最長支援16個字元';
span.className = 'message wrong';
}
else if(count>=6 && count<=16) {
span.innerHTML = '您輸入的正確';
span.className = 'message right';
}
else {
span.innerHTML = '6-16位字元,區分大小寫';
span.style.color = '#777';
}
}
</script>
</body>
</html>
以上就是短視訊原始碼,密碼框驗證資訊文字提示實現的相關程式碼, 更多內容歡迎關注之後的文章