u

code/base-project/base-app/src/hooks/useFormValidation.ts

@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react'
+
+// 定义表单字段的验证规则类型
+interface ValidationRule {
+  required?: boolean
+  pattern?: RegExp
+  minLength?: number
+  maxLength?: number
+  validator?: (value: string) => boolean // 自定义验证规则
+  message?: string // 自定义消息
+}
+
+// 定义返回的数据结构
+interface FormValidationResult {
+  [key: string]: {
+    isValid: boolean
+    errorMessage: string
+  }
+}
+
+function useFormValidation(values: Record<string, string>, rules: Record<string, ValidationRule>, autoValidate = false) {
+  const [validationResults, setValidationResults] = useState<FormValidationResult>({})
+  const [isValid, setIsValid] = useState<boolean>(true) // 用于保存整体表单是否有效
+
+  // 验证逻辑
+  const validate = () => {
+    const newValidationResults: FormValidationResult = {}
+
+    for (const field in rules) {
+      const value = values[field] || ''
+      const fieldRules = rules[field]
+      let isValid = true
+      let errorMessage = ''
+
+      // 默认错误消息的函数
+      const getDefaultMessage = (type: string) => {
+        return `${field} 是${type}`
+      }
+
+      // 验证 required
+      if (fieldRules.required && !value) {
+        isValid = false
+        errorMessage = fieldRules.message || getDefaultMessage('必填项')
+      }
+
+      // 验证 pattern
+      if (isValid && fieldRules.pattern && !fieldRules.pattern.test(value)) {
+        isValid = false
+        errorMessage = fieldRules.message || '格式不正确'
+      }
+
+      // 验证 minLength
+      if (isValid && fieldRules.minLength && value.length < fieldRules.minLength) {
+        isValid = false
+        errorMessage = fieldRules.message || `最少输入 ${fieldRules.minLength} 个字符`
+      }
+
+      // 验证 maxLength
+      if (isValid && fieldRules.maxLength && value.length > fieldRules.maxLength) {
+        isValid = false
+        errorMessage = fieldRules.message || `最多输入 ${fieldRules.maxLength} 个字符`
+      }
+
+      // 自定义验证
+      if (isValid && fieldRules.validator && !fieldRules.validator(value)) {
+        isValid = false
+        errorMessage = fieldRules.message || '自定义验证未通过'
+      }
+
+      newValidationResults[field] = { isValid, errorMessage }
+    }
+
+    setValidationResults(newValidationResults)
+
+    // 更新整体表单是否有效
+    const allValid = !Object.values(newValidationResults).some(result => !result.isValid)
+    setIsValid(allValid)
+
+    // 返回是否验证通过（返回true或false）
+    return allValid
+  }
+
+  // 如果开启自动验证
+  useEffect(() => {
+    if (autoValidate) {
+      validate()
+    }
+  }, [values, autoValidate])
+
+  return {
+    validationResults,
+    isValid,
+    validate,
+  }
+}
+
+export default useFormValidation