新增分类页面输入框的样式具体在哪个位置呢

# 具体遇到的问题
请问新增分类页面输入框的样式具体在哪个位置呢，添加了错误提示标签，校验起作用了，但是样式原因校验结果是输入框向后缩进一段距离，但是无法显示文字

# 报错信息的截图
# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输入代码，可通过选择【代码语言】突出显示

qq_慕姐0405493 2020-11-23

源自：企业门户网站前后台开发 5-3 项目作业

收起

3回答

好帮手慕阿慧回答被采纳获得+3积分 2020-11-23 15:34:06

同学你好，

1、输入框向后缩进是因为在js校验中添加class，值为error_input。如下：

error_input中margin-left为20px;，同学可以去掉这行代码。如下：

2、设置输入框中文字应该使用val()，而不是text()。

参考代码如下：

3、页面中多了一个>，建议同学去掉。如下：

4、老师的分类编号和输入框也是一行上的，当浏览器长度变小时就成了两行。

收起回答

qq_慕姐0405493 提问者 2020-11-23 15:09:18

<%@page contentType="text/html;charset=UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>新建图书分类</title>
        <link rel="stylesheet" href="../../css/bootstrap.min.css">
        <link rel="stylesheet" href="../../css/add.css">
        <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
        <script type="text/javascript" src="/js/validation.js" charset="UTF-8"></script>
    </head>
    <body>
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="">
                        图书分类管理
                    </a>
                </div>
            </div>
        </nav>
        <div class="container">
            <div class="jumbotron">
                <h1>Hello, XXX!</h1>
                <p>请小心地新增图书分类，要是建了一个错误的就不好了。。。</p>
            </div>
            <div class="page-header">
                <h3><small>新建</small></h3>
            </div>
            <form class="form-horizontal" action="/management?method=addCategory" method="post" 
                  autocomplete="off" enctype="multipart/form-data">
                <div class="form-group">
                    <span id="err_categoryId"></span>
                    <label for="categoryId" class="col-sm-2 control-label">分类ID ：</label>
                    <div class="col-sm-8">
                        <input name="categoryId" class="form-control" id="categoryId" 
                               onblur="checkEmpty('#err_categoryId','#categoryId')">
                    </div>
                </div>

                <div class="form-group">
                    <span id="err_categoryName"></span>
                    <label for="categoryName" class="col-sm-2 control-label">分类名称 ：</label>
                    <div class="col-sm-8">
                        <input name="categoryName" class="form-control" id="categoryName" 
                               onblur="checkEmpty('#err_categoryName','#categoryName')">>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary">保存</button>&nbsp;&nbsp;&nbsp;
                    </div>
                </div>
            </form>
        </div>
        <footer class="text-center" >
            copy@imooc
        </footer>
    </body>
</html>
===================================================
/**
 * 隐藏、显示错误信息
 * @param onOff true 验证成功 false 验证失败，显示错误
 * @param input 表单域选择器
 * @param errSelector 错误提示选择器
 * @param message 错误信息
 */
function switchValid(onOff,input,errSelector,message) {
    if (onOff == false){
        $(errSelector).text(message);
        $(input).addClass("error_input");
        $(errSelector).addClass("error_message");
    }else {
        $(errSelector).text("");
        $(input).removeClass("error_input");
        $(errSelector).removeClass("error_message");
    }
}

/**
 * 检查是否为空
 * @param input 表单域选择器
 * @param errSelector 错误提示选择器
 * @return true-校验成功 false-校验失败
 */
function checkEmpty(input,errSelector){
    var val=$(input).val();
    if ($.trim(val)==""){
        switchValid(false,input,errSelector,"请输入内容");
        return false;
    }else {
        switchValid(true,input,errSelector);
        return true;
    }
}
=====================================================
.error_input {
   color: red;
   font-weight: bold;
   border: 1px solid red;
}

.error_message {
   color: red;
   margin-left: 30px;
}