<td class="input-container"><input class="input1" type="password" id="password" name="password" placeholder="请输入密码"></td> <script> var input = document.getElementById("password"); input.addEventListener("input", function() { if (input.value.length>0) { input.parentNode.classList.add("valid"); } else { input.parentNode.classList.remove("valid"); } }); </script>

根据您提供的代码，您想在密码输入框后面显示√或者×来表示密码的有效性。以下是修改后的代码示例：

<td class="input-container">
  <input class="input1" type="password" id="password" name="password" placeholder="请输入密码">
</td>
<script>
  var input = document.getElementById("password");
  input.addEventListener("input", function() {
    var isValid = input.value.length > 0;
    input.parentNode.classList.toggle("valid", isValid);
  });
</script>

在上述代码中，我们使用了 `toggle` 方法来添加或移除 `valid` 类。根据输入框的值是否为空，我们将 `valid` 类添加或移除。CSS样式可以根据 `valid` 类的存在与否来显示√或者×。

您可能需要在CSS中添加一些样式来定义`.valid::after` 伪元素的外观，以便在输入有效时正确显示√。另外，请确保在包含输入框的容器元素上设置了适当的样式，如 `position: relative;`。

希望对您有帮助！如有疑问，请随时提出。

相关问题

<div class="container"> <h1 style="text-align: center">欢迎使用记账本系统</h1> <form class="login-form" action="loginServlet" method="post" id="loginForm" name="myform" onsubmit="return checkclick()"> <table align="center" border="1px" bgcolor="white" width="400px" height="300px"> <tr> <td height="55px" colspan="2" style="text-align: center"><strong>用户登录</strong></td> </tr> <tr> <td align="center" width="70%" height="55px" colspan="2"><input id="user" type="text" name="username" placeholder="请输入用户名"/></td> </tr> <tr> <td align="center" width="70%" height="55px" colspan="2"><input id="pass" type="password" name="userpwd" placeholder="请输入密码"/></td> </tr> <tr> <td align="center" colspan="2" width="200px" height="60px"><img src="${pageContext.request.contextPath }/codeServlet" onclick="this.src='${pageContext.request.contextPath }/codeServlet?'+Math.random();" /></td> </tr> <tr> <td align="center" height="55px" colspan="2"> <input id="code" type="text" name="code" placeholder="验证码"/></td> </tr> <tr> <td colspan="2" height="20px" align="right"> <span id="message" style="align:center;color:red;font-size:15px;"></span></td> </tr> <tr> <td width="200px" height="55px" align="center" ><input id="checkbtn" type="submit" value="登录" ></td> <td height="55px" align="center" > <input type="button" value="注册" onClick="window.location.href='zhuce.jsp'"></td> </tr> </table> </form> </div>

这是一个登录界面的 HTML 代码，其中包含一个表单，表单中有用户名、密码、验证码等输入框和登录、注册按钮。登录按钮的点击事件会向服务器发送登录请求，注册按钮的点击事件则会跳转到注册页面。在样式上，页面使用了表格来布局，表格的中心位置放置了登录表单。

需要注意的是，该代码中使用了 JSP 内置对象 `pageContext`，其中的 `${pageContext.request.contextPath }` 表示获取当前应用的根路径。该路径将在登录界面中获取验证码的 Servlet 中使用。

layui 规格 代码

Layui 的规格代码通常指的是 Layui 的 HTML 结构和 CSS 样式规范。以下是 Layui 常见的规格代码：

1. 布局规范：

<div class="layui-container">
  <div class="layui-row">
    <div class="layui-col-md6">左侧内容</div>
    <div class="layui-col-md6">右侧内容</div>
  </div>
</div>

2. 表格规范：

<table class="layui-table">
  <colgroup>
    <col width="150">
    <col>
    <col width="200">
    <col width="200">
  </colgroup>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>北京</td>
      <td>
        <a href="">编辑</a> |
        <a href="">删除</a>
      </td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>上海</td>
      <td>
        <a href="">编辑</a> |
        <a href="">删除</a>
      </td>
    </tr>
  </tbody>
</table>

3. 表单规范：

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="login">登录</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

以上代码仅为示例，实际使用时需要根据具体需求进行调整。