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

Question

请问大佬们，如何对一行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>

Answer 1

您可以使用自定义验证规则来完成这个任务。对于只能输入整数或者小数的校验，您可以使用 ruleFormRef 的 validate 方法，检查每个 el-input 输入框的值是否为数字，并且是否为整数或小数。

下面是一个简单的示例，它演示了如何使用 Vue 3 的 ref 和 reactive 来实现这个功能：

<template>  <el-form :model="form" :rules="rules" ref="formRef">    <el-form-item label="输入框1">      <el-input v-model.number="form.input1" />    </el-form-item>    <el-form-item label="输入框2">      <el-input v-model.number="form.input2" />    </el-form-item>    <el-button type="primary" @click="submit">提交</el-button>  </el-form></template><script>export default {  setup() {    const form = reactive({      input1: '',      input2: '',    });    const rules = {      input1: [        { required: true, message: '请输入输入框1的值', trigger: 'blur' },        { validator: (rule, value, callback) => {          if (!Number.isInteger(value)) {            callback(new Error('输入框1只能输入整数'));          } else {            callback();          }        }, trigger: 'blur' }],      input2: [        { required: true, message: '请输入输入框2的值', trigger: 'blur' },        { validator: (rule, value, callback) => {          if (!Number.isInteger(value) && Number.isInteger(Math.round(value))) {            callback(new Error('输入框2只能输入整数或四舍五入至整数'));          } else {            callback();          }        }, trigger: 'blur' }],    };    const formRef = ref(null);    const validate = () => {      formRef.value.validate((valid) => {        if (valid) {          alert('提交成功');        } else {          alert('验证失败');          return false;        }      });    };    return { form, rules, formRef, validate };  },};</script>