【vue3+ts】表单空格校验

在Vue3配合TypeScript的项目中，实现表单空格校验通常涉及到数据绑定、生命周期钩子以及自定义验证规则。以下是一个简单的示例：

1. 首先，你需要定义一个包含空格校验的TypeScript字段类型，例如：

type FormGroup = {
  username: string;
  // 使用TrimPipe来移除字符串两端的空格
  password: string;
};

2. 在模板中使用v-model指令绑定表单值，并使用`trim`属性过滤掉输入框的空格：

<template>
  <form @submit.prevent="validateForm">
    <input type="text" v-model.trim="username" :placeholder="'Username'" required />
    <input type="password" v-model.trim="password" :placeholder="'Password'" required />
    <button type="submit">提交</button>
  </form>
</template>

3. 定义`validateForm`函数，在这里你可以添加更复杂的验证逻辑，如检查密码是否满足特定长度或格式：

<script lang="ts">
import { defineComponent } from 'vue';
import { RequiredValidator, MinLengthValidator } from '@utils/validation';

export default defineComponent({
  data() {
    return {
      form: new FormGroup(),
    };
  },
  methods: {
    validateForm() {
      const errors = {} as Record<string, string[]>;

      if (!RequiredValidator.validate('username', this.form.username)) {
        errors['username'] = ['用户名不能为空'];
      }

      if (MinLengthValidator.validate('password', this.form.password, 8) === false) {
        errors['password'] = ['密码长度应至少为8位'];
      }

      // 如果存在错误，阻止表单提交并显示错误信息
      if (Object.keys(errors).length > 0) {
        this.$emit('invalid', errors);
        return;
      }
      // 提交表单
      this.$emit('submit', this.form);
    },
  },
});
</script>

在这个例子中，我们导入了自定义的验证模块，如`RequiredValidator`和`MinLengthValidator`，它们可以根据需要进行扩展。