添加校验

src/pages/index/components/business_record.vue

@@ -60,7 +60,7 @@
           width="45%"
           custom-class="audit-dialog">
           <div class="form-div">
-            <el-form ref="ruleForm"  label-position="left" :rules="rules1" label-width="100px" :model="formLabelAlign">
+            <el-form ref="formLabelAlign"  label-position="left" :rules="rules1" label-width="100px" :model="formLabelAlign">
               <el-form-item label="车场名称" prop="parkLotId">
                 <el-select v-model="formLabelAlign.parkLotId" placeholder="请选择">
                   <el-option
@@ -154,11 +154,11 @@
           width="45%"
           custom-class="audit-dialog">
           <div class="form-div">
-            <el-form label-position="left" label-width="110px" :model="formLabelAlign2">
-              <el-form-item label="订单号">
+            <el-form label-position="left" label-width="110px" ref="formLabelAlign2" :rules="rules2" :model="formLabelAlign2">
+              <el-form-item label="订单号" prop="orderNo">
                 <el-input v-model="formLabelAlign2.orderNo"></el-input>
               </el-form-item>
-              <el-form-item label="车场名称">
+              <el-form-item label="车场名称" prop="parkLotId">
                 <el-select v-model="formLabelAlign2.parkLotId" placeholder="请选择">
                   <el-option
                     v-for="(item,index) in carParkingNameOptions"
@@ -167,19 +167,25 @@
                     :value="item.id" />
                 </el-select>
               </el-form-item>
-              <el-form-item label="车牌号">
+              <el-form-item label="车牌号" prop="plateNo">
                 <el-input v-model="formLabelAlign2.plateNo"></el-input>
               </el-form-item>
-              <el-form-item label="支付金额">
+              <el-form-item label="支付金额" prop="paymentAmount">
                 <el-input v-model="formLabelAlign2.paymentAmount"></el-input>
               </el-form-item>
-              <el-form-item label="支付方式">
-                <el-input v-model="formLabelAlign2.paymentMethod"></el-input>
+              <el-form-item label="支付方式" prop="paymentMethod">
+                <el-select v-model="formLabelAlign2.paymentMethod" placeholder="请选择">
+                  <el-option
+                    v-for="(item,index) in paymentMethodOptions"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value" />
+                </el-select>
               </el-form-item>
-              <el-form-item label="支付状态">
+              <el-form-item label="支付状态" prop="paymentStatus">
                 <el-input v-model="formLabelAlign2.paymentStatus"></el-input>
               </el-form-item>
-              <el-form-item label="支付时间">
+              <el-form-item label="支付时间" prop="paymentTime">
                 <el-date-picker
                   v-model="formLabelAlign2.paymentTime"
                   type="datetime"
@@ -250,11 +256,11 @@
           width="45%"
           custom-class="audit-dialog">
           <div class="form-div">
-            <el-form label-position="left" label-width="100px" :model="formLabelAlign3">
-              <el-form-item label="订单号">
+            <el-form label-position="left" ref="formLabelAlign3" label-width="100px" :rules="rules3" :model="formLabelAlign3">
+              <el-form-item label="订单号" prop="orderNo">
                 <el-input v-model="formLabelAlign3.orderNo"></el-input>
               </el-form-item>
-              <el-form-item label="车场名称">
+              <el-form-item label="车场名称" prop="parkLotId">
                 <el-select v-model="formLabelAlign3.parkLotId" placeholder="请选择">
                   <el-option
                     v-for="(item,index) in carParkingNameOptions"
@@ -263,10 +269,10 @@
                     :value="item.id" />
                 </el-select>
               </el-form-item>
-              <el-form-item label="车牌号">
+              <el-form-item label="车牌号" prop="plateNo">
                 <el-input v-model="formLabelAlign3.plateNo"></el-input>
               </el-form-item>
-              <el-form-item label="停车时长(h)">
+              <el-form-item label="停车时长(h)" prop="parkingDuration">
                 <el-input v-model="formLabelAlign3.parkingDuration"></el-input>
               </el-form-item>
               <el-form-item label="欠费金额">
@@ -299,25 +305,13 @@
 </template>
 <script>
 import api_z from "@/api/article_z.js";
-import {isVehicleNumber, checkSpecialKey} from '@/util/common'
-let vehicleNumber = (rule, value, callback) => {
-  if (isVehicleNumber(value)) {
-    callback();
-  } else {
-    return callback(new Error("车牌号不正确"));
-  }
-}
-let validateInput = (rule, value, callback) => {
-  if (!checkSpecialKey(value)) {
-    callback(new Error("不能含有特殊字符！！"));
-  } else {
-    callback();
-  }
-}
+import {vehicleNumber, validateInput, validateAmount, validateHour} from '@/util/common'
+import options from '@/util/options'
 export default {
   components: {},
   data() {
     return {
+      paymentMethodOptions: options.paymentMethodOptions,
       activeName: '停车记录查询',
       columns1: [
         {
@@ -356,17 +350,17 @@ export default {
       dialogVisible: false,
       rules1: {
         parkLotId: [
-          { required: true, message: "车场不能为空", trigger: "blur" },
+          { required: true, message: "车场不能为空", trigger: "change" },
         ],
         plateNo: [
           { required: true, message: "车牌号不能为空", trigger: "blur" },
           { validator: vehicleNumber, trigger: "blur" },
         ],
         inTime: [
-          { required: true, message: "时间不能为空", trigger: "blur" },
+          { required: true, message: "时间不能为空", trigger: "change" },
         ],
         outTime: [
-          { required: true, message: "时间不能为空", trigger: "blur" },
+          { required: true, message: "时间不能为空", trigger: "change" },
         ],
         parkingNo: [
           { required: true, message: "车位号不能为空", trigger: "blur" },
@@ -422,6 +416,31 @@ export default {
       },
       title2: '',
       dialogVisible2: false,
+      rules2: {
+        orderNo: [
+          { required: true, message: "订单号不能为空", trigger: "blur" },
+          { validator: validateInput, trigger: "blur" },
+        ],
+        parkLotId: [
+          { required: true, message: "车场不能为空", trigger: "change" },
+        ],
+        plateNo: [
+          { required: true, message: "车牌号不能为空", trigger: "blur" },
+          { validator: vehicleNumber, trigger: "blur" },
+        ],
+        paymentAmount: [
+          { required: true, message: "支付金额不能为空", trigger: "blur" },
+          { validator: validateAmount, trigger: "blur" },
+        ],
+        paymentMethod: [
+          { required: true, message: "支付方式", trigger: "change" },
+        ],
+        parkingNo: [
+          { required: true, message: "车位号不能为空", trigger: "blur" },
+          { min: 26, max: 26, message: '长度必须为26位', trigger: 'blur' },
+          { validator: validateInput, trigger: "blur" },
+        ]
+      },
       formLabelAlign2: {
         id: '',
         orderNo: '',
@@ -476,6 +495,27 @@ export default {
       },
       title3: '',
       dialogVisible3: false,
+      rules3: {
+        orderNo: [
+          { required: true, message: "订单号不能为空", trigger: "blur" },
+          { validator: validateInput, trigger: "blur" },
+        ],
+        parkLotId: [
+          { required: true, message: "车场不能为空", trigger: "change" },
+        ],
+        plateNo: [
+          { required: true, message: "车牌号不能为空", trigger: "blur" },
+          { validator: vehicleNumber, trigger: "blur" },
+        ],
+        parkingDuration: [
+          { required: true, message: "停车时长不能为空", trigger: "blur" },
+          { validator: validateHour, trigger: ["change","blur"] },
+        ],
+        arrearsAmount: [
+          { required: true, message: "欠费金额不能为空", trigger: "blur" },
+          { validator: validateAmount, trigger: "blur" },
+        ]
+      },
       formLabelAlign3: {
         id: '',
         orderNo: '',
@@ -520,7 +560,7 @@ export default {
       })
     },
     handleConfirm() {
-      this.$refs['ruleForm'].validate((valid) => {
+      this.$refs['formLabelAlign'].validate((valid) => {
         if (valid) {
           if (this.title === '修改') {
             api_z.editBusinessRecordInout({...this.formLabelAlign}).then(res => {
@@ -580,29 +620,35 @@ export default {
       })
     },
     handleConfirm2() {
-      if (this.title2 === '修改') {
-        api_z.editBusinessRecordPayment({...this.formLabelAlign2}).then(res => {
-          if (res.code === 200) {
-            this.dialogVisible2 = false
-            this.$message({
-              message: '修改成功!',
-              type: 'success'
+      this.$refs['formLabelAlign2'].validate((valid) => {
+        if (valid) {
+          if (this.title2 === '修改') {
+            api_z.editBusinessRecordPayment({...this.formLabelAlign2}).then(res => {
+              if (res.code === 200) {
+                this.dialogVisible2 = false
+                this.$message({
+                  message: '修改成功!',
+                  type: 'success'
+                })
+                this.getTableData2()
+              }
             })
-            this.getTableData2()
-          }
-        })
-      } else {
-        api_z.addBusinessRecordPayment({...this.formLabelAlign2}).then(res => {
-          if (res.code === 200) {
-            this.dialogVisible2 = false
-            this.$message({
-              message: '添加成功!',
-              type: 'success'
+          } else {
+            api_z.addBusinessRecordPayment({...this.formLabelAlign2}).then(res => {
+              if (res.code === 200) {
+                this.dialogVisible2 = false
+                this.$message({
+                  message: '添加成功!',
+                  type: 'success'
+                })
+                this.getTableData2()
+              }
             })
-            this.getTableData2()
           }
-        })
-      }
+        } else {
+          return false
+        }
+      })
     },
     onSubmit3() {
       this.pageNum3 = 1
@@ -628,29 +674,35 @@ export default {
       })
     },
     handleConfirm3() {
-      if (this.title3 === '修改') {
-        api_z.editBusinessRecordArrears({...this.formLabelAlign3}).then(res => {
-          if (res.code === 200) {
-            this.dialogVisible3 = false
-            this.$message({
-              message: '修改成功!',
-              type: 'success'
+      this.$refs['formLabelAlign3'].validate((valid) => {
+        if (valid) {
+          if (this.title3 === '修改') {
+            api_z.editBusinessRecordArrears({...this.formLabelAlign3}).then(res => {
+              if (res.code === 200) {
+                this.dialogVisible3 = false
+                this.$message({
+                  message: '修改成功!',
+                  type: 'success'
+                })
+                this.getTableData3()
+              }
             })
-            this.getTableData3()
-          }
-        })
-      } else {
-        api_z.addBusinessRecordArrears({...this.formLabelAlign3}).then(res => {
-          if (res.code === 200) {
-            this.dialogVisible3 = false
-            this.$message({
-              message: '添加成功!',
-              type: 'success'
+          } else {
+            api_z.addBusinessRecordArrears({...this.formLabelAlign3}).then(res => {
+              if (res.code === 200) {
+                this.dialogVisible3 = false
+                this.$message({
+                  message: '添加成功!',
+                  type: 'success'
+                })
+                this.getTableData3()
+              }
             })
-            this.getTableData3()
           }
-        })
-      }
+        } else {
+          return false;
+        }
+      })
     },
     handlePageChange1() {
       this.getTableData1()

src/pages/index/components/exception_handing.vue

@@ -358,34 +358,7 @@
 </template>
 <script>
 import api_z from "@/api/article_z.js";
-import {isVehicleNumber, checkSpecialKey} from '@/util/common'
-let vehicleNumber = (rule, value, callback) => {
-  if (isVehicleNumber(value)) {
-    callback();
-  } else {
-    return callback(new Error("车牌号不正确"));
-  }
-}
-let validateInput = (rule, value, callback) => {
-  if (!checkSpecialKey(value)) {
-    callback(new Error("不能含有特殊字符！！"));
-  } else {
-    callback();
-  }
-}
-let checkPhone = (rule, value, callback) => { // 手机号验证
-  if (!value) {
-    return callback(new Error('手机号不能为空'));
-  } else {
-    const reg = /^1[3456789]\d{9}$/
-    if (reg.test(value)) {
-      callback();
-    } else {
-      return callback(new Error('请输入正确的手机号'));
-    }
-  }
-}
-
+import {vehicleNumber, validateInput, checkPhone} from '@/util/common'
 export default {
   components: {},
   data() {

src/pages/index/components/task_recovery.vue

@@ -190,14 +190,7 @@
 </template>
 <script>
 import api_z from "@/api/article_z.js";
-import {isVehicleNumber} from '@/util/common'
-const vehicleNumber = (rule, value, callback) => {
-  if (isVehicleNumber(value)) {
-    callback();
-  } else {
-    return callback(new Error("车牌号不正确"));
-  }
-};
+import {vehicleNumber} from '@/util/common'
 
 export default {
   components: {},

src/util/common.js

@@ -19,7 +19,58 @@ function checkSpecialKey(str) {
   return true;
 }
 
+
+function vehicleNumber(rule, value, callback) {
+  if (isVehicleNumber(value)) {
+    callback();
+  } else {
+    return callback(new Error("车牌号不正确"));
+  }
+}
+function validateInput(rule, value, callback) {
+  if (!checkSpecialKey(value)) {
+    callback(new Error("不能含有特殊字符！！"));
+  } else {
+    callback();
+  }
+}
+function validateAmount(rule, value, callback) {
+  // 自定义校验函数的实现
+  if (isNaN(value) || value <= 0) {
+    callback(new Error('金额必须是大于0的数字'))
+  } else {
+    callback()
+  }
+}
+function validateHour(rule, value, callback) {
+  if (!value || !Number.isInteger(parseInt(value))) {
+    callback(new Error('请输入有效的小时'));
+  } else if (value < 0) {
+    callback(new Error('小时必须大于0'));
+  } else {
+    callback();
+  }
+}
+
+function checkPhone(rule, value, callback) { // 手机号验证
+  if (!value) {
+    return callback(new Error('手机号不能为空'));
+  } else {
+    const reg = /^1[3456789]\d{9}$/
+    if (reg.test(value)) {
+      callback();
+    } else {
+      return callback(new Error('请输入正确的手机号'));
+    }
+  }
+}
+
 export {
   isVehicleNumber,
-  checkSpecialKey
+  checkSpecialKey,
+  vehicleNumber,
+  validateInput,
+  validateAmount,
+  validateHour,
+  checkPhone
 }

src/util/options.js

@@ -37,4 +37,20 @@ export default {
     value: '旅游景点',
     label: '旅游景点'
   }],
+  paymentMethodOptions: [{
+    value: '微信',
+    label: '微信'
+  }, {
+    value: '支付宝',
+    label: '支付宝'
+  }, {
+    value: '银联',
+    label: '银联'
+  }, {
+    value: 'ETC',
+    label: 'ETC'
+  }, {
+    value: '其他',
+    label: '其他'
+  }],
 }