用js做一个表单验证，要求验证用户名，要求英文字母和数字组成 验证密码，要求至少有一个大写字母和一个符号组成，8个字符以上 邮箱格式验证 收货电话手机号码要求11位数字 在每一个输入栏，都要通过onblur或onchange事件监听，即时验证 -->

在JavaScript中，你可以使用正则表达式（Regular Expression）来进行简单的表单验证。以下是一个示例，展示了如何在input元素上添加onblur或onchange事件来实时验证各个字段：

// HTML部分
<form id="myForm">
  <label for="username">Username:</label>
  <input type="text" id="username" required onblur="validateUsername(this)">

  <label for="password">Password:</label>
  <input type="password" id="password" required onblur="validatePassword(this)">

  <label for="email">Email:</label>
  <input type="email" id="email" required onblur="validateEmail(this)">

  <label for="phone">Phone:</label>
  <input type="tel" id="phone" pattern="\d{11}" required onblur="validatePhoneNumber(this)">
</form>

<!-- JavaScript部分 -->
<script>
function validateUsername(input) {
  const regex = /^[a-zA-Z0-9]+$/;
  if (!regex.test(input.value)) {
    alert('Username should only contain letters and numbers.');
    input.setCustomValidity("Invalid username");
  } else {
    input.setCustomValidity('');
  }
}

function validatePassword(input) {
  const regex = /^(?=.*[A-Z])(?=.*\W).{8,}$/;
  if (!regex.test(input.value)) {
    alert('Password must have at least one uppercase letter, one special character, and be at least 8 characters long.');
    input.setCustomValidity("Invalid password");
  } else {
    input.setCustomValidity('');
  }
}

function validateEmail(input) {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(input.value)) {
    alert('Please enter a valid email address.');
    input.setCustomValidity("Invalid email");
  } else {
    input.setCustomValidity('');
  }
}

function validatePhoneNumber(input) {
  const phoneRegex = /^\d{11}$/;
  if (!phoneRegex.test(input.value)) {
    alert('Phone number should be 11 digits.');
    input.setCustomValidity("Invalid phone number");
  } else {
    input.setCustomValidity('');
  }
}
</script>

在这个例子中，当用户离开输入框（onblur），如果验证失败，会弹出提示并设置输入框的custom validity属性，浏览器会显示相应的错误消息。如果验证通过，则清除错误提示。