职员编辑表单验证

src/utils/request.js

@@ -1,8 +1,8 @@
 /*
  * @Author: your name
  * @Date: 2022-01-06 09:45:17
- * @LastEditTime: 2022-03-02 15:03:14
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-03-16 09:17:41
+ * @LastEditors: your name
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \vue-admin-template\src\utils\request.js
  */
@@ -66,7 +66,7 @@ service.interceptors.response.use(
     const res = response.data
 
     // if the custom code is not 20000, it is judged as an error.
-    if (res.code !== 0) {
+    if (res.code != 0) {
       Message({
         message: res.message || 'Error',
         type: 'error',

src/utils/validate.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-12-13 09:43:22
- * @LastEditTime: 2022-03-14 18:24:09
+ * @LastEditTime: 2022-03-16 10:57:25
  * @LastEditors: your name
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \Foshan4A2.0\src\utils\validate.js
@@ -292,10 +292,22 @@ function getRealLength(string) {
 
 export function lengthValidator(rule, value, callback) {
   const realLength = getRealLength(value)
-  if (realLength > rule.max) {
+  if (realLength === 0) {
+    callback()
+  } else if (rule.min && realLength < rule.min) {
+    rule.message += ` ${realLength}/${rule.min}`
+    callback(new Error('长度小于最小值'))
+  } else if (rule.max && realLength > rule.max) {
     rule.message += `  ${realLength}/${rule.max}`
     callback(new Error('长度超出最大值'))
   } else {
     callback()
   }
 }
+
+// 表单验证输入内容验证
+export const regular = {
+  integer: /^[0-9]*$/,
+  name: /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
+  nameMessage: '只能包含中文、英文、数字和下划线切不能以下划线开头'
+}

src/views/staffManagement/compontents/staffAdd.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2022-02-10 14:49:20
- * @LastEditTime: 2022-03-14 10:58:17
+ * @LastEditTime: 2022-03-16 10:57:58
  * @LastEditors: your name
  * @Description: 编辑职员
  * @FilePath: \Foshan4A4.0\src\views\staffManagement\compontents\staffEdit.vue
@@ -19,22 +19,22 @@
       <div class="addApp-form-content dialog-public-background">
         <el-form :inline="true" ref="form" :rules="rules" class="form" :model="form">
           <el-form-item prop="name" label="职员名称">
-            <el-input placeholder="请输入职员名称" v-model="form.name"></el-input>
+            <el-input placeholder="请输入职员名称" v-model.trim="form.name"></el-input>
           </el-form-item>
           <el-form-item prop="loginName" label="职员登录名">
-            <el-input placeholder="请输入职员登录名" maxlength="32" v-model="form.loginName"></el-input>
+            <el-input placeholder="请输入职员登录名" v-model.trim="form.loginName"></el-input>
           </el-form-item>
-          <el-form-item label="职员手机号">
-            <el-input placeholder="请输入职员手机号" maxlength="11" v-model="form.phone"></el-input>
+          <el-form-item prop="phone" label="职员手机号">
+            <el-input placeholder="请输入职员手机号" v-model.trim="form.phone"></el-input>
           </el-form-item>
-          <el-form-item style="margin-right: 16px" label="登录密码">
-            <el-input placeholder="*******" disabled maxlength="32" v-model="form.loginPwd"></el-input>
+          <el-form-item prop="loginPwd" style="margin-right: 16px" label="登录密码">
+            <el-input placeholder="*******" disabled v-model="form.loginPwd"></el-input>
           </el-form-item>
           <el-form-item v-is="['officer_btn_resetpwd']">
-            <el-button size="small" type="primary" @click="reSetPassWord">重置密码</el-button>
+            <el-button size="small" type="primary" @click="reSetPassWord">{{ doesPwdExist ? '重置' : '生成' }}密码</el-button>
           </el-form-item>
-          <el-form-item label="描述">
-            <el-input class="lastInput" maxlength="200" placeholder="请输入描述" v-model="form.app"></el-input>
+          <el-form-item prop="app" label="描述">
+            <el-input class="lastInput" placeholder="请输入描述" v-model.trim="form.app"></el-input>
           </el-form-item>
         </el-form>
       </div>
@@ -118,7 +118,7 @@ import {
   organgitpost,
 } from "@/api/postInterface";
 import { pwdProduce } from "@/utils/validate";
-import { lengthValidator } from '@/utils/validate';
+import { lengthValidator, regular } from '@/utils/validate';
 export default {
   name: "AuthorityPower",
   mixins: [treeData],
@@ -148,12 +148,23 @@ export default {
         //表单验证
         name: [
           { required: true, message: "请输入职员名称", trigger: "blur" },
-          { validator: lengthValidator, max: 32, message: '最多输入32个字符', trigger: ['change', 'blur'] }],
+          { pattern: regular.name, message: regular.nameMessage, trigger: ['change', 'blur'] },
+          { validator: lengthValidator, max: 32, message: '最多输入32个字符', trigger: ['change', 'blur'] }
+        ],
         loginName: [
           { required: true, message: "请输入职员登录名", trigger: "blur" },
+          { pattern: regular.name, message: regular.nameMessage, trigger: ['change', 'blur'] },
+          { validator: lengthValidator, max: 32, message: '最多输入32个字符', trigger: ['change', 'blur'] },
+        ],
+        phone: [
+          { pattern: regular.integer, message: '请输入纯数字', trigger: ['blur', 'change'] },
+          { validator: lengthValidator, min: 11, max: 11, message: '请输入11位电话号码', trigger: ['change', 'blur'] }
+        ],
+        app: [
+          { validator: lengthValidator, max: 128, message: '最多输入128个字符', trigger: ['change', 'blur'] },
         ],
         loginPwd: [
-          { required: true, message: "请输入职员登录密码", trigger: "blur" },
+          { required: true, message: "请生成职员登录密码" }
         ],
       },
       defaultProps: {
@@ -203,7 +214,8 @@ export default {
       onCheckedArr: [],//当前显示选中权限组
       alljobArr: [],//全部岗位
       GroupIds: [], //当前选中的用户组
-      userGroupKeys: [] //当前回调选中的用户组
+      userGroupKeys: [], //当前回调选中的用户组
+      doesPwdExist: false
     };
   },
   computed: {
@@ -441,6 +453,7 @@ export default {
       }
     },
     reSetPassWord () {
+      !this.doesPwdExist && (this.doesPwdExist = true)
       const { PwdLengthBegin, PwdLengthEnd, PwdStruc } =
         typeof this.systemSet === "string"
           ? JSON.parse(this.systemSet)

src/views/staffManagement/compontents/staffEdit.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2022-02-10 14:49:20
- * @LastEditTime: 2022-03-14 15:54:27
+ * @LastEditTime: 2022-03-16 11:04:46
  * @LastEditors: your name
  * @Description: 编辑职员
  * @FilePath: \Foshan4A4.0\src\views\staffManagement\compontents\staffEdit.vue
@@ -19,22 +19,22 @@
       <div class="addApp-form-content dialog-public-background">
         <el-form :inline="true" ref="form" :rules="rules" class="form" :model="form">
           <el-form-item prop="name" label="职员名称">
-            <el-input placeholder="请输入职员名称" v-model="form.name"></el-input>
+            <el-input placeholder="请输入职员名称" v-model.trim="form.name"></el-input>
           </el-form-item>
           <el-form-item prop="loginName" label="职员登录名">
-            <el-input placeholder="请输入职员登录名" maxlength="32" v-model="form.loginName"></el-input>
+            <el-input placeholder="请输入职员登录名" v-model.trim="form.loginName"></el-input>
           </el-form-item>
-          <el-form-item label="职员手机号">
-            <el-input placeholder="请输入职员手机号" maxlength="11" v-model="form.phone"></el-input>
+          <el-form-item prop="phone" label="职员手机号">
+            <el-input placeholder="请输入职员手机号" v-model.trim="form.phone"></el-input>
           </el-form-item>
-          <el-form-item style="margin-right: 16px" label="登录密码">
-            <el-input placeholder="*******" disabled maxlength="32" v-model="form.loginPwd"></el-input>
+          <el-form-item prop="loginPwd" style="margin-right: 16px" label="登录密码">
+            <el-input placeholder="*******" disabled v-model="form.loginPwd"></el-input>
           </el-form-item>
           <el-form-item v-is="['officer_btn_resetpwd']">
             <el-button size="small" type="primary" @click="reSetPassWord">重置密码</el-button>
           </el-form-item>
-          <el-form-item label="描述">
-            <el-input class="lastInput" maxlength="200" placeholder="请输入描述" v-model="form.app"></el-input>
+          <el-form-item prop="app" label="描述">
+            <el-input class="lastInput" placeholder="请输入描述" v-model.trim="form.app"></el-input>
           </el-form-item>
         </el-form>
       </div>
@@ -121,7 +121,7 @@ import {
   Staffdetails,
 } from "@/api/postInterface";
 import { pwdProduce } from "@/utils/validate";
-import { lengthValidator } from '@/utils/validate';
+import { lengthValidator, regular } from '@/utils/validate';
 export default {
   name: "AuthorityPower",
   mixins: [treeData],
@@ -151,12 +151,20 @@ export default {
         //表单验证
         name: [
           { required: true, message: "请输入职员名称", trigger: "blur" },
-          { validator: lengthValidator, max: 32, message: '最多输入32个字符', trigger: ['change', 'blur'] }],
+          { pattern: regular.name, message: regular.nameMessage, trigger: ['change', 'blur'] },
+          { validator: lengthValidator, max: 32, message: '最多输入32个字符', trigger: ['change', 'blur'] }
+        ],
         loginName: [
           { required: true, message: "请输入职员登录名", trigger: "blur" },
+          { pattern: regular.name, message: regular.nameMessage, trigger: ['change', 'blur'] },
+          { validator: lengthValidator, max: 32, message: '最多输入32个字符', trigger: ['change', 'blur'] },
+        ],
+        phone: [
+          { pattern: regular.integer, message: '请输入纯数字', trigger: ['blur', 'change'] },
+          { validator: lengthValidator, min: 11, max: 11, message: '请输入11位电话号码', trigger: ['change', 'blur'] }
         ],
-        loginPwd: [
-          { required: true, message: "请输入职员登录密码", trigger: "blur" },
+        app: [
+          { validator: lengthValidator, max: 128, message: '最多输入128个字符', trigger: ['change', 'blur'] },
         ],
       },
       defaultProps: {