iview-InputNumber-表单验证

最新推荐文章于 2025-05-14 17:20:52 发布

原创最新推荐文章于 2025-05-14 17:20:52 发布 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#view design #javascript #前端

iView 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何为Vue中InputNumber组件设置正确的表单验证规则，确保用户输入的分区数和副本数符合要求。

给InputNumber加表单验证，不管输入啥，都是false

<Form ref="elasticsearchViewForm" :model="viewForm" inline :label-width="100" :rules="esViewFormRules"
      label-position="right">
      <FormItem label="分区数:" prop="partitions">
        <InputNumber style="width: 250px" v-model="viewForm.partitions" placeholder="请输入分区数" class="add-input"
          :maxlength="300" />
        {{ viewForm.partitions }}
      </FormItem>
      <FormItem label="副本数:" prop="replicas">
        <InputNumber style="width: 250px" v-model="viewForm.replicas" placeholder="请输入副本数" class="add-input"
          :maxlength="300" />
      </FormItem>
</Form>

esViewFormRules: {
        partitions: [
          {
            required: true,
            trigger: "blur",
            message: "请输入分区数",
            type: 'number'
          },
        ],
        replicas: [
          {
            required: true,
            trigger: "blur",
            message: "请输入副本数",
            // ！！！！！！！一定要加type，否则验证一直失败！！！！！！！！！
            // 不加type，默认是string,所以一直失败
            type: 'number', 
          },
        ],
      }

   // 手动验证
  this.$refs['elasticsearchViewForm'].validate(valid => {
        console.log('valid------------>', valid);
     this.$emit('validateInput', validate)
   });