如何在Javascript中为无效输入设置消息？

<form>
  <label for="username">用户名:</label>
  <input type="text" id="username">

  <label for="email">邮箱:</label>
  <input type="text" id="email">

  <button type="submit">提交</button>
</form>

// 监听表单的提交事件
document.querySelector('form').addEventListener('submit', function(event) {
  // 阻止表单的默认提交行为
  event.preventDefault();

  // 获取输入字段的值
  var username = document.getElementById('username').value;
  var email = document.getElementById('email').value;

  // 进行验证
  if (username === '') {
    // 无效输入，设置消息
    document.getElementById('username').setCustomValidity('用户名不能为空');
  } else {
    // 有效输入，清除消息
    document.getElementById('username').setCustomValidity('');
  }

  if (email === '') {
    // 无效输入，设置消息
    document.getElementById('email').setCustomValidity('邮箱不能为空');
  } else if (!isValidEmail(email)) {
    // 无效输入，设置消息
    document.getElementById('email').setCustomValidity('请输入有效的邮箱地址');
  } else {
    // 有效输入，清除消息
    document.getElementById('email').setCustomValidity('');
  }

  // 提交表单
  this.submit();
});