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

好的，下面是实现上述表单验证的代码：

HTML部分：

<form onsubmit="return validateForm()">
  <div>
    <label>用户名：</label>
    <input type="text" id="username">
    <span id="username-error" style="color: red; display: none;">用户名不能为空</span>
  </div>
  <div>
    <label>邮箱：</label>
    <input type="text" id="email">
    <span id="email-error" style="color: red; display: none;">邮箱格式不正确</span>
  </div>
  <div>
    <label>手机号：</label>
    <input type="text" id="phone">
    <span id="phone-error" style="color: red; display: none;">手机号格式不正确</span>
  </div>
  <div>
    <label>验证码：</label>
    <input type="text" id="code" readonly>
    <button type="button" onclick="generateCode()">生成验证码</button>
  </div>
  <div>
    <label>输入验证码：</label>
    <input type="text" id="input-code">
    <span id="input-code-error" style="color: red; display: none;">验证码不正确</span>
  </div>
  <div>
    <label>密码：</label>
    <input type="password" id="password">
  </div>
  <button type="submit">注册</button>
</form>

JavaScript部分：

function generateCode() {
  var code = '';
  for (var i = 0; i < 4; i++) {
    var rand = Math.floor(Math.random() * 10);
    code += rand;
  }
  document.getElementById('code').value = code;
}

function validateForm() {
  var username = document.getElementById('username').value.trim();
  var email = document.getElementById('email').value.trim();
  var phone = document.getElementById('phone').value.trim();
  var inputCode = document.getElementById('input-code').value.trim();
  var code = document.getElementById('code').value;

  var valid = true;

  // 验证用户名
  var usernameError = document.getElementById('username-error');
  if (username === '') {
    usernameError.style.display = 'inline';
    valid = false;
  } else {
    usernameError.style.display = 'none';
  }

  // 验证邮箱
  var emailError = document.getElementById('email-error');
  var atPos = email.indexOf('@');
  var dotPos = email.lastIndexOf('.');
  if (atPos < 1 || dotPos < atPos + 2 || dotPos + 2 >= email.length) {
    emailError.style.display = 'inline';
    valid = false;
  } else {
    emailError.style.display = 'none';
  }

  // 验证手机号
  var phoneError = document.getElementById('phone-error');
  if (!/^\d{11}$/.test(phone)) {
    phoneError.style.display = 'inline';
    valid = false;
  } else {
    phoneError.style.display = 'none';
  }

  // 验证验证码
  var inputCodeError = document.getElementById('input-code-error');
  if (inputCode !== code) {
    inputCodeError.style.display = 'inline';
    document.getElementById('password').value = '';
    document.getElementById('input-code').value = '';
    valid = false;
  } else {
    inputCodeError.style.display = 'none';
  }

  return valid;
}

这段代码会在提交表单时进行验证，包括用户名、邮箱、手机号、验证码等。如果验证失败，会在对应的错误提示信息下显示错误信息，并返回`false`，阻止表单提交。如果验证成功，会返回`true`，允许表单提交。其中，生成验证码的函数`generateCode()`会在点击“生成验证码”按钮时被调用，生成一个4位的随机数字验证码，并将其显示在文本框中。