From 4801ce63a478ad3c547dd9d1ceb0988cbbc20e00 Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Mon, 13 May 2024 16:02:15 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-3468=20fix:=20=E7=94=A8=E6=88=B7=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9username=20?=
 =?UTF-8?q?=E6=A0=A1=E9=AA=8C=E8=A7=84=E5=88=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/js/validate.js          | 15 +++++++++++++++
 .../src/components/common/rightBox/agentBox.vue   |  4 ++--
 .../components/common/rightBox/alertRuleBox.vue   |  4 ++--
 .../common/rightBox/alertSilenceBox.vue           |  4 +++-
 .../common/rightBox/asset/assetDiscoveryBox.vue   |  4 ++--
 .../components/common/rightBox/assetMetaBox.vue   |  6 +++++-
 .../components/common/rightBox/assetMetaGroup.vue | 11 +++++++++--
 .../common/rightBox/chart/chartRightBox.vue       |  8 ++++++--
 .../common/rightBox/dashboardTempBox.vue          |  4 +++-
 .../src/components/common/rightBox/dcBox.vue      |  4 ++--
 .../common/rightBox/editEndpointBoxNew.vue        |  6 +++---
 .../src/components/common/rightBox/moduleBox.vue  |  4 ++--
 .../src/components/common/rightBox/panelBox.vue   |  8 +++++---
 .../src/components/common/rightBox/projectBox.vue |  4 ++--
 .../components/common/rightBox/recordRuleBox.vue  |  4 ++--
 .../common/rightBox/snmpCredentialBox.vue         |  4 +++-
 16 files changed, 66 insertions(+), 28 deletions(-)

diff --git a/nezha-fronted/src/components/common/js/validate.js b/nezha-fronted/src/components/common/js/validate.js
index 75705e0b2..9f6d7b99d 100644
--- a/nezha-fronted/src/components/common/js/validate.js
+++ b/nezha-fronted/src/components/common/js/validate.js
@@ -107,6 +107,21 @@ export function noSpecialChar (rule, value, callback) {
   }, 100)
 }
 
+// 用户名只允许使用字母、数字和符号
+export function nameValidate (rule, value, callback) {
+  const reg = /^[a-zA-Z0-9!@~\-=`#\$%^&\*\(\)\+\{\}\[\]\\|:;'\"<>,\./\?_]*$/
+  setTimeout(() => {
+    if (!value) {
+      callback(new Error(vm.$t('validate.required')))
+    }
+    if (reg.test(value)) {
+      callback()
+    } else {
+      callback(new Error(vm.$t('validate.nameValidate')))
+    }
+  }, 100)
+}
+
 export function latlng (rule, value, callback) {
   const lngReg = /^[\-\+]?(0?\d{1,2}\.\d{1,7}|1[0-7]?\d{1}\.\d{1,7}|180\.0{1,7}|0?\d{1,2}|1[0-7]?\d{1}|180)$/ // 经度正则验证
   const latReg = /^[\-\+]?([1-8]?\d{1}\.\d{1,7}|90\.0{1,7}|[1-8]?\d{1}|90)$/ // 纬度正则验证
diff --git a/nezha-fronted/src/components/common/rightBox/agentBox.vue b/nezha-fronted/src/components/common/rightBox/agentBox.vue
index b9ce5a1a5..885229aec 100644
--- a/nezha-fronted/src/components/common/rightBox/agentBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/agentBox.vue
@@ -88,7 +88,7 @@
   </div>
 </template>
 <script>
-import { host, noSpecialChar, port } from '../../common/js/validate'
+import { host, nameValidate, port } from '../../common/js/validate'
 import { agent2 } from '@/components/common/js/constants'
 import editRigthBox from '../mixin/editRigthBox'
 export default {
@@ -107,7 +107,7 @@ export default {
         ],
         name: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { validator: noSpecialChar, trigger: 'blur' }
+          { validator: nameValidate, trigger: 'blur' }
         ],
         host: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' },
diff --git a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
index d0806951a..2e9e57a02 100644
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
@@ -488,7 +488,7 @@
 <script>
 import chartDataFormat from '../../chart/chartDataFormat'
 import promqlInput from '../../page/dashboard/explore/promqlInput'
-import { noSpecialChar, nzNumber } from '../js/validate'
+import { nameValidate, nzNumber } from '../js/validate'
 import editRigthBox from '../mixin/editRigthBox'
 import richTextEditor from '@/components/chart/richTextEditor'
 import promqlInputMixin from '@/components/common/mixin/promqlInput'
@@ -566,7 +566,7 @@ export default {
       rules: {
         name: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { validator: noSpecialChar, trigger: 'change' }
+          { validator: nameValidate, trigger: 'blur' }
         ],
         expr: [
           { required: true, message: this.$t('validate.required'), trigger: 'change' },
diff --git a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
index 6a7a880db..a7ac0941a 100644
--- a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
@@ -129,6 +129,7 @@ import bus from '@/libs/bus'
 import { sameLabels } from '@/components/common/js/constants'
 // import selectAlertSilence from '../alert/selectAlertSilence'
 import editRigthBox from '../mixin/editRigthBox'
+import { nameValidate } from '@/components/common/js/validate'
 export default {
   name: 'alertSilenceBox',
   components: {
@@ -193,7 +194,8 @@ export default {
           { validator: validate, trigger: 'change' }
         ],
         name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: nameValidate, trigger: 'blur' }
         ]
       },
       rangeTime: '',
diff --git a/nezha-fronted/src/components/common/rightBox/asset/assetDiscoveryBox.vue b/nezha-fronted/src/components/common/rightBox/asset/assetDiscoveryBox.vue
index 6fcd98325..9a24377ca 100644
--- a/nezha-fronted/src/components/common/rightBox/asset/assetDiscoveryBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/asset/assetDiscoveryBox.vue
@@ -113,7 +113,7 @@
   </div>
 </template>
 <script>
-import { noSpecialChar, arrLength } from '@/components/common/js/validate'
+import { nameValidate, noSpecialChar, arrLength } from '@/components/common/js/validate'
 import editRigthBox from '@/components/common/mixin/editRigthBox'
 export default {
   name: 'agentBox',
@@ -126,7 +126,7 @@ export default {
       rules: {
         name: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { validator: noSpecialChar, trigger: 'blur' }
+          { validator: nameValidate, trigger: 'blur' }
         ],
         subnet: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
diff --git a/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue b/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
index 6247cac20..761345625 100644
--- a/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
@@ -180,6 +180,7 @@
 <script>
 import assetTagEx from '../../page/asset/components/assetTagEx'
 import editRigthBox from '../mixin/editRigthBox'
+import { nameValidate } from '@/components/common/js/validate'
 export default {
   name: 'assetLabelBox',
   props: {
@@ -214,7 +215,10 @@ export default {
       },
       groupData: [],
       rules: {
-        name: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }],
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: nameValidate, trigger: 'blur' }
+        ],
         metaKey: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }, { pattern: /[a-zA-Z_][a-zA-Z0-9_]*/, message: this.$t('overall.ASCIIKey'), trigger: 'change' }],
         groupId: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }],
         type: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }]
diff --git a/nezha-fronted/src/components/common/rightBox/assetMetaGroup.vue b/nezha-fronted/src/components/common/rightBox/assetMetaGroup.vue
index 06cc9f264..30449aaab 100644
--- a/nezha-fronted/src/components/common/rightBox/assetMetaGroup.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetMetaGroup.vue
@@ -12,8 +12,8 @@
       <!-- begin--表单-->
       <div class="right-box__container">
         <div class="container__form">
-          <el-form label-width="120px"  :model="editMetaGroup" label-position = "top" ref="editMetaGroupForm">
-            <el-form-item :label='$t("overall.name")' prop="name" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
+          <el-form label-width="120px" :model="editMetaGroup" label-position = "top" ref="editMetaGroupForm" :rules="rules">
+            <el-form-item :label='$t("overall.name")' prop="name">
               <el-input placeholder="" maxlength="64" show-word-limit v-model="editMetaGroup.name" size="small" id="editMetaGroup-box-input-name"></el-input>
             </el-form-item>
             <el-form-item :label='$t("overall.remark")' prop="remark">
@@ -42,6 +42,7 @@
 
 <script>
 import editRigthBox from '../mixin/editRigthBox'
+import { nameValidate } from '@/components/common/js/validate'
 export default {
   name: 'assetMetaGroup',
   props: {
@@ -58,6 +59,12 @@ export default {
       },
       rightBox: { // 面板弹出框相关
         show: false
+      },
+      rules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: nameValidate, trigger: 'blur' }
+        ]
       }
     }
   },
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index 29426531c..a96350262 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -147,6 +147,7 @@ import lodash from 'lodash'
 import bus from '@/libs/bus'
 import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
 import { initColor } from '@/components/chart/chart/tools'
+import { nameValidate } from '@/components/common/js/validate'
 const rz = {
   methods: {
     rz (e) {
@@ -206,8 +207,11 @@ export default {
       ],
       panelName: '',
       rules: {
-        name: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }],
-        panelName: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }]
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: nameValidate, trigger: 'blur' }
+        ],
+        panelName: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
       }
     }
   },
diff --git a/nezha-fronted/src/components/common/rightBox/dashboardTempBox.vue b/nezha-fronted/src/components/common/rightBox/dashboardTempBox.vue
index f32db2883..eaab3f187 100644
--- a/nezha-fronted/src/components/common/rightBox/dashboardTempBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dashboardTempBox.vue
@@ -90,6 +90,7 @@
 <script>
 import bus from '@/libs/bus'
 import editRigthBox from '../mixin/editRigthBox'
+import { nameValidate } from '@/components/common/js/validate'
 export default {
   props: {
     from: String
@@ -100,7 +101,8 @@ export default {
       url: '/visual/dashboard/fromTmpl',
       rules: {
         name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: nameValidate, trigger: 'blur' }
         ],
         tmplId: [
           { required: true, message: this.$t('validate.required'), trigger: 'change' }
diff --git a/nezha-fronted/src/components/common/rightBox/dcBox.vue b/nezha-fronted/src/components/common/rightBox/dcBox.vue
index 5fd439b32..912e08267 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -69,7 +69,7 @@
 <script>
 import latlngPicker from '../latlngPicker'
 import editRigthBox from '../mixin/editRigthBox'
-import { noSpecialChar, latlng } from '@/components/common/js/validate'
+import { nameValidate, latlng } from '@/components/common/js/validate'
 
 const latitudeNum = /^[\-\+]?([1-8]?\d{1}\.\d{1,7}|90\.0{1,7}|[1-8]?\d{1}|90)$/ // 纬度正则验证
 const longitudeNum = /^[\-\+]?(0?\d{1,2}\.\d{1,7}|1[0-7]?\d{1}\.\d{1,7}|180\.0{1,7}|0?\d{1,2}|1[0-7]?\d{1}|180)$/ // 经度正则验证
@@ -90,7 +90,7 @@ export default {
       rules: {
         name: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { validator: noSpecialChar, trigger: 'blur' }
+          { validator: nameValidate, trigger: 'blur' }
         ],
         lnglat: [
           { required: true, message: this.$t('validate.required'), trigger: 'change' },
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
index 11ad43bfb..6a737bf3e 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
@@ -766,7 +766,7 @@
 </template>
 
 <script>
-import { noSpecialChar, port, arrLength } from '../js/validate'
+import { nameValidate, port, arrLength } from '../js/validate'
 import pipelineSelect from './pipelineSelect'
 import selectWalk from '../popBox/selectWalk'
 import editRigthBox from '../mixin/editRigthBox'
@@ -843,8 +843,8 @@ export default {
       showAllBasicOption: false,
       rules: {
         name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' },
-          { validator: this.optionType === 'batch' ? '' : noSpecialChar, trigger: 'change' },
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: this.optionType === 'batch' ? '' : nameValidate, trigger: 'blur' },
           { max: 64, message: this.$t('config.system.link.nameMaxLength'), trigger: 'blur' }
         ],
         assetId: [
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 4c762bdc7..7c539491c 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -710,7 +710,7 @@
 </template>
 
 <script>
-import { noSpecialChar, port, nzNumber, arrLength } from '../js/validate'
+import { nameValidate, port, nzNumber, arrLength } from '../js/validate'
 import selectWalk from '../popBox/selectWalk'
 import editRigthBox from '../mixin/editRigthBox'
 import pipelineSelect from './pipelineSelect'
@@ -776,7 +776,7 @@ export default {
       rules: {
         name: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { validator: noSpecialChar, trigger: 'change' }
+          { validator: nameValidate, trigger: 'blur' }
         ],
         projectId: [
           { required: true, message: this.$t('validate.required'), trigger: 'change' }
diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue
index 3fea53c30..1705c92d7 100644
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -383,9 +383,10 @@
 <script>
 import editRigthBox from '../mixin/editRigthBox'
 import bus from '@/libs/bus'
-import { arrLength, datePicker } from '@/components/common/js/validate'
+import { nameValidate, arrLength, datePicker } from '@/components/common/js/validate'
 import draggable from 'vuedraggable'
 import { getUUID } from '@/components/common/js/common'
+
 export default {
   name: 'panelBox',
   components: {
@@ -414,7 +415,8 @@ export default {
       userData: [],
       rules: {
         name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: nameValidate, trigger: 'blur' }
         ],
         varType: [
           { required: true, message: this.$t('validate.required'), trigger: 'change' }
@@ -520,7 +522,7 @@ export default {
         { value: 60, label: '1m' },
         { value: 300, label: '5m' },
         { value: 900, label: '15m' },
-        { value: 1800, label: '30m' },
+        { value: 1800, label: '30m' }
       ]
     }
   },
diff --git a/nezha-fronted/src/components/common/rightBox/projectBox.vue b/nezha-fronted/src/components/common/rightBox/projectBox.vue
index 16d69fef7..86d56d22e 100644
--- a/nezha-fronted/src/components/common/rightBox/projectBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/projectBox.vue
@@ -35,7 +35,7 @@
 </template>
 <script>
 import editRigthBox from '../mixin/editRigthBox'
-import { noSpecialChar } from '../../common/js/validate'
+import { nameValidate } from '../../common/js/validate'
 export default {
   name: 'projectBox',
   props: {
@@ -48,7 +48,7 @@ export default {
       rules: {
         name: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { validator: noSpecialChar, trigger: 'change' }
+          { validator: nameValidate, trigger: 'blur' }
         ]
       }
     }
diff --git a/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue b/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue
index 0b5e94b47..296492f85 100644
--- a/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue
@@ -170,8 +170,8 @@ export default {
       },
       rules: {
         name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' },
-          { pattern: /^[a-zA-Z_:][a-zA-Z0-9_:]*$/, message: this.$t('overall.ASCIIKey'), trigger: 'change' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { pattern: /^[a-zA-Z_:][a-zA-Z0-9_:]*$/, message: this.$t('overall.ASCIIKey'), trigger: 'blur' }
         ],
         type: [
           { required: true, message: this.$t('validate.required'), trigger: 'change' }
diff --git a/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue b/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue
index c1083390e..4974ecdfd 100644
--- a/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue
@@ -86,6 +86,7 @@
 <script>
 import editRigthBox from '../mixin/editRigthBox'
 import { port } from '../js/validate'
+import { nameValidate } from '@/components/common/js/validate'
 
 export default {
   name: 'snmpCredentialBox',
@@ -100,7 +101,8 @@ export default {
 
       rules: {
         name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: nameValidate, trigger: 'blur' }
         ],
         'config.username': [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }