博客站

实现一个表单验证的 Hook 可以帮助你在多个组件中复用表单验证逻辑。这个 Hook 可以处理表单字段的验证、管理错误状态、以及提供验证方法等。以下是如何实现一个表单验证的 Hook 的详细步骤和示例：

1. 创建表单验证的 Hook

首先，创建一个自定义 Hook useFormValidation，用于处理表单验证逻辑。

// useFormValidation.js
import { ref } from 'vue';

export function useFormValidation(fields, validationRules) {
  const errors = ref({});

  function validateField(fieldName, value) {
    const rules = validationRules[fieldName];
    if (!rules) return true;

    for (const rule of rules) {
      const isValid = rule.validator(value);
      if (!isValid) {
        errors.value[fieldName] = rule.message;
        return false;
      }
    }

    errors.value[fieldName] = '';
    return true;
  }

  function validateForm() {
    let isValid = true;
    for (const fieldName of Object.keys(fields)) {
      const fieldValue = fields[fieldName].value;
      if (!validateField(fieldName, fieldValue)) {
        isValid = false;
      }
    }
    return isValid;
  }

  return {
    errors,
    validateField,
    validateForm
  };
}

2. 定义验证规则

在组件中，你可以定义表单字段的验证规则。每个字段可以有一个或多个验证规则，每个规则包含一个验证函数和一个错误消息。

const validationRules = {
  username: [
    {
      validator: (value) => value.trim() !== '',
      message: 'Username is required'
    },
    {
      validator: (value) => value.length >= 3,
      message: 'Username must be at least 3 characters'
    }
  ],
  password: [
    {
      validator: (value) => value.trim() !== '',
      message: 'Password is required'
    },
    {
      validator: (value) => value.length >= 6,
      message: 'Password must be at least 6 characters'
    }
  ]
};

3. 在组件中使用表单验证的 Hook

在组件中，你可以使用 useFormValidation Hook 来处理表单验证逻辑。

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="username">Username:</label>
      <input id="username" v-model="fields.username.value" @blur="validateField('username', fields.username.value)" />
      <span v-if="errors.username">{{ errors.username }}</span>
    </div>
    <div>
      <label for="password">Password:</label>
      <input id="password" type="password" v-model="fields.password.value" @blur="validateField('password', fields.password.value)" />
      <span v-if="errors.password">{{ errors.password }}</span>
    </div>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { ref } from 'vue';
import { useFormValidation } from './useFormValidation';

export default {
  setup() {
    const fields = {
      username: ref(''),
      password: ref('')
    };

    const validationRules = {
      username: [
        {
          validator: (value) => value.trim() !== '',
          message: 'Username is required'
        },
        {
          validator: (value) => value.length >= 3,
          message: 'Username must be at least 3 characters'
        }
      ],
      password: [
        {
          validator: (value) => value.trim() !== '',
          message: 'Password is required'
        },
        {
          validator: (value) => value.length >= 6,
          message: 'Password must be at least 6 characters'
        }
      ]
    };

    const { errors, validateField, validateForm } = useFormValidation(fields, validationRules);

    function submitForm() {
      if (validateForm()) {
        console.log('Form submitted successfully');
      } else {
        console.log('Form has errors');
      }
    }

    return {
      fields,
      errors,
      validateField,
      submitForm
    };
  }
};
</script>

4. 在 <script setup> 语法中使用表单验证的 Hook

在 <script setup> 语法中，使用 useFormValidation Hook 更加简洁。

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="username">Username:</label>
      <input id="username" v-model="fields.username.value" @blur="validateField('username', fields.username.value)" />
      <span v-if="errors.username">{{ errors.username }}</span>
    </div>
    <div>
      <label for="password">Password:</label>
      <input id="password" type="password" v-model="fields.password.value" @blur="validateField('password', fields.password.value)" />
      <span v-if="errors.password">{{ errors.password }}</span>
    </div>
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { ref } from 'vue';
import { useFormValidation } from './useFormValidation';

const fields = {
  username: ref(''),
  password: ref('')
};

const validationRules = {
  username: [
    {
      validator: (value) => value.trim() !== '',
      message: 'Username is required'
    },
    {
      validator: (value) => value.length >= 3,
      message: 'Username must be at least 3 characters'
    }
  ],
  password: [
    {
      validator: (value) => value.trim() !== '',
      message: 'Password is required'
    },
    {
      validator: (value) => value.length >= 6,
      message: 'Password must be at least 6 characters'
    }
  ]
};

const { errors, validateField, validateForm } = useFormValidation(fields, validationRules);

function submitForm() {
  if (validateForm()) {
    console.log('Form submitted successfully');
  } else {
    console.log('Form has errors');
  }
}
</script>

5. 处理动态表单字段

如果你的表单字段是动态生成的，你可以使用 reactive 来管理表单字段和验证规则。

const fields = reactive({
  username: '',
  password: ''
});

const validationRules = reactive({
  username: [
    {
      validator: (value) => value.trim() !== '',
      message: 'Username is required'
    },
    {
      validator: (value) => value.length >= 3,
      message: 'Username must be at least 3 characters'
    }
  ],
  password: [
    {
      validator: (value) => value.trim() !== '',
      message: 'Password is required'
    },
    {
      validator: (value) => value.length >= 6,
      message: 'Password must be at least 6 characters'
    }
  ]
});

6. 处理异步验证

如果验证逻辑需要异步操作（如检查用户名是否已存在），你可以在验证规则中使用 Promise。

const validationRules = {
  username: [
    {
      validator: async (value) => {
        const response = await fetch(`https://api.example.com/check-username?username=${value}`);
        const data = await response.json();
        return data.available;
      },
      message: 'Username is already taken'
    }
  ]
};

总结

• 通过自定义 Hook useFormValidation，你可以封装表单验证逻辑，使其在多个组件中复用。
• useFormValidation Hook 可以处理表单字段的验证、管理错误状态、以及提供验证方法等。
• 在组件中，你可以像使用普通函数一样使用 useFormValidation Hook，返回的响应式数据和方法可以直接在模板中使用。
• 在 <script setup> 语法中，使用 useFormValidation Hook 更加简洁。
• 可以通过添加异步验证逻辑来处理复杂的验证场景。