jQuery实现图书添加页面输入信息验证
程序员文章站
2022-03-02 23:40:08
1.实现原理jQuery blur()方法 实现此功能2.jQuery blur()方法：blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的描述:触发所有段落的blur事件jQuery 代码:$("span").blur();描述:任何段落失去焦点时弹出一个 "Hello World!"在每一个匹配元素的blur事件中绑定的处理函数。jQuery 代码:$("span").blur( function () { alert("Hello World!"...
1.实现原理
jQuery blur()方法 实现此功能
2.jQuery blur()方法：
blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的
描述:
触发所有段落的blur事件
jQuery 代码:
$("span").blur();
描述:
任何段落失去焦点时弹出一个 "Hello World!"在每一个匹配元素的blur事件中绑定的处理函数。
jQuery 代码:
$("span").blur( function () { alert("Hello World!"); } );
3.示例：
1.效果
2.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<form action="#">
<span>商品添加</span>
<div>
<table>
<tr>
<td><span>所属类别:</span>
</td>
<td><select>
<option value="小说">小说</option>
<option value="诗词">诗词</option>
<option value="工具">工具</option>
</select></td>
</tr>
<tr>
<td><span>所属类别:</span></td>
<td><input type="text" id="bookType"/><span class="bookTypeError"></span></td>
</tr>
<tr>
<td><span>图书名称:</span></td>
<td><input type="text" id="bookName"/><span class="bookNameError"></span></td>
</tr>
<tr>
<td><span>作者:</span></td>
<td><input type="text" id="author"><span class="authorError"></span></td>
</tr>
<tr>
<td><span>出版社:</span></td>
<td><input type="text" id="press"/><span class="pressError"></span></td>
</tr>
<tr>
<td><span>市场价格:</span></td>
<td><input type="text" id="marketPrice"/><span class="marketPriceError"></span></td>
</tr>
<tr>
<td><span>热卖价:</span></td>
<td><input type="text" id="hotSalePrice"/><span class="hotSalePriceError"></span></td>
</tr>
<tr>
<td><span>图像:</span>
</td>
<td>
<select>
<option value="123">123</option>
<option value="456">456</option>
<option value="789">789</option>
</select>
</td>
</tr>
<tr>
<td><span>是否为推荐:</span></td>
<td><input type="checkbox" id="isRecommend" value="recommend"/></td>
</tr>
<tr>
<td><span>是否为热门:</span></td>
<td><input type="checkbox" id="isHot" value="hot"/></td>
</tr>
<tr>
<td><span>简单描述:</span></td>
<td><textarea rows="6" cols="50" id="describe"></textarea><span class="describeError"></span></td>
</tr>
</table>
</div>
</form>
<script>
// function showError(){
//
// }
$("#bookType").blur(function () {
if ($("#bookType").val().length == 0) {
$(".bookTypeError").text("*").css("color", "red");
} else {
$(".bookTypeError").text("");
}
})
$("#bookName").blur(function () {
if ($("#bookName").val().length == 0) {
$(".bookNameError").text("*").css("color", "red");
alert("请不要忘记输入图书名称！")
} else {
$(".bookNameError").text("");
}
})
$("#author").blur(function () {
if ($("#author").val().length == 0) {
$(".authorError").text("*").css("color", "red");
} else {
$(".authorError").text("");
}
})
$("#press").blur(function () {
if ($("#press").val().length == 0) {
$(".pressError").text("*").css("color", "red");
} else {
$(".pressError").text("");
}
})
$("#marketPrice").blur(function () {
if ($("#marketPrice").val().length == 0) {
$(".marketPriceError").text("*").css("color", "red");
} else {
$(".marketPriceError").text("");
}
})
$("#hotSalePrice").blur(function () {
if ($("#hotSalePrice").val().length == 0) {
$(".hotSalePriceError").text("*").css("color", "red");
} else {
$(".hotSalePriceError").text("");
}
})
$("#describe").blur(function () {
if ($("#describe").val().length == 0) {
$(".describeError").text("*").css("color", "red");
} else {
$(".describeError").text("");
}
})
console.log($("#describePrice").val().length)
</script>
</body>
</html>```
本文地址：https://blog.csdn.net/weixin_45750969/article/details/109348598