实现如下表单的验证：初始生成4位数字随机验证码。1）用户名为空、注册时显示对应提示信息。2）要求输入的email中必须包含@字符，点号必须出现在@之后并且至少间隔一个字符，@之后必须有点号。3）手机号必须是11位数字形式4）输入的验证码如果和生成的4位随机验证码一致，则通过验证，如不一致则需要把密码文本框和验证码文本框置空。并排列整齐

以下是表单验证的实现代码：

HTML代码：

<form id="myForm" action="#" method="post">
  <div>
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username">
    <span id="username_error"></span>
  </div>
  <div>
    <label for="email">邮箱：</label>
    <input type="email" name="email" id="email">
    <span id="email_error"></span>
  </div>
  <div>
    <label for="phone">手机号：</label>
    <input type="tel" name="phone" id="phone">
    <span id="phone_error"></span>
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" name="password" id="password">
  </div>
  <div>
    <label for="verify_code">验证码：</label>
    <input type="text" name="verify_code" id="verify_code">
    <span id="verify_code_error"></span>
    <span id="verify_code_image"></span>
  </div>
  <div>
    <input type="submit" value="提交">
  </div>
</form>

JavaScript代码：

// 生成4位数字随机验证码
function generateVerifyCode() {
  var code = "";
  for (var i = 0; i < 4; i++) {
    code += Math.floor(Math.random() * 10);
  }
  return code;
}

// 验证用户名
function validateUsername() {
  var username = document.getElementById("username").value.trim();
  if (username === "") {
    document.getElementById("username_error").innerHTML = "用户名不能为空";
    return false;
  }
  return true;
}

// 验证邮箱
function validateEmail() {
  var email = document.getElementById("email").value.trim();
  var pattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
  if (!pattern.test(email)) {
    document.getElementById("email_error").innerHTML = "请输入正确的邮箱地址";
    return false;
  }
  return true;
}

// 验证手机号
function validatePhone() {
  var phone = document.getElementById("phone").value.trim();
  var pattern = /^1\d{10}$/;
  if (!pattern.test(phone)) {
    document.getElementById("phone_error").innerHTML = "请输入正确的手机号码";
    return false;
  }
  return true;
}

// 验证验证码
function validateVerifyCode() {
  var verify_code = document.getElementById("verify_code").value.trim();
  var verify_code_image = document.getElementById("verify_code_image").innerHTML;
  if (verify_code !== verify_code_image) {
    document.getElementById("verify_code_error").innerHTML = "验证码错误";
    document.getElementById("password").value = "";
    document.getElementById("verify_code").value = "";
    return false;
  }
  return true;
}

// 更新验证码图片
function updateVerifyCodeImage() {
  var code = generateVerifyCode();
  document.getElementById("verify_code_image").innerHTML = code;
}

// 表单提交前验证
function validateForm() {
  var is_valid = true;
  is_valid = validateUsername() && is_valid;
  is_valid = validateEmail() && is_valid;
  is_valid = validatePhone() && is_valid;
  is_valid = validateVerifyCode() && is_valid;
  return is_valid;
}

// 页面加载时生成验证码图片
window.onload = function() {
  updateVerifyCodeImage();
}

// 点击验证码图片更新验证码
document.getElementById("verify_code_image").onclick = function() {
  updateVerifyCodeImage();
}

CSS代码：

form div {
  margin-bottom: 10px;
}

form label {
  display: inline-block;
  width: 80px;
}

form input {
  width: 220px;
}

form span {
  color: red;
  margin-left: 10px;
  font-size: 14px;
}

注意：以上代码仅为示例，需要根据实际情况进行修改和优化。