Naive UI表单校验封装

自律的蜗牛

已于 2023-11-09 16:14:45 修改

阅读量1.1k

点赞数

文章标签： ui javascript vue.js

于 2023-10-13 14:38:43 首次发布

本文链接：https://blog.youkuaiyun.com/ben_grf/article/details/133810164

版权

本文介绍了如何在项目中创建一个utils文件，封装通用的表单验证函数，如密码验证，以及如何使用这些函数在NaiveUI的FormItemRule中定义并应用验证规则。示例展示了如何在form组件中调用验证方法，确保不同字段遵循特定的规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

所有的表单校验可以封装到一个方法里面统一处理

1. 创建utils文件，写入方法

密码校验的一个小方法，用不到的可以忽略

common.ts

// 密码对应的正则格式
const passWordValidator = (str: string) => {
  const pattern =
    /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*)(?=.*[`~!@#$%^&*()_\-+=<>.?:"{}/[\]';,\\|].*).{8,16}$/
  return pattern.test(str)
}

validateRules.ts

import { FormItemRule } from 'naive-ui'
import { passWordValidator } from '@/utils/common'

export const validateRules = (options: Array<string>) => {
  const rulesCollection: any = {
    age: [
      {
        required: true,
        validator(rule: FormItemRule, value: string) {
          if (!value) {
            return new Error('需要年龄')
          } else if (!/^\d*$/.test(value)) {
            return new Error('年龄应该为整数')
          } else if (Number(value) < 18) {
            return new Error('年龄应该超过十八岁')
          }
          return true
        },
        trigger: ['input', 'blur']
      }
    ],
    password: [
      {
        required: true,
        trigger: ['blur', 'input', 'change'],
        validator(rule: FormItemRule, value: string) {
          if (!passWordValidator(value)) {
            return new Error('请输入包含大写字母、小写字母、数字及特殊字符的8-16位密码')
          }
          return true
        }
      }
    ],
    phone: [
      {
        required: true,
        trigger: ['blur', 'input', 'change'],
        validator(rule: FormItemRule, value: string) {
          //正则校验手机号/^(?:(?:\+|00)86)?1\d{10}$/
          if (!/^(?:(?:\+|00)86)?1\d{10}$/.test(value)) {
            return new Error('手机号码格式不正确')
          }
          console.log('value', value)
          return true
        }
      }
    ],
    name: [
      {
        required: true,
        trigger: ['blur', 'input', 'change'],
        message: '请输入姓名'
      }
    ],
    companyConcatName: [
      {
        required: true,
        trigger: ['blur', 'input', 'change'],
        message: '请输入姓名'
      }
    ],
    username: [
      {
        required: true,
        trigger: ['blur', 'input', 'change'],
        validator(rule: FormItemRule, value: string) {
          console.log('valuemmmmmm', value)

          if (value && (value + '').length > 20) {
            return new Error('用户名长度不能超过20')
          } else if (
            (value && value.length === 0) ||
            value === undefined ||
            value === ''
          ) {
            console.log('valuevalue', value)
            return new Error('用户名不能为空')
          }
          return true
        }
      }
    ]
  }
  const rulesData: any = {}
  Object.keys(rulesCollection).forEach((key, value) => {
    if (options.indexOf(key) > -1) {
      rulesData[key] = rulesCollection[key]
    }
  })
  return rulesData
}

 <n-form ref="formRef" :rules="rules" :model="model"></n-form>

import { validateRules } from '@/utils/validateRules'

const rules = validateRules(['companyConcatName'])

formRef.value?.validate(async (errors: any) => {})