设计表单并用JavaScript实现输入验证用户名,密码是否相等，邮箱是否格式正确

以下是一个简单的表单设计和JavaScript验证示例：

HTML代码：

<form id="myForm">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username"><br><br>
  
  <label for="password">密码:</label>
  <input type="password" id="password" name="password"><br><br>
  
  <label for="confirmPassword">确认密码:</label>
  <input type="password" id="confirmPassword" name="confirmPassword"><br><br>
  
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email"><br><br>
  
  <input type="submit" value="提交">
</form>

JavaScript代码：

// 获取表单元素
const myForm = document.getElementById("myForm");
const username = document.getElementById("username");
const password = document.getElementById("password");
const confirmPassword = document.getElementById("confirmPassword");
const email = document.getElementById("email");

// 表单验证函数
function validateForm() {
  // 验证用户名是否为空
  if (username.value === "") {
    alert("用户名不能为空");
    return false;
  }

  // 验证密码是否为空
  if (password.value === "") {
    alert("密码不能为空");
    return false;
  }

  // 验证密码是否与确认密码相等
  if (password.value !== confirmPassword.value) {
    alert("密码不一致");
    return false;
  }

  // 验证邮箱格式是否正确
  const emailFormat = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
  if (!email.value.match(emailFormat)) {
    alert("邮箱格式不正确");
    return false;
  }

  // 验证通过
  return true;
}

// 在表单提交时调用验证函数
myForm.addEventListener("submit", function(event) {
  if (!validateForm()) {
    event.preventDefault();
  }
});

在验证函数中，我们首先检查用户名和密码是否为空。如果它们是空的，我们将使用 `alert()` 函数向用户显示错误消息，并返回 `false` 阻止表单提交。

接下来，我们检查密码和确认密码是否匹配。如果它们不匹配，我们将向用户显示错误消息，并返回 `false` 阻止表单提交。

最后，我们检查电子邮件是否符合预期的格式。我们使用正则表达式来验证电子邮件格式。如果电子邮件格式不正确，我们将向用户显示错误消息，并返回 `false` 阻止表单提交。

最后，我们在表单的 `submit` 事件上附加一个监听器。当用户点击提交按钮时，我们将调用验证函数。如果验证失败，我们将使用 `event.preventDefault()` 函数阻止表单提交。否则，表单将提交到服务器。