html - 从 input 标签中调用 CSS 样式文件

Question

我在客户端创建一个表单，其中有一个 JSP 页面，在服务器端我使用 Java servlet 来处理数据。我想要做的是，如果有错误，我希望能够传递一条错误消息，这将导致输入在其下方出现一条红线以指示错误。我的以下代码完美运行:

<input type="email" name="email" id="email" value="${param.email}" class="validate" <c:if test="${ not empty emailError}">style="border-bottom: 2.5px solid red; "</c:if>>
<label for="email" data-error="${emailError }" data-success="">Email</label>

我想知道的是，有没有办法删除 style="border-bottom: 2.5px solid red; " 并用 css 文件替换它。我想这样做的原因是因为我将有数百行具有该特定样式的代码，如果我想将样式更改为其他样式，我将需要浏览每一页并逐行替换所有内容。那么我可以将这种样式存储在一个单独的文件中，然后只调用该文件来创建相同的效果吗？我这样做是为了便于维护。

我还想指出，我不能只将它添加到样式表中，因为这样所有输入下面都会有一条红线，我只希望输入在出现错误时显示一条红线具体输入。

Answer 1

我不确定你的JSP方式，检查代码的正确性。我只想做的是:

1. 创建一个名为 .error 的 CSS 类，并用 {border-bottom: 2px solid red;} 定义它。请注意，px is always integer .
2. 其次，我将使用 AJAX 返回任何数据以验证它们。

Note: ps: Sorry I am using jQuery library, which is awesome, and you haven't said that in your OP.

让我告诉你一个简单的方法来做到这一点:

$(function () {
  $("#numcheck").keyup(function () {
    $this = $(this);
    $.post("/path/to/check.jsp", function (res) {
      if (res != "OK")
        $this.addClass("error");
      else
        $this.removeClass("error");
    });
  });
});

* {font-family: 'Segoe UI';}
.error {border-bottom: 2px solid red;}

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<input type="text" id="numcheck" />