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”
- 输入“123456”