weixin_41274119
2019-05-20 08:47
采纳率: 50%
浏览 902

选择用户名框 失去焦点后 框后未跳出 用户名不能为空的字样

选择用户名框 失去焦点后 框后未跳出 用户名不能为空的字样

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
        <table>
                <tr>
                    <td>用户名:</td>
                    <td>
                        <input type="text" name="username" id="username" />
                    </td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td>
                        <input type="password" name="pwd" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="button" value="登陆" />
                    </td>
                </tr>
            </table>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    /*
        val()用于设置或者获取表单元素的value值
        html()用于设置或者获取标记元素的标签内部的html内容
        css()用于设置选中元素的样式 css("样式名","样式值")
        css({"样式名","样式值"})
    */
    $("#username").blur(function() {
        var inputVal = $(this).val();
        if(inputVal == "") {
            $(".error").html("用户名不能为空");
            $(".error").css({
                "color": "purple",
                "font-size":"30px"
            });
        }
    })

</script>
</html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • 听楼一夜雨 2019-05-20 09:11
    已采纳

    你这个error的class框都没在页面上写啊

                         <input type="text" name="username" id="username" />
                            <i class="error"></i>
    
    点赞 打赏 评论
  • 1进击的小白 2019-05-20 09:11

    类名为error的文本框呢?

    点赞 打赏 评论
  • 前端○萌妹 2019-05-20 09:13

    你的class为error的标签在哪里啊?

    点赞 打赏 评论
  • zuishenzhizun 2019-05-20 09:51

    后面加上$('body').append(".error")就可以显示了

    点赞 打赏 评论

相关推荐 更多相似问题