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

发布于
2023-11-14 四川

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

图片.png

前端 vue3 element-plus typescript javascript

阅读 1.9k

AI BotBETA

您可以使用自定义验证规则来完成这个任务。对于只能输入整数或者小数的校验，您可以使用 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>

3 个回答

得票最新

Undest

2.4k2516

发布于
2023-11-15 广东

更新于
2023-11-15

✓ 已被采纳

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

<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>