如何在提交表单时显示错误消息和图标

在提交表单时显示错误消息和图标是前端开发中常见的需求。下面是一个完善且全面的答案：

错误消息和图标的显示可以通过以下步骤实现：

验证表单数据：在提交表单之前，需要对用户输入的数据进行验证，确保数据的合法性和完整性。可以使用前端验证库如jQuery Validation、VeeValidate等，或者自己编写验证逻辑。
错误消息的显示：当表单数据验证不通过时，需要将错误消息显示给用户。可以通过在表单中添加一个用于显示错误消息的容器，如一个div元素，然后使用JavaScript将错误消息插入到该容器中。错误消息可以是文本形式的提示，也可以是图标形式的提示。
图标的显示：为了在提交表单时显示图标，可以使用字体图标或矢量图标库，如Font Awesome、Material Icons等。在表单中添加一个用于显示图标的元素，如一个span元素，然后使用JavaScript动态修改该元素的类名，以显示不同的图标。

以下是一个示例代码，演示如何在提交表单时显示错误消息和图标：

HTML代码：

<form id="myForm">
  <div id="errorContainer"></div>
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <button type="submit">提交</button>
</form>

CSS代码：

.error {
  color: red;
}

.icon {
  font-size: 20px;
  margin-left: 5px;
}

JavaScript代码：

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单提交

  // 表单数据验证逻辑
  var username = document.getElementsByName('username')[0].value;
  var password = document.getElementsByName('password')[0].value;
  var errorContainer = document.getElementById('errorContainer');
  errorContainer.innerHTML = ''; // 清空错误消息

  if (username === '') {
    errorContainer.innerHTML = '请输入用户名';
    return;
  }

  if (password === '') {
    errorContainer.innerHTML = '请输入密码';
    return;
  }

  // 表单验证通过，提交表单
  // ...
});

在上述示例中，当用户提交表单时，会触发submit事件的回调函数。在回调函数中，首先阻止表单的默认提交行为，然后进行表单数据的验证。如果验证不通过，会将错误消息插入到errorContainer容器中。如果验证通过，可以在此处添加提交表单的逻辑。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。