7/30 限制前端输入字数
This commit is contained in:
@@ -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);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user