7/30 限制前端输入字数

This commit is contained in:
Zy
2026-07-30 17:59:32 +08:00
parent 903c92fef0
commit 2907f9202c
115 changed files with 2561 additions and 1213 deletions

View File

@@ -8,13 +8,13 @@
<el-row>
<el-col :span="11">
<el-form-item label="月卡编号" prop="cardCode">
<el-input v-model.trim="form.cardCode" placeholder="请输入月卡编号" />
<el-input maxlength="15" v-model.trim="form.cardCode" placeholder="请输入月卡编号" />
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="11">
<el-form-item label="持卡人姓名" prop="cardName">
<el-input v-model.trim="form.cardName" placeholder="请输入持卡人姓名" />
<el-input maxlength="15" v-model.trim="form.cardName" placeholder="请输入持卡人姓名" />
</el-form-item>
</el-col>
</el-row>
@@ -22,20 +22,25 @@
<el-row>
<el-col :span="11">
<el-form-item label="手机号码" prop="phone">
<el-input v-model.number="form.phone" placeholder="请输入手机号码" />
<el-input maxlength="11" v-model.number="form.phone" placeholder="请输入手机号码" />
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="11">
<el-form-item label="绑定车牌号" prop="carNum">
<LicensePlateInput ref="carNumInputRef" required v-model="form.carNum" @change="() => handleValidate()" />
<el-input
maxlength="10"
v-model.trim="form.carNum"
placeholder="请输入车牌号"
style="text-transform: uppercase; letter-spacing: 2px"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-form-item label="办理人" prop="handleName">
<el-input v-model="form.handleName" placeholder="请输入办理人姓名" />
<el-input maxlength="15" v-model="form.handleName" placeholder="请输入办理人姓名" />
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
@@ -57,7 +62,7 @@
<el-row>
<el-col :span="11">
<el-form-item label="费用" prop="cost">
<el-input v-model.number="form.cost" placeholder="请输入费用">
<el-input maxlength="8" v-model.number.trim="form.cost" placeholder="请输入费用">
<template #suffix>元</template>
</el-input>
</el-form-item>
@@ -74,7 +79,7 @@
<el-row>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input type="textarea" :rows="5" v-model.trim="form.remark" placeholder="请输入" />
<el-input maxlength="200" show-word-limit type="textarea" :rows="5" v-model.trim="form.remark" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
@@ -90,10 +95,11 @@
<script setup lang="ts">
import { ref } from 'vue';
import LicensePlateInput from '@/components/LicensePlateInput/index.vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { addMonthCard, getMonthCard, updateMonthCard } from '@/api/system/MonthCard';
import { LicensePlateValidator, validator } from '@/utils/Reg';
import { validator } from '@/utils/Reg';
import { LicensePlateValidator2 } from '@/utils/Reg2';
import { callback } from '@/api/login';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_pay_method } = toRefs<any>(proxy?.useDict('com_pay_method'));
@@ -150,32 +156,35 @@ const rules = ref({
{
validator: (_: any, value: string, callback: any) => {
if (!value) {
callback();
callback(new Error('请输入车牌号'));
return;
}
if (!LicensePlateValidator.isValidPlate(value)) {
callback();
if (!LicensePlateValidator2.isValidPlate(value)) {
callback(new Error('请输入正确的车牌号'));
return;
}
callback();
},
trigger: 'blur' // ✅ 只在失焦时验证
trigger: 'blur'
}
],
startTime: [{ required: true, message: '请选择有效日期', trigger: 'blur' }],
payMethod: [{ required: true, message: '请选择支付方式', trigger: 'blur' }],
cost: [
{ required: true, message: '请输入费用', trigger: 'blur' },
{
validator: (_: any, value: string | number) => validator(value, 'money'),
message: '请输入正确的金额,最多两位小数',
trigger: 'blur',
required: true
validator: (_: any, value: string | number, callback) => {
if (value === null || value === undefined || value === 0) {
return callback(new Error('请输入费用'));
}
if (!validator(value, 'money')) {
return callback(new Error('请输入正确的金额,最多两位小数'));
}
return callback();
}
}
]
});
function handleValidate() {
formRef.value.validateField('carNum');
}
const userid = ref(null);