element-plus，请问如何对一行el-form-item内多个el-input输入框的校验？

作者站长头像
站长
· 阅读数 6

请问大佬们，如何对一行el-form-item内多个el-input输入框的进行只能输入整数或者小数的校验？

<li>
            <el-form ref="ruleFormRef" :model="RtkForm" :rules="rules" label-width="120px">
              <div class="OverView_header">
                <h1>rtk杆臂</h1>
              </div>
              <div class="OverView_SerialConfig_Part">
                <div>
                  <el-form-item label="主天线杆臂(mm):">
                    <el-input v-model.number="RtkForm.x" />
                    <el-input v-model.number="RtkForm.y" />
                    <el-input v-model.number="RtkForm.z" />
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="测量误差估计(mm):">
                    <el-input v-model.number="RtkForm.mis_x" />
                    <el-input v-model.number="RtkForm.mis_y" />
                    <el-input v-model.number="RtkForm.mis_z" />
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="副天线杆臂(mm):">
                    <el-input v-model.number="RtkForm.x_s" />
                    <el-input v-model.number="RtkForm.y_s" />
                    <el-input v-model.number="RtkForm.z_s" />
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="测量误差估计(mm):">
                    <el-input v-model.number="RtkForm.mis_x_s" />
                    <el-input v-model.number="RtkForm.mis_y_s" />
                    <el-input v-model.number="RtkForm.mis_z_s" />
                  </el-form-item>
                </div>
                <!-- rtk杆臂设置 -->
                <el-button @click="saveRtkSetting">保存</el-button>
              </div>
            </el-form>
          </li>

element-plus，请问如何对一行el-form-item内多个el-input输入框的校验？element-plus，请问如何对一行el-form-item内多个el-input输入框的校验？

回复
1个回答
avatar
test
2024-06-25

我只写一个主天线的示例，经过验证可以，你就续写下去就可以:

<div>
    <el-form-item prop="mainTx" label="主天线杆臂(mm):">
        <el-input prop="x" v-model.trim="RtkForm.x" />
        <el-input prop="y" v-model.trim="RtkForm.y" />
        <el-input prop="z" v-model.trim="RtkForm.z" />
    </el-form-item>
</div>
const RtkForm = reactive({
    mainTx: "",
    x: "",
    y: "",
    z: "",
    //...
})

function isIntegerOrDecimal(str) {
    let num = parseFloat(str);
    return Number.isInteger(num) || Number.isFinite(num);
}

const checkNumber = (rule, value, callback) => {
    if (!RtkForm.x || !isIntegerOrDecimal(RtkForm.x)) {
        callback(new Error('第一个框请输入整数或小数'));
    } else if (!RtkForm.y || !isIntegerOrDecimal(RtkForm.x)) {
        callback(new Error('第二个框请输入整数或小数'));
    } else if (!RtkForm.z || !isIntegerOrDecimal(RtkForm.z)) {
        callback(new Error('第三个框请输入整数或小数'));
    } else {
        callback();
    }
}

更新:我发现这样写更简单粗暴,只不过没提示了

<el-form-item label="主天线杆臂(mm):">
<el-input  @input="(v) => (RtkForm.x = v.replace(/[^\d.]/g, ''))" v-model="RtkForm.x" />
<el-input  @input="(v) => (RtkForm.y = v.replace(/[^\d.]/g, ''))" v-model="RtkForm.y" />
<el-input  @input="(v) => (RtkForm.z = v.replace(/[^\d.]/g, ''))" v-model="RtkForm.z" />
</el-form-item>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容