NEZ-3468 fix: 用户编辑页面修改username 校验规则

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)$/ // 纬度正则验证

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' },

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' },

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: '',

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' }

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' }]

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 label-width="120px" :model="editMetaGroup" label-position = "top" ref="editMetaGroupForm" :rules="rules">
-            <el-form-item :label='$t("overall.name")' prop="name" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
+            <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' }
+        ]
       }
     }
   },

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' }],
+        name: [
-        panelName: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }]
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: nameValidate, trigger: 'blur' }
+        ],
+        panelName: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
       }
     }
   },

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' }

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' },

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' },
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { validator: this.optionType === 'batch' ? '' : noSpecialChar, trigger: 'change' },
+          { validator: this.optionType === 'batch' ? '' : nameValidate, trigger: 'blur' },
           { max: 64, message: this.$t('config.system.link.nameMaxLength'), trigger: 'blur' }
         ],
         assetId: [

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' }

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' }
       ]
     }
   },

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' }
         ]
       }
     }

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' },
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { pattern: /^[a-zA-Z_:][a-zA-Z0-9_:]*$/, message: this.$t('overall.ASCIIKey'), trigger: 'change' }
+          { 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' }

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' }