Flutter中如何将验证错误信息显示在左侧？多输入框验证实现

核心思路 #

通过HTML构建带错误提示的输入组结构，用CSS固定错误信息在输入框左侧位置，JavaScript编写验证逻辑来控制错误信息的显示与隐藏。

代码实现 #

HTML 结构

每个输入项独立成组，包含错误提示元素、标签和输入框：

<form id="userForm">
  <div class="input-group">
    <span class="error-message"></span>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
  </div>
  <div class="input-group">
    <span class="error-message"></span>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="input-group">
    <span class="error-message"></span>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
  </div>
  <button type="submit">提交</button>
</form>

CSS 布局

让错误信息居左显示，默认隐藏，验证失败时显示红色提示：

.input-group {
  display: flex;
  align-items: center;
  margin: 10px 0;
  gap: 15px;
}

.error-message {
  color: #dc3545;
  width: 150px;
  text-align: left;
  display: none; /* 默认隐藏错误提示 */
}

.error-message.show {
  display: inline-block; /* 验证失败时显示 */
}

input {
  padding: 6px 8px;
  width: 200px;
}

JavaScript 验证逻辑

编写通用验证函数，绑定输入和提交事件，支持实时验证与提交前全局校验：

const form = document.getElementById('userForm');
const inputGroups = form.querySelectorAll('.input-group');

// 自定义验证规则配置
const validationRules = {
  username: {
    required: true,
    minLength: 3,
    message: '用户名需至少3个字符'
  },
  email: {
    required: true,
    pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
    message: '请输入有效的邮箱地址'
  },
  password: {
    required: true,
    minLength: 6,
    message: '密码需至少6个字符'
  }
};

// 单个输入框验证函数
function validateInput(input) {
  const fieldName = input.name;
  const rules = validationRules[fieldName];
  const errorElement = input.parentElement.querySelector('.error-message');
  let isValid = true;

  if (rules.required && !input.value.trim()) {
    isValid = false;
  } else if (rules.minLength && input.value.length < rules.minLength) {
    isValid = false;
  } else if (rules.pattern && !rules.pattern.test(input.value)) {
    isValid = false;
  }

  // 更新错误提示状态
  if (!isValid) {
    errorElement.textContent = rules.message;
    errorElement.classList.add('show');
  } else {
    errorElement.classList.remove('show');
  }
  return isValid;
}

// 绑定输入事件，实现实时验证
inputGroups.forEach(group => {
  const input = group.querySelector('input');
  input.addEventListener('input', () => validateInput(input));
});

// 表单提交时全局验证，阻止非法提交
form.addEventListener('submit', (e) => {
  let formIsValid = true;
  inputGroups.forEach(group => {
    const input = group.querySelector('input');
    if (!validateInput(input)) {
      formIsValid = false;
    }
  });
  if (!formIsValid) {
    e.preventDefault();
  }
});

扩展说明 #

• 如需新增验证规则（如手机号格式、特殊字符检查），只需在validationRules对象中添加对应字段的规则配置即可。
• 若使用Vue/React等框架，逻辑思路一致：通过状态管理错误信息，用条件渲染控制左侧提示的显示，绑定框架自带的表单验证钩子完成校验。

内容的提问来源于stack exchange，提问作者Shaikh Faizan