import { ref } from 'vue'; import type { Ref } from 'vue'; import { repoPathRegExp, repoPathSuffix, repoPathMatch, repoNameRegExp, tagNameHyphenRegExp, tagNamePrefixHeadsRegExp, tagNamePrefixRemotesRegExp, tagNameSuffixLockRegExp, tagNameRegExp } from '@/utils/regex'; import { checkRepoName } from '@/api/repo'; import { reqCatch } from '@/utils/catch'; function asyncDebounce(fn: Function, wait: number) { // 异步函数版debounce,直接使用lodash的有问题 let timerId: any = null; return function (this: any, ...params: any[]) { return new Promise((resolve, reject) => { clearTimeout(timerId); timerId = setTimeout(async () => { try { const res = await fn.apply(this, params); resolve(res); } catch (err) { reject(err); } }, wait); }); }; } interface DynamicValidator { (validateRules: Record): { expected: number; // 期望值 validVector: Ref; // 当前根据验证情况获取的值 }; } // 动态的表单验证,能实时监控表单的验证情况,每个字段规则不能超过32条 export const useDynamicValidator: DynamicValidator = (validateRules, initValue?) => { const keyBitMap = new Map(); const validVector = ref(0); // hack:监听校验情况按钮置灰 const suffix = (rule: any, value: string, callback: Function) => { const keySeq = keyBitMap.get(rule.field); if (typeof keySeq !== 'undefined') validVector.value |= keySeq; return callback(); }; const prefix = (rule: any, value: string, callback: Function) => { const keySeq = keyBitMap.get(rule.field); if (typeof keySeq !== 'undefined') validVector.value &= ~keySeq; return callback(); }; let index = 0; let expected = 0; for (const name in validateRules) { const arr = validateRules[name]; keyBitMap.set(name, 1 << index); expected += 1 << index; ++index; arr.unshift({ validator: prefix }); arr.push({ validator: suffix }); } !initValue ? (validVector.value = expected) : ''; // 初始化不置灰 return { expected, validateRules, validVector }; }; // 项目名称的校验 export const repoNameValidator = () => [ { required: true, message: '项目名称不能为空' }, { pattern: repoNameRegExp, message: '项目名称应当由中文、字母、数字、下划线(_)、点(.)和连字符(-)组成,必须以字母、数字、中文、点(.)或下划线(_)开头,且长度不得超过 100 个字符。' }, { pattern: repoPathSuffix, message: '项目名称不能以.wiki,.git,.atom结尾' } ]; interface RepoPathParams { repoData: any; id: string | undefined; [propName: string]: any; } export const repoNamePathValidator = ({ repoData, id: selfId, repoId }: RepoPathParams) => { const { namepath } = repoData; const emptyCheck = (rule: object, value: string, callback: Function) => callback(namepath.id && namepath.repoPath ? undefined : new Error('项目路径不能为空')); const repoPathValidate = async (rule: object, value: object) => { const { repoPath, id } = value; if (!repoPathRegExp.test(repoPath)) { return Promise.reject( new Error( 'Path的长度必须在1到100个字符之间,只能包含字母(a-z,A-Z)、数字(0-9)、连字符(-)、下划线(_)和点(.),不区分大小写,不能以连字符和(.)开头' ) ); } if (!repoPathSuffix.test(repoPath)) { return Promise.reject(new Error('Path不能以.wiki,.git,.atom结尾')); } if (!repoPathMatch.test(repoPath)) { return Promise.reject( new Error( 'Path不能包含如下关键字:codehub,dashboard,users,profile,merge_requests,issues,milestones,settings,wiki,home,tree,chart,blob,issues-create,review,release,tags,branches,commits,compare,newmergefrom,network,memberlist,labels,setting,files' ) ); } return Promise.resolve(''); }; return [{ required: true, validator: emptyCheck }, { asyncValidator: asyncDebounce(repoPathValidate, 200) }]; }; // 项目路径的校验 export const repoPathValidator = ({ repoData, id }: RepoPathParams) => { const emptyCheck = (rule: object, value: string, callback: Function) => callback(repoData.namespace.id && repoData.repoPath ? undefined : new Error('项目路径不能为空')); async function isPathUsed(rule: any, value: string) { // 项目路径是否重复验证 const { namespace } = repoData; const params = { name: value, namespace_id: namespace.id === id ? null : namespace.id }; const { data } = await reqCatch(checkRepoName, params); return data && data.data.status ? Promise.resolve('') : Promise.reject('path已被使用,请重新输入!'); } return [ { required: true, validator: emptyCheck }, { pattern: repoPathRegExp, message: 'Path的长度必须在1到100个字符之间,只能包含字母(a-z,A-Z)、数字(0-9)、连字符(-)、下划线(_)和点(.),不区分大小写,不能以连字符和(.)开头' }, { pattern: repoPathSuffix, message: 'Path不能以.wiki,.git,.atom结尾' }, { pattern: repoPathMatch, message: 'Path不能包含如下关键字:codehub,dashboard,users,profile,merge_requests,issues,milestones,settings,wiki,home,tree,chart,blob,issues-create,review,release,tags,branches,commits,compare,newmergefrom,network,memberlist,labels,setting,files' }, { asyncValidator: asyncDebounce(isPathUsed, 100) } ]; }; // tag名称的校验 export const tagNameValidator = () => [ { required: true, message: 'tag名称不能为空' }, { pattern: tagNameHyphenRegExp, message: '格式错误,请勿以"-"开头' }, { pattern: tagNamePrefixHeadsRegExp, message: '格式错误,请勿以"refs/heads/"开头' }, { pattern: tagNamePrefixRemotesRegExp, message: '格式错误,请勿以"refs/remotes/"开头' }, { pattern: tagNameSuffixLockRegExp, message: '格式错误,请勿以"/"或"."或".lock"结尾' }, { pattern: tagNameRegExp, message: '格式错误,名称由中文、字母、数字_.-和/组成;且/不能连续,最多可以包含 50 个字符' } ]; // 邮箱校验 export const checkEmailValidator = (rule: any, value: any, callback: any) => { if (!value) { return callback(new Error('邮箱不能为空')); } // 根据 value 正则校验邮箱格式,成功返回回调callback const reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; if (!reg.test(value)) { return callback(new Error('邮箱格式不正确')); } callback(); }; // 手机电话校验 export const checkPhoneValidator = (rule: any, value: any, callback: any) => { if (!value) { return callback(new Error('电话不能为空')); } // 根据 value 正则校验手机或者电话格式,成功返回回调callback const reg = /^1[3-9]\d{9}$/; if (!reg.test(value)) { return callback(new Error('电话格式不正确')); } callback(); };