请编写js代码实现功能

好的，请注意以下几点：

1. 需要在 index.js 文件中实现表单验证的功能，所以需要在 HTML 文件中引入 index.js 文件，并且需要在 HTML 文件中为每个输入框设置类名。
2. 需要使用 addEventListener 方法监听表单提交事件。
3. 需要在 JavaScript 文件中定义一个 validateForm 函数，用于验证表单的内容。
4. 需要在 validateForm 函数中对每个输入框的内容进行验证，并根据验证结果来显示或隐藏对应的提示信息。
5. 需要在 validateForm 函数中使用 preventDefault 方法阻止表单的默认提交行为。最后将 validateForm 函数与表单提交事件绑定即可完成表单验证的功能。

以下是示例代码：

const form = document.querySelector('form');
const usernameInput = document.querySelector('.username');
const passwordInput = document.querySelector('.password');
const phoneInput = document.querySelector('.phone');
const nicknameInput = document.querySelector('.nickname');
const usernameSpan = document.querySelector('.username + span');
const passwordSpan = document.querySelector('.password + span');
const phoneSpan = document.querySelector('.phone + span');
const nicknameSpan = document.querySelector('.nickname + span');

function validateForm(event) {
  event.preventDefault();

  const usernameValue = usernameInput.value.trim();
  const passwordValue = passwordInput.value.trim();
  const phoneValue = phoneInput.value.trim();
  const nicknameValue = nicknameInput.value.trim();

  const usernameRegex = /^[a-zA-Z][a-zA-Z0-9]{5,11}$/;
  const passwordRegex = /^.{6,12}$/;
  const phoneRegex = /^1[3-9]\d{9}$/;
  const nicknameRegex = /^[\u4e00-\u9fa5]{3,5}$/;

  let isValid = true;

  if (!usernameRegex.test(usernameValue)) {
    usernameSpan.classList.add('active');
    isValid = false;
  } else {
    usernameSpan.classList.remove('active');
  }

  if (!passwordRegex.test(passwordValue)) {
    passwordSpan.classList.add('active');
    isValid = false;
  } else {
    passwordSpan.classList.remove('active');
  }

  if (!phoneRegex.test(phoneValue)) {
    phoneSpan.classList.add('active');
    isValid = false;
  } else {
    phoneSpan.classList.remove('active');
  }

  if (!nicknameRegex.test(nicknameValue)) {
    nicknameSpan.classList.add('active');
    isValid = false;
  } else {
    nicknameSpan.classList.remove('active');
  }

  if (isValid) {
    form.submit();
  }
}

form.addEventListener('submit', validateForm);

在代码中，首先获取了表单和每个输入框以及对应的提示信息。然后定义了正则表达式用于验证输入内容。接着定义了 validateForm 函数，该函数首先使用 preventDefault 方法阻止表单的默认提交行为。然后获取每个输入框的内容，并根据正则表达式对内容进行验证，如果内容不符合要求，则显示对应的提示信息，同时将 isValid 标志设置为 false。如果所有输入框的内容都符合要求，则将 isValid 标志设置为 true，表单会在最后通过 form.submit() 方法提交。最后通过 addEventListener 方法将 validateForm 函数与表单提交事件绑定即可完成表单验证的功能。