Merge pull request #2848 from joe511230/v3.2.x_bugfix

fix:ui: 修复长短字符长度校验未按byte校验的问题
Former-commit-id: 4ee1c3b

Author: breezeli

src/ui/package.json

@@ -23,6 +23,7 @@
     "lodash.throttle": "4.1.1",
     "md5": "2.2.1",
     "moment": "2.22.2",
+    "utf8-byte-length": "^1.0.4",
     "v-click-outside": "1.0.5",
     "v-tooltip": "2.0.0-rc.33",
     "vee-validate": "2.0.9",

src/ui/src/components/ui/form/form-multiple.vue

@@ -195,6 +195,7 @@
                 }
                 if (['singlechar', 'longchar'].includes(propertyType)) {
                     rules[propertyType] = true
+                    rules[`${propertyType}Length`] = true
                 }
                 if (propertyType === 'int') {
                     rules['numeric'] = true

src/ui/src/components/ui/form/form.vue

@@ -193,6 +193,7 @@
                 }
                 if (['singlechar', 'longchar'].includes(propertyType)) {
                     rules[propertyType] = true
+                    rules[`${propertyType}Length`] = true
                 }
                 if (propertyType === 'float') {
                     rules['float'] = true

src/ui/src/setup/validate.js

@@ -1,20 +1,27 @@
 import Vue from 'vue'
 import { language } from '@/i18n'
 import veeValidate, {Validator} from 'vee-validate'
+import stringLength from 'utf8-byte-length'
 
 const customRules = {
     singlechar: {
         validate: value => {
-            /* eslint-disable */
-            return /^([a-zA-Z0-9]|[\u4e00-\u9fa5]|[\(\)\+\-《》_,，；:;“”‘’。@#\."'\\\/\s]){0,256}$/.test(value)
-            /* eslint-enable */
+            return /^([a-zA-Z0-9]|[\u4e00-\u9fa5]|[()+\-《》_,，；:;“”‘’。@#."'\\/\s]){0,256}$/.test(value)
+        }
+    },
+    singlecharLength: {
+        validate: value => {
+            return stringLength(value) <= 256
         }
     },
     longchar: {
         validate: value => {
-            /* eslint-disable */
-            return /^([a-zA-Z0-9]|[\u4e00-\u9fa5]|[\(\)\+\-《》_,，；:;“”‘’。@#\."'\\\/\s]){0,2000}$/.test(value)
-            /* eslint-enable */
+            return /^([a-zA-Z0-9]|[\u4e00-\u9fa5]|[()+\-《》_,，；:;“”‘’。@#."'\\/\s]){0,2000}$/.test(value)
+        }
+    },
+    longcharLength: {
+        validate: value => {
+            return stringLength(value) <= 2000
         }
     },
     associationId: {
@@ -86,7 +93,9 @@ const dictionary = {
         messages: {
             regex: () => '请输入符合自定义正则的内容',
             longchar: () => '请输入正确的长字符内容',
+            longcharLength: () => '请输入2000个字符以内的内容',
             singlechar: () => '请输入正确的短字符内容',
+            singlecharLength: () => '请输入256个字符以内的内容',
             associationId: () => '格式不正确，只能包含下划线，英文小写',
             classifyName: () => '请输入正确的内容',
             classifyId: () => '请输入正确的内容',
@@ -111,7 +120,9 @@ const dictionary = {
         messages: {
             regex: () => 'Please enter the correct content that conform custom regex',
             longchar: () => 'Please enter the correct content',
+            longcharLength: () => 'Content length max than 2000',
             singlechar: () => 'Please enter the correct content',
+            singlecharLength: () => 'Content length max than 256',
             associationId: () => 'The format is incorrect and can only contain underscores and lowercase English',
             classifyName: () => 'Please enter the correct content',
             classifyId: () => 'Please enter the correct content',