vue3注册页面表单验证JavaScript

当涉及到 Vue 3 的注册页面表单验证时，你可以使用 JavaScript 来实现。下面是一个示例，演示了如何使用 JavaScript 进行表单验证：

首先，在 Vue 组件中定义表单数据和验证规则：

data() {
  return {
    form: {
      username: '',
      password: '',
      confirmPassword: ''
    },
    rules: {
      username: [
        { required: true, message: '请输入用户名' },
        { min: 3, message: '用户名长度不能小于3个字符' }
      ],
      password: [
        { required: true, message: '请输入密码' },
        { min: 6, message: '密码长度不能小于6个字符' }
      ],
      confirmPassword: [
        { required: true, message: '请确认密码' },
        { validator: this.validateConfirmPassword }
      ]
    },
    errors: {}
  }
},

在上述代码中，我们定义了表单数据 `form`，其中包含了用户名、密码和确认密码字段。同时，我们也定义了验证规则 `rules`，其中包含了针对每个字段的验证规则。

接下来，在模板中使用表单数据和验证规则：

<template>
  <form @submit="submitForm">
    <div>
      <label for="username">用户名：</label>
      <input type="text" id="username" v-model="form.username">
      <span v-if="errors.username">{{ errors.username }}</span>
    </div>
    <div>
      <label for="password">密码：</label>
      <input type="password" id="password" v-model="form.password">
      <span v-if="errors.password">{{ errors.password }}</span>
    </div>
    <div>
      <label for="confirmPassword">确认密码：</label>
      <input type="password" id="confirmPassword" v-model="form.confirmPassword">
      <span v-if="errors.confirmPassword">{{ errors.confirmPassword }}</span>
    </div>
    <button type="submit">注册</button>
  </form>
</template>

在上述代码中，我们使用 `v-model` 指令将输入框与表单数据进行绑定，并使用条件渲染来显示错误信息。

最后，在 Vue 组件中实现表单提交方法和验证逻辑：

methods: {
  submitForm() {
    if (this.validateForm()) {
      // 表单验证通过，执行注册逻辑
      // ...
    }
  },
  validateForm() {
    this.errors = {};
    let isValid = true;

    for (let field in this.form) {
      for (let rule of this.rules[field]) {
        if (rule.required && !this.form[field]) {
          this.errors[field] = rule.message;
          isValid = false;
          break;
        }
        if (rule.min && this.form[field].length < rule.min) {
          this.errors[field] = rule.message;
          isValid = false;
          break;
        }
        if (rule.validator && !rule.validator(this.form[field])) {
          this.errors[field] = rule.message;
          isValid = false;
          break;
        }
      }
    }

    return isValid;
  },
  validateConfirmPassword(value) {
    return value === this.form.password;
  }
}

在上述代码中，我们定义了 `submitForm` 方法来处理表单提交事件。`validateForm` 方法用于验证表单数据是否满足规则，`validateConfirmPassword` 方法用于验证确认密码是否与密码一致。

这只是一个简单的示例，你可以根据实际需求来扩展和优化表单验证的逻辑。希望这对你有所帮助！