实现表单中有用户名,密码,确认密码,及注册按钮; 1. 输入用户名, 失去焦点后, 如果用户名已存在则在右侧span标签提示红色的"用户名已存在"(假设用户名为"zs"为已存在) 2. 如果点击用户名后, 没有输入,继续输入密码,则在右侧提示红色的"用户名不能为空" 3. 如果输入非"zs", js中校验正确,则失去焦点后,右侧提示绿色的"恭喜可用"

好的，以下是一个简单的实现示例（仅供参考）：

HTML 代码：

<form>
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <span id="username-tip" class="tip"></span>
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <span id="password-tip" class="tip"></span>
  </div>
  <div>
    <label for="confirm-password">确认密码：</label>
    <input type="password" id="confirm-password" name="confirmPassword">
    <span id="confirm-password-tip" class="tip"></span>
  </div>
  <button type="submit">注册</button>
</form>

CSS 代码：

.tip {
  display: inline-block;
  margin-left: 10px;
  font-size: 12px;
}
.tip.error {
  color: red;
}
.tip.success {
  color: green;
}

JavaScript 代码：

// 获取表单元素
const form = document.querySelector('form');
const usernameInput = form.querySelector('#username');
const passwordInput = form.querySelector('#password');
const confirmPasswordInput = form.querySelector('#confirm-password');

// 添加事件监听器
usernameInput.addEventListener('blur', checkUsername);
form.addEventListener('submit', handleSubmit);

// 校验用户名
function checkUsername() {
  const username = usernameInput.value.trim();
  const usernameTip = document.querySelector('#username-tip');
  if (username === '') {
    usernameTip.textContent = '用户名不能为空';
    usernameTip.classList.add('error');
  } else if (username === 'zs') {
    usernameTip.textContent = '用户名已存在';
    usernameTip.classList.add('error');
  } else {
    usernameTip.textContent = '恭喜可用';
    usernameTip.classList.remove('error');
    usernameTip.classList.add('success');
  }
}

// 处理表单提交
function handleSubmit(event) {
  event.preventDefault();
  
  // 获取用户名、密码和确认密码
  const username = usernameInput.value.trim();
  const password = passwordInput.value.trim();
  const confirmPassword = confirmPasswordInput.value.trim();
  
  // 校验用户名
  const usernameTip = document.querySelector('#username-tip');
  if (username === '') {
    usernameTip.textContent = '用户名不能为空';
    usernameTip.classList.add('error');
    return;
  } else if (username === 'zs') {
    usernameTip.textContent = '用户名已存在';
    usernameTip.classList.add('error');
    return;
  } else {
    usernameTip.textContent = '恭喜可用';
    usernameTip.classList.remove('error');
    usernameTip.classList.add('success');
  }
  
  // 校验密码和确认密码
  const passwordTip = document.querySelector('#password-tip');
  const confirmPasswordTip = document.querySelector('#confirm-password-tip');
  if (password === '') {
    passwordTip.textContent = '密码不能为空';
    passwordTip.classList.add('error');
    return;
  } else {
    passwordTip.textContent = '';
    passwordTip.classList.remove('error');
  }
  if (confirmPassword === '') {
    confirmPasswordTip.textContent = '确认密码不能为空';
    confirmPasswordTip.classList.add('error');
    return;
  } else if (confirmPassword !== password) {
    confirmPasswordTip.textContent = '两次输入的密码不一致';
    confirmPasswordTip.classList.add('error');
    return;
  } else {
    confirmPasswordTip.textContent = '';
    confirmPasswordTip.classList.remove('error');
  }
  
  // 如果校验通过，则提交表单
  console.log('提交表单：', { username, password });
}

该示例实现的功能：

1. 当输入用户名后，失去焦点时，如果用户名为 "zs"，则提示“用户名已存在”，字体颜色为红色；
2. 当点击用户名输入框后，没有输入内容，继续输入密码时，则提示“用户名不能为空”，字体颜色为红色；
3. 当输入非 "zs" 的用户名时，失去焦点后，提示“恭喜可用”，字体颜色为绿色；
4. 当提交表单时，校验用户名、密码和确认密码是否符合要求，如果不符合要求，则在相应的提示标签中显示错误信息，阻止表单提交。

注意：该示例仅实现了部分功能，实际应用中还需要进行更全面的校验和防范 XSS 攻击等安全问题。