Github：check_length
一. 需求
假設頁面上有一個文本框，用來讓用戶輸入用戶名。
- 用戶輸入用戶名的時候，如果輸入長度超過 5，當失去文本框焦點的時候，就提示用戶長度超過限制，否則則提示成功。
- 可以用文字在文本框後面提示，也可以用小圖標提示。
二. 代碼
check_length.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>檢查輸入文本框值的長度</title>
</head>
<body>
Please enter your username: <input type="text" />
<span></span>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="check_length.js"></script>
</html>
check_length.js
$(document).ready(function() {
$("input").blur(function() {
var length = $(this).val().length;
if(length > 0 && length <= 5) {
$("span").css("color", "green").text("success :)");
// $("span").html("<font color=green>success :)</font>")
}
else if(length > 5) {
$("span").css("color", "red").text("more than limited length!");
// $("span").html("<font color=red>more than limited length!</font>");
}
else {}
});
});
三. 效果
- 默認
![1]()
- 輸入 “1”
![2]()
- 輸入“123456”
![3]()
