vue 前端组件表单动态验证（必填），设置默认值

最新推荐文章于 2024-04-15 13:10:17 发布

诠释未完の流年

最新推荐文章于 2024-04-15 13:10:17 发布

阅读量1.8k

点赞数

分类专栏：前端文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/Amber_Elva/article/details/129578781

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

element组件：

<el-form ref="groupAddForm" :model="groupAddForm" label-width="110px" label-position="left" :rules="rules">
        <el-row>
          <el-col>
            <el-divider />
            <el-form-item label="名称" prop="key1" :rules="key1 ? carouselSpeed : rules.key1">
              <el-input v-model="groupAddForm.key1" maxlength="30" />
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="groupAddForm.data1" />
            </el-form-item>
            <el-form-item label="密码" prop="data2" :rules="data1 ? carouselSpeed : rules.data1">
              <el-input v-model="groupAddForm.data2" minlength="6" maxlength="20" />
            </el-form-item>
            <el-form-item label="XX频率(秒)" prop="carouselSpeed" :rules="carouselSpeed ? carouselSpeed : rules.carouselSpeed">
              <el-input-number
                v-model="carouselSpeed"
                size="small"
                :min="15"
                :step="5"
              />
            </el-form-item>
            <el-form-item label="XX频率(分)" prop="refreshSpeed" :rules="refreshSpeed ? refreshSpeed : rules.refreshSpeed">
              <el-input-number
                v-model="refreshSpeed"
                size="small"
                :min="30"
                :step="5"
              />
            </el-form-item>
          </el-col>
        </el-row>
</el-form>

初始值（根据自己需求）：

props: {
    carouselSpeed: {
      type: Number,
      default: 30 // 默认值
    },
    refreshSpeed: {
      type: Number,
      default: 30 // 默认值
    }
  }

表单验证（必填）

return {
      rules: {
        key1: [{ required: true, message: '请输入rule名', trigger: 'blur' }],
        data1: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        carouselSpeed: [{ required: true, message: '请输入XX频率', trigger: 'blur' }],
        refreshSpeed: [{ required: true, message: '请输入XX频率', trigger: 'blur' }]
      },
    }