表单数据验证 设计网页如下图所示，要求实现 在文本框失去焦点时，进行用户名、密码、确认密码、姓名数据验证，输入错误，在右侧显示警告信息。 只有所有验证通过时才能提交表单.

好的，这个可以使用JavaScript来实现，具体实现步骤如下：

1. 给每个文本框添加失去焦点事件监听器，当焦点离开文本框时触发验证函数。
2. 编写验证函数，根据不同的文本框进行不同的验证，如用户名长度、密码强度、确认密码等。
3. 如果验证不通过，修改右侧提示信息的内容和样式。
4. 如果所有验证通过，允许提交表单。

下面是示例代码，你可以根据自己的需求进行修改和优化：

HTML代码：

<form id="myForm">
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <span class="error" id="usernameError"></span>
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <span class="error" id="passwordError"></span>
  </div>
  <div>
    <label for="confirmPassword">确认密码：</label>
    <input type="password" id="confirmPassword" name="confirmPassword">
    <span class="error" id="confirmPasswordError"></span>
  </div>
  <div>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">
    <span class="error" id="nameError"></span>
  </div>
  <button type="submit" id="submitBtn">提交</button>
</form>

JavaScript代码：

// 获取表单元素和错误提示元素
const form = document.getElementById('myForm');
const username = document.getElementById('username');
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirmPassword');
const name = document.getElementById('name');
const usernameError = document.getElementById('usernameError');
const passwordError = document.getElementById('passwordError');
const confirmPasswordError = document.getElementById('confirmPasswordError');
const nameError = document.getElementById('nameError');

// 给每个文本框添加失去焦点事件监听器
username.addEventListener('blur', validateUsername);
password.addEventListener('blur', validatePassword);
confirmPassword.addEventListener('blur', validateConfirmPassword);
name.addEventListener('blur', validateName);

// 验证用户名
function validateUsername() {
  const value = username.value.trim();
  if (value.length < 6 || value.length > 20) {
    usernameError.textContent = '用户名长度必须在6-20之间';
    usernameError.classList.add('error-show');
    return false;
  } else {
    usernameError.textContent = '';
    usernameError.classList.remove('error-show');
    return true;
  }
}

// 验证密码
function validatePassword() {
  const value = password.value.trim();
  if (value.length < 6) {
    passwordError.textContent = '密码长度不能小于6位';
    passwordError.classList.add('error-show');
    return false;
  } else if (!/\d/.test(value) || !/[a-zA-Z]/.test(value)) {
    passwordError.textContent = '密码必须包含数字和字母';
    passwordError.classList.add('error-show');
    return false;
  } else {
    passwordError.textContent = '';
    passwordError.classList.remove('error-show');
    return true;
  }
}

// 验证确认密码
function validateConfirmPassword() {
  const value = confirmPassword.value.trim();
  if (value !== password.value.trim()) {
    confirmPasswordError.textContent = '两次输入的密码不一致';
    confirmPasswordError.classList.add('error-show');
    return false;
  } else {
    confirmPasswordError.textContent = '';
    confirmPasswordError.classList.remove('error-show');
    return true;
  }
}

// 验证姓名
function validateName() {
  const value = name.value.trim();
  if (value.length === 0) {
    nameError.textContent = '请输入姓名';
    nameError.classList.add('error-show');
    return false;
  } else {
    nameError.textContent = '';
    nameError.classList.remove('error-show');
    return true;
  }
}

// 提交表单时验证所有数据是否合法
form.addEventListener('submit', function(e) {
  e.preventDefault();
  if (validateUsername() && validatePassword() && validateConfirmPassword() && validateName()) {
    alert('表单提交成功！');
  }
});

CSS代码：

.error-show {
  display: block;
  color: red;
  font-size: 12px;
  margin-top: 5px;
}