如何使用Node.js实现表单校验失败时动态修改CSS样式

你操作DOM不生效基本是两种场景的问题，对应方案如下： #

场景1：前端点击登录时做前置校验，JS执行时机错误 #

• 问题根因：操作DOM的JS逻辑执行时，页面DOM还没渲染完成，获取不到对应的输入框元素，修改样式自然不生效。
• 解决步骤：
  1. 提前定义错误样式类，不用手动拼接样式代码
  2. 用DOMContentLoaded事件包裹逻辑，确保DOM加载完成后再绑定提交事件
  3. 校验不通过时先阻止表单默认提交行为，再给对应输入框加错误样式

示例代码：
CSS部分：

.input-error {
  border: 1px solid #ff4d4f;
  box-shadow: 0 0 0 2px rgba(255,77,79,0.2);
}

HTML表单部分：

<form id="loginForm" method="POST" action="/login">
  <div>
    <label>用户名</label>
    <input type="text" name="username" id="username">
  </div>
  <div>
    <label>密码</label>
    <input type="password" name="password" id="password">
  </div>
  <button type="submit">登录</button>
</form>

JS逻辑部分（放在body标签末尾，或者单独放在JS文件中引入都可）：

document.addEventListener('DOMContentLoaded', function() {
  const loginForm = document.getElementById('loginForm');
  const usernameInput = document.getElementById('username');
  const passwordInput = document.getElementById('password');

  loginForm.addEventListener('submit', function(e) {
    // 先清空之前的错误样式
    usernameInput.classList.remove('input-error');
    passwordInput.classList.remove('input-error');
    let hasError = false;

    // 自定义校验规则
    if (!usernameInput.value.trim()) {
      usernameInput.classList.add('input-error');
      hasError = true;
    }
    if (!passwordInput.value.trim()) {
      passwordInput.classList.add('input-error');
      hasError = true;
    }

    // 有错误则阻止表单提交
    if (hasError) {
      e.preventDefault();
      return;
    }
    // 校验通过则正常走POST提交
  })
})

场景2：后端校验失败返回页面对应加错误样式 #

如果你所有校验逻辑都放在后端执行，表单提交后后端校验失败返回页面，直接通过模板引擎给对应输入框加错误类即可，以下以EJS模板为例：
Express后端代码：

app.post('/login', (req, res) => {
  const { username, password } = req.body;
  const errors = {};

  // 后端校验逻辑
  if (!username.trim()) errors.username = '用户名不能为空';
  if (!password.trim()) errors.password = '密码不能为空';

  if (Object.keys(errors).length > 0) {
    // 校验失败把错误标识和原有输入内容传回模板
    return res.render('login', { errors, username });
  }

  // 校验通过走后续登录逻辑
  res.redirect('/dashboard');
})

模板中输入框部分代码：

<input 
  type="text" 
  name="username" 
  id="username"
  value="<%= username || '' %>"
  class="<%= errors.username ? 'input-error' : '' %>"
>
<input 
  type="password" 
  name="password" 
  id="password"
  class="<%= errors.password ? 'input-error' : '' %>"
>

内容的提问来源于stack exchange，提问作者G U I