Modify form validation in Add Transactions and Personal Profiles

ui/src/components/affairs/ApplicantsAddAffairs.vue

@@ -1,6 +1,6 @@
 <template>
-    <el-form :model="form" label-width="120px">
+    <el-form :model="form" :rules="rules" ref="formRules" label-width="120px">
-        <el-form-item label="事务标题:">
+        <el-form-item label="事务标题:" prop="title">
             <el-col :span="4">
                 <el-input
                     v-model.trim="form.title"
@@ -10,7 +10,7 @@
             </el-col>
         </el-form-item>
 
-        <el-form-item label="申请者:" v-if="grant">
+        <el-form-item label="申请者:" v-if="grant" prop="applicantId">
             <el-col :span="4">
                 <el-input
                     v-model="form.applicantId"
@@ -21,7 +21,7 @@
             </el-col>
         </el-form-item>
 
-        <el-form-item label="申请者:" v-if="!grant">
+        <el-form-item label="申请者:" v-if="!grant" prop="applicantId">
             <el-col :span="4">
                 <el-select
                     v-model="form.applicantId"
@@ -40,7 +40,7 @@
             </el-col>
         </el-form-item>
 
-        <el-form-item label="审批者:">
+        <el-form-item label="审批者:" prop="inspectorId">
             <el-col :span="4">
                 <el-select
                     v-model="form.inspectorId"
@@ -59,7 +59,7 @@
             </el-col>
         </el-form-item>
 
-        <el-form-item label="事务类型:">
+        <el-form-item label="事务类型:" prop="typeId">
             <el-col :span="8">
                 <el-radio-group v-model="form.typeId">
                     <el-radio label="1" name="type1">事假</el-radio>
@@ -70,7 +70,7 @@
             </el-col>
         </el-form-item>
 
-        <el-form-item v-model="form.createTime" label="创建时间:">
+        <el-form-item v-model="form.createTime" label="创建时间:" prop="createTime">
             <el-col :span="5">
                 <el-date-picker
                     v-model="form.createTime"
@@ -81,7 +81,7 @@
             </el-col>
         </el-form-item>
 
-        <el-form-item label="具体内容:">
+        <el-form-item label="具体内容:" prop="content">
             <el-input
                 v-model.trim="form.content"
                 type="textarea"
@@ -103,7 +103,6 @@
 import 'element-plus/theme-chalk/index.css'
 import request from '@/services/index.js'
 import _ from 'lodash'
-import { ElMessage } from 'element-plus'
 
 export default {
     data() {
@@ -131,6 +130,38 @@ export default {
                 username: '',
                 department_id: ''
             },
+            rules: {
+                title: [
+                    {
+                        required: true,
+                        message: '错误！事务标题不能为空！'
+                    }
+                ],
+                content: [
+                    {
+                        required: true,
+                        message: '错误！事务内容不能为空！'
+                    }
+                ],
+                typeId: [
+                    {
+                        required: true,
+                        message: '错误！请选择事务类型!'
+                    }
+                ],
+                applicantId: [
+                    {
+                        required: true,
+                        message: '错误！请输入申请者id!'
+                    }
+                ],
+                inspectorId: [
+                    {
+                        required: true,
+                        message: '错误！请选择审批者!'
+                    }
+                ]
+            },
             sameDepartmentUsers: [],
             grant: true,
             formView: false
@@ -140,58 +171,25 @@ export default {
         onSubmit: function (form) {
             this.form.applicantId = this.currentUser.id
             console.log(form)
-            if (
+            this.$refs.formRules.validate((value) => {
-                !_.isEmpty(form.title) &&
+                if (value) {
-                !_.isEmpty(form.content) &&
+                    request
-                !_.isEmpty(form.typeId) &&
+                        .post('/affair/add', form)
-                !_.isEmpty(form.applicantId) &&
+                        .then((response) => {
-                !_.isEmpty(form.inspectorId)
+                            console.log(response.data)
-            ) {
+                            this.getPersonalAffair()
-                request
+                            this.resetForm()
-                    .post('/affair/add', form)
+                        })
-                    .then((response) => {
+                        .catch((reportError) => {
-                        console.log(response.data)
+                            this.resetForm()
-                        this.getPersonalAffair()
+                            console.log(reportError)
-                        this.resetForm()
+                        })
-                    })
+                    this.getPersonalAffair()
-                    .catch((reportError) => {
+                    this.$router.go(-1)
-                        this.resetForm()
+                } else {
-                        console.log(reportError)
+                    console.log('fault!')
-                    })
-                this.getPersonalAffair()
-                this.$router.go(-1)
-            } else {
-                if (_.isEmpty(form.title)) {
-                    ElMessage({
-                        message: '错误！事务标题不能为空！',
-                        type: 'error'
-                    })
                 }
-                if (_.isEmpty(form.content)) {
+            })
-                    ElMessage({
-                        message: '错误！事务内容不能为空!',
-                        type: 'error'
-                    })
-                }
-                if (_.isEmpty(form.typeId)) {
-                    ElMessage({
-                        message: '错误！请选择事务类型!',
-                        type: 'error'
-                    })
-                }
-                if (_.isEmpty(form.applicantId)) {
-                    ElMessage({
-                        message: '错误！请输入申请者id!',
-                        type: 'error'
-                    })
-                }
-                if (_.isEmpty(form.inspectorId)) {
-                    ElMessage({
-                        message: '错误！请选择审批者!',
-                        type: 'error'
-                    })
-                }
-            }
         }, // 表单提交及验证
         resetForm() {
             this.$nextTick(() => {

ui/src/pages/profile/PersonalProfile.vue

@@ -241,19 +241,23 @@ export default {
         },
         checkEmail(rule, value, callback) {
             const mailReg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
-            if (mailReg.test(value)) {
+            if (value != null) {
-                callback()
+                if (mailReg.test(value)) {
-            } else {
+                    callback()
-                return callback(new Error('邮箱格式错误！'))
+                } else {
+                    return callback(new Error('邮箱格式错误！'))
+                }
             }
         },
         checkTel(rule, value, callback) {
             const telReg =
                 /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
-            if (telReg.test(value)) {
+            if (value != null) {
-                callback()
+                if (telReg.test(value)) {
-            } else {
+                    callback()
-                return callback(new Error('手机号格式错误！'))
+                } else {
+                    return callback(new Error('手机号格式错误！'))
+                }
             }
         }
     },