Element UI表单中验证两个输入框

最新推荐文章于 2023-07-18 17:29:38 发布

原创最新推荐文章于 2023-07-18 17:29:38 发布 · 3.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

该博客探讨了如何在Vue中实现双向数据绑定的输入验证，特别是在表单元素中使用v-bind和三目运算符来确保至少一个输入字段有值。当两个输入框都没有输入时，会触发提示信息。示例代码展示了如何结合v-model和rules属性来设置必填和数字类型的验证规则。

若选择其中两个input一起进行验证，用v-bind(也就是:)绑定prop,然后用三目运算符就可以实现了，但是后面的一定要加单引号

可以两个都输入，也可以任意一个输入，若两个都没有输入数据就会有提示

<el-form-item :prop="formLabelAlign.machNum == '' ? 'smallMachNum' : 'machNum'" label="机器台数" class="num">
          <el-input v-model.number="formLabelAlign.machNum" placeholder="大"></el-input>
          <el-input v-model.number="formLabelAlign.smallMachNum" placeholder="小"></el-input>
</el-form-item>

return {
        formLabelAlign: {
          machNum: "",
          smallMachNum:""
        },

 rules: {
          machNum: [
            { trigger: "blur", required: true, message: "请输入数量" },
            { type: "number", message: "必须为数字值" },
          ],     
          smallMachNum: [
            { trigger: "blur", required: true, message: "请输入数量" },
            { type: "number", message: "必须为数字值" },
          ]
        },