表单长度验证

src/utils/validate.js

@@ -1,8 +1,8 @@
 /*
  * @Author: your name
  * @Date: 2021-12-13 09:43:22
- * @LastEditTime: 2022-01-08 12:21:58
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-03-14 18:24:09
+ * @LastEditors: your name
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \Foshan4A2.0\src\utils\validate.js
  */
@@ -271,3 +271,29 @@ export function findarrays(ar, feature, v) {
   // }
   return arr;
 }
+
+// 表单输入长度验证
+function getRealLength(string) {
+  let realLength = 0,
+    len = string.length,
+    charCode = -1
+  for (let i = 0; i < len; i++) {
+    charCode = string.charCodeAt(i)
+    if (charCode >=0 && charCode <= 128) {
+      realLength += 1
+    } else {
+      realLength += 2
+    }
+  }
+  return realLength
+}
+
+export function lengthValidator(rule, value, callback) {
+  const realLength = getRealLength(value)
+  if (realLength > rule.max) {
+    rule.message += `  ${realLength}/${rule.max}`
+    callback(new Error('长度超出最大值'))
+  } else {
+    callback()
+  }
+}

src/views/accountGroupManagement/components/accountGroupEdit.vue

@@ -28,19 +28,18 @@
           >
             <el-input
               v-model="editForm.name"
-              maxlength="32"
               :placeholder="`${accountGroupType}名称`"
             />
           </el-form-item>
           <el-form-item
             label="描述"
+            prop="desc"
             style="margin-left: 40px"
           >
             <el-input
               v-model="editForm.desc"
               style="width: 640px"
               placeholder="请输入描述"
-              maxlength="200"
             />
           </el-form-item>
         </el-form>
@@ -147,6 +146,7 @@ import { RoleAuths } from '@/api/apiAuthority'
 import { GetGroupDetails, EditGroup, SaveGroup } from '@/api/AccountGroup.js'
 // import treeData from '../minixs/treeData'
 import { mapGetters } from 'vuex'
+import { lengthValidator } from '@/utils/validate'
 
 export default {
   components: {
@@ -190,7 +190,10 @@ export default {
         // 表单验证
         name: [
           { required: true, message: `请输入${this.accountGroupType}名称`, trigger: 'blur' },
-          { min: 1, max: 32, message: '长度在 1到 32 个字符', trigger: 'blur' }
+          { validator: lengthValidator, max: 32, message: '长度在 1到 32 个字符', trigger: ['change', 'blur'] }
+        ],
+        desc: [
+          { validator: lengthValidator, max: 200, message: '长度在 1到 200 个字符', trigger: ['change', 'blur'] }
         ]
       },
       defaultProps: {

src/views/authorityManagement/components/authorityRoleAdd.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-29 16:31:31
- * @LastEditTime: 2022-03-01 11:11:24
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-03-14 18:23:01
+ * @LastEditors: your name
  * @Description: 新增/编辑角色
  * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\authorityRoleStatus.vue
 -->
@@ -19,9 +19,9 @@
       <div class="addApp-form-content dialog-public-background">
         <el-form :inline="true" :rules="rules" ref="form" class="form" :model="form">
           <el-form-item prop="name" label="角色名称">
-            <el-input placeholder="请输入角色名称" maxlength="32" v-model="form.name"></el-input>
+            <el-input placeholder="请输入角色名称" v-model="form.name"></el-input>
           </el-form-item>
-          <el-form-item label="描述">
+          <el-form-item prop="app" label="描述">
             <el-input style="width: 640px" maxlength="200" placeholder="请输入描述" v-model="form.app"></el-input>
           </el-form-item>
         </el-form>
@@ -50,6 +50,9 @@ import Rolelist from "@/components/rolelist";
 import roleData from "../minixs/roleData";
 import { SaveRole, RoleAuths } from "@/api/apiAuthority";
 import { checkPermission } from '@/utils/add-is-class';
+
+import { lengthValidator } from '@/utils/validate'
+
 export default {
   name: "AuthorityRoleAdd",
   components: { Permissionlist, Rulesofcompetency, Permissiontree, Rolelist },
@@ -65,7 +68,13 @@ export default {
       },
       rules: {
         //表单验证
-        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
+        name: [
+          { required: true, message: "请输入角色名称", trigger: "blur" },
+          { validator: lengthValidator, max: 32, message: '长度在 1到 32 个字符', trigger: ['change', 'blur'] }
+        ],
+        app: [
+          { validator: lengthValidator, max: 200, message: '长度在 1到 200 个字符', trigger: ['change', 'blur'] }
+        ],
       },
       permission: false,
       RoleList: [],

src/views/authorityManagement/components/authorityRoleEdit.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-29 16:31:31
- * @LastEditTime: 2022-03-01 11:10:13
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-03-14 18:22:53
+ * @LastEditors: your name
  * @Description: 新增/编辑角色
  * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\authorityRoleStatus.vue
 -->
@@ -59,6 +59,7 @@ import Rolelist from "@/components/rolelist";
 import { RoleDetails, EditRole, RoleAuths } from "@/api/apiAuthority";
 import roleData from "../minixs/roleData";
 import { checkPermission } from '@/utils/add-is-class';
+import { lengthValidator } from '@/utils/validate'
 export default {
   name: "AuthorityRoleEdit",
   components: { Permissionlist, Rulesofcompetency, Permissiontree, Rolelist },
@@ -74,7 +75,13 @@ export default {
       },
       rules: {
         //表单验证
-        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
+        name: [
+          { required: true, message: "请输入角色名称", trigger: "blur" },
+          { validator: lengthValidator, max: 32, message: '长度在 1到 32 个字符', trigger: ['change', 'blur'] }
+        ],
+        app: [
+          { validator: lengthValidator, max: 200, message: '长度在 1到 200 个字符', trigger: ['change', 'blur'] }
+        ],
       },
       loading: false,
       permission: false,