diff --git a/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts b/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts index fd07fb45ee..08a5067cb3 100644 --- a/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts +++ b/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts @@ -781,7 +781,7 @@ export default { 初始化配置信息: 'Initialize configuration information', 复制命令: 'Command Copy', '仅支持字母,数字,\'-\',\'_\',\'.\' 及 \'/\' 且需以字母数字开头和结尾': 'Only supports letters, numbers, \'-\', \'_\', \'.\' and \'/\' characters, and must start and end with a letter or number', - '需以字母数字开头和结尾,可包含 \'-\',\'_\',\'.\' 和字母数字': 'Must start and end with a letter or number, and may include \'-\', \'_\', \'.\', and alphanumeric characters', + '需以字母、数字开头和结尾,可包含 \'-\',\'_\',\'.\' 和字母数字及负数': 'Must start and end with a letter or number, can include \'-\', \'_\', \'.\', and alphanumeric characters, as well as negative numbers', // 公共组件 页面不存在: 'Page does not exist', diff --git a/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts b/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts index 85795104d4..aef0b05fb4 100644 --- a/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts +++ b/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts @@ -787,7 +787,7 @@ export default { 初始化配置信息: '初始化配置信息', 复制命令: '复制命令', '仅支持字母,数字,\'-\',\'_\',\'.\' 及 \'/\' 且需以字母数字开头和结尾': '仅支持字母,数字,\'-\',\'_\',\'.\' 及 \'/\' 且需以字母数字开头和结尾', - '需以字母数字开头和结尾,可包含 \'-\',\'_\',\'.\' 和字母数字': '需以字母数字开头和结尾,可包含 \'-\',\'_\',\'.\' 和字母数字', + '需以字母、数字开头和结尾,可包含 \'-\',\'_\',\'.\' 和字母数字及负数': '需以字母、数字开头和结尾,可包含 \'-\',\'_\',\'.\' 和字母数字及负数', // 公共组件 页面不存在: '页面不存在', diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/add-label.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/add-label.vue index 3fb225e2b9..e846a1cf2e 100644 --- a/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/add-label.vue +++ b/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/add-label.vue @@ -30,7 +30,7 @@ v-model.trim="item.value" @blur="validateValue(index)" /> - {{ $t("需以字母数字开头和结尾,可包含 '-','_','.' 和字母数字") }} + {{ $t("需以字母、数字开头和结尾,可包含 '-','_','.' 和字母数字及负数") }}
@@ -60,7 +60,8 @@ const isAllValid = () => { let allValid = true; labelArr.value.forEach((item, index) => { - validateKey(index); + // 批量检测时,展示先校验失败的错误信息 + keyValidateReg.test(item.key) ? validateValue(index) : validateKey(index); }); allValid = !showErrorKeyValidation.value.includes(true) && !showErrorValueValidation.value.includes(true); return allValid; @@ -68,13 +69,16 @@ // 验证key const validateKey = (index: number) => { showErrorKeyValidation.value[index] = !keyValidateReg.test(labelArr.value[index].key); - validateValue(index); + if (showErrorValueValidation.value[index]) { + showErrorValueValidation.value[index] = false; + } }; // 验证value const validateValue = (index: number) => { - // 只在key验证通过才显示value校验结果。如果value校验失败时去改key值,并且key值改变后也校验失败,只展示key的校验结果 - showErrorValueValidation.value[index] = - keyValidateReg.test(labelArr.value[index].key) && !valueValidateReg.test(labelArr.value[index].value); + showErrorValueValidation.value[index] = !valueValidateReg.test(labelArr.value[index].value); + if (showErrorKeyValidation.value[index]) { + showErrorKeyValidation.value[index] = false; + } }; // 添加项目 const addItem = () => { diff --git a/bcs-services/bcs-bscp/ui/src/views/space/groups/components/group-edit-form.vue b/bcs-services/bcs-bscp/ui/src/views/space/groups/components/group-edit-form.vue index 2cb5f1a377..35df89b5cf 100644 --- a/bcs-services/bcs-bscp/ui/src/views/space/groups/components/group-edit-form.vue +++ b/bcs-services/bcs-bscp/ui/src/views/space/groups/components/group-edit-form.vue @@ -39,16 +39,17 @@
- - - {{ $t("仅支持字母,数字,'-','_','.' 及 '/' 且需以字母数字开头和结尾") }} - +
+ +
+ {{ $t("仅支持字母,数字,'-','_','.' 及 '/' 且需以字母数字开头和结尾") }} +
+
+ @change="validateValue(index)" + @blur="validateValue(index)"> - - {{ $t("需以字母数字开头和结尾,可包含 '-','_','.' 和字母数字") }} - +
+ {{ $t("需以字母、数字开头和结尾,可包含 '-','_','.' 和字母数字及负数") }} +
{ const { op } = item; if (op === '') return (allValid = false); - validateKey(index); + // 批量检测时,展示先校验失败的错误信息 + keyValidateReg.test(item.key) ? validateValue(index) : validateKey(index); }); allValid = !showErrorKeyValidation.value.includes(true) && !showErrorValueValidation.value.includes(true); return allValid; @@ -265,21 +268,23 @@ // 验证key const validateKey = (index: number) => { showErrorKeyValidation.value[index] = !keyValidateReg.test(formData.value.rules[index].key); - validateValue(index); + if (showErrorValueValidation.value[index]) { + showErrorValueValidation.value[index] = false; + } }; // 验证value const validateValue = (index: number) => { - // 只在key验证通过才显示value校验结果。如果value校验失败时去改key值,并且key值改变后也校验失败,只展示key的校验结果 if (Array.isArray(formData.value.rules[index].value)) { - const valueArrValidation = (formData.value.rules[index].value as string[]).every((item: string) => - valueValidateReg.test(item), - ); + const valueArrValidation = (formData.value.rules[index].value as string[]).every((item: string) => { + return valueValidateReg.test(item); + }); showErrorValueValidation.value[index] = - keyValidateReg.test(formData.value.rules[index].key) && !valueArrValidation; + !valueArrValidation || !((formData.value.rules[index].value as string[]).length > 0); } else { - showErrorValueValidation.value[index] = - keyValidateReg.test(formData.value.rules[index].key) && - !valueValidateReg.test(`${formData.value.rules[index].value}`); + showErrorValueValidation.value[index] = !valueValidateReg.test(`${formData.value.rules[index].value}`); + } + if (showErrorKeyValidation.value[index]) { + showErrorKeyValidation.value[index] = false; } change(); }; @@ -308,7 +313,7 @@ .rule-config { position: relative; display: flex; - align-items: center; + align-items: flex-start; justify-content: space-between; position: relative; margin-top: 15px; @@ -334,9 +339,12 @@ align-items: center; justify-content: space-between; width: 38px; + height: 32px; font-size: 14px; color: #979ba5; - cursor: pointer; + .bk-bscp-icon { + cursor: pointer; + } i:hover { color: #3a84ff; } @@ -363,16 +371,14 @@ } } .error-msg { - position: absolute; - left: 0; - bottom: -14px; font-size: 12px; - line-height: 1; - white-space: nowrap; + line-height: 14px; + white-space: normal; + word-wrap: break-word; color: #ea3636; animation: form-error-appear-animation 0.15s; - &.is--value { - left: 45.5%; + &.is--key { + white-space: nowrap; } } @keyframes form-error-appear-animation {