后台-表单验证-cv

最新推荐文章于 2024-01-18 11:14:52 发布

codingFunTime

最新推荐文章于 2024-01-18 11:14:52 发布

阅读量73

点赞数

分类专栏： key后台项目文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/hktkkkk/article/details/131382616

版权

key后台项目专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章介绍了如何在前端实现通用的表单验证方法，包括正整数、数字范围、邮箱和电话号码的验证。同时，通过柯里化技术创建了一个自定义验证函数`formValidate`，该函数可以根据输入的验证规则和错误信息生成具体的验证方法，简化了表单验证的代码编写。示例展示了在页面中如何使用这些验证规则。

摘要由CSDN通过智能技术生成

实现通用的表单验证方法：

utils/validateItem.ts

// 应为正整数，且范围为1 ~ 99999
export function oneTo99999TestFlag(str) {
	const reg = /^([1-9]{1}[0-9]{0,4})$/
	return reg.test(str)
}

// 应为数字，且范围为1 ~ 99999(可小数)
export function oneTo99999DecimalTestFlag(str) {
	const reg = /99999|(^[1-9]{1}[0-9]{0,3}[0-8]{0,1}(\.\d{1,2})?$)/
	return reg.test(str)
}

// 应为数字，且范围为0 ~ 99999999.99且大于0
export function zeroTo99999999DecimalTestFlag(str) {
	const reg = /(^[1-9](\d{0,7})(\.\d{1,2})?$)|(^0(\.\d{1,2})$)/
	return reg.test(str)
}

// 请输入正确的联系邮箱
export function emailTestFlag(str) {
	const reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
	return reg.test(str)
}

// 请输入正确的11位数联系电话
export function phoneTestFlag(str) {
	const reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[\d]))\d{8}$/
	return reg.test(str)
}

增加一个柯里化方法，用来生成表单验证函数：

utils/validate.ts

import * as Validates from './validateItem'
// 生成自定义校验函数
export const formValidate = (key, msg, isRequired?) => (rule, value, cb) => {
	if (Validates[key](value)) {
		cb()
	} else {
		if (isRequired == false && !value) {
			cb()
		} else {
			cb(new Error(msg))
		}
	}
}

页面使用

非必填传false

	import { formValidate } from '@/utils/validate'


const abilityRules = ref<FormRules>({
		phoneNumber: [
			{
				required: true,
				message: '请输入联系电话',
				trigger: 'blur',
			},
			{
				validator: formValidate('phoneTestFlag', '请输入正确的11位数联系电话'),
				trigger: ['blur', 'change'],
			},
		],
		email: [
			{
				required: true,
				message: '请输入联系邮箱',
				trigger: 'blur',
			},
			{
				validator: formValidate('emailTestFlag', '请输入正确的联系邮箱'),
				trigger: ['blur', 'change'],
			},
		],

		fixedAssets: [
			{
				validator: formValidate('oneTo99999DecimalTestFlag', '应为数值，且范围为1 ~ 99999', false),
				trigger: ['blur', 'change'],
			},
		],
		lastYearTotalSales: [
			{
				validator: formValidate('oneTo99999DecimalTestFlag', '应为数值，且范围为1 ~ 99999', false),
				trigger: ['blur', 'change'],
			},
		],
		employeeCount: [
			{
				validator: formValidate('oneTo99999TestFlag', '应为正整数，且范围为1 ~ 99999', false),
				trigger: ['blur', 'change'],
			},
		],
	})