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 个字符' } ];