8/1 限制前端输入字数

src/views/system/Decoration/addDecoration.vue

@@ -7,7 +7,7 @@
           <div class="title">基本信息</div>
         </template>
         <div class="addBuildingFormBody">
-          <div class="formbox">
+          <div class="formBox">
             <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
               <el-row>
                 <el-col :span="12">
@@ -37,14 +37,7 @@
               <el-row>
                 <el-col :span="12">
                   <el-form-item label="装修押金(元)" prop="decorationDeposit">
-                    <el-input
-                      type="number"
-                      min="0"
-                      step="0.01"
-                      maxlength="8"
-                      placeholder="请输入装修押金，最多保留2位小数"
-                      v-model.trim.number="form.decorationDeposit"
-                    />
+                    <el-input maxlength="8" placeholder="请输入装修押金，最多保留2位小数" v-model.number.trim="form.decorationDeposit" />
                   </el-form-item>
                 </el-col>
               </el-row>
@@ -64,6 +57,7 @@ import { ref } from 'vue';
 import PageHeader from '@/components/Pageheader/index.vue';
 import { addDecoration, getDecoration, updateDecoration } from '@/api/system/Decoration';
 import { useHouseStore } from '@/store/modules/house';
+import { validator } from '@/utils/Reg';
 
 const houseStore = useHouseStore();
 const treedata = ref([]);
@@ -77,39 +71,12 @@ const form = ref({
   'buildingId': null,
   'unitNoId': null,
   'applyName': '',
+  'inspectionResult': '0',
   'decorationCompany': '',
   'decorationContent': '',
   'decorationDeposit': null
 });
 
-/**
- * 通用金额校验器
- * @param value 输入值
- * @param type money金额 / num整数
- * @returns 校验提示信息，空则校验通过
- */
-const validator = (value: number | null, type: 'money' | 'num') => {
-  // 空值由 required 规则拦截，这里只处理有值的情况
-  if (value === null || value === undefined) return '';
-
-  // 转字符串处理小数位数
-  const strVal = String(value);
-  // 禁止负数
-  if (value < 0) return '金额不能为负数';
-
-  if (type === 'money') {
-    // 匹配最多两位小数
-    const reg = /^\d+(\.\d{1,2})?$/;
-    if (!reg.test(strVal)) return '金额仅支持最多两位小数';
-    // 限制金额上限（可按需修改）
-    if (value > 9999999.99) return '押金金额不能超过9999999.99元';
-  } else if (type === 'num') {
-    const reg = /^\d+$/;
-    if (!reg.test(strVal)) return '只能输入正整数';
-  }
-
-  return '';
-};
 const rules = {
   houseId: [{ required: true, message: '请选择具体房屋', trigger: 'blur' }],
   applyName: [{ required: true, message: '请输入申请人', trigger: 'blur' }],
@@ -120,9 +87,18 @@ const rules = {
         if (val === '' || val === null) {
           return callback(new Error('请输入装修押金'));
         }
-        const msg = validator(val, 'money');
-        if (msg) callback(new Error(msg));
-        else callback();
+        const num = Number(val);
+        console.log(val);
+        if (Number.isNaN(num)) {
+          return callback(new Error('请输入装修押金'));
+        }
+        if (num < 0) {
+          return callback(new Error('装修押金不能为负数'));
+        }
+        if (num > 99999999) {
+          return callback(new Error('装修押金过大'));
+        }
+        return validator(val, 'money');
       },
       trigger: ['blur', 'change']
     }
@@ -184,9 +160,7 @@ const submitForm = () => {
 
 //  返回
 function handleBack() {
-  router.push({
-    path: '/repair/decoration'
-  });
+  router.back();
 }
 </script>
 
@@ -198,7 +172,7 @@ function handleBack() {
     margin-top: 20px;
     flex: 1;
 
-    .formbox {
+    .formBox {
       width: 1000px;
       margin: 0 auto;
     }