el-input的form表单动态输入校验
<el-form :inline="true" class="form_inline" label-width="120px" :label-position="labelPosition"> <div class="el-form-item asterisk-left" v-for="(field, index) in person.kpiList" :key="index"> <label class="el-form-item__label">{{ field.kpiName }} <el-tooltip placement="top" v-if="field.paramsConfigTips ? true : false"> <template #content> {{ field.paramsConfigTips }}</template> <QuestionFilled style="font-size: 14px; width: 16px"></QuestionFilled> </el-tooltip> </label> <div class="el-form-item__content"> <el-input clearable class="input_top" v-model.trim="field.kpiValue" :placeholder="field.kpiValue" :disabled="field.disabled" @input="handleInput(index)"> {{ field.kpiValue }} <template #append> <span>{{ field.kpiUnit }}</span> </template> </el-input> </div> </div> </el-form>
const person = reactive({ kpiList: [] }); function handleInput(index) { const item = person.kpiList[index]; item.kpiValue = item.kpiValue.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g,'$1'); setTimeout(() => { item.kpiValue =item.kpiValue; }, 0); }