当前位置: 萬仟网 > IT编程>开发语言>Jquery > jQuery实现图书添加页面输入信息验证

jQuery实现图书添加页面输入信息验证

2020年10月29日  | 萬仟网IT编程  | 我要评论
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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com