Проверка с использованием компонента формы компонента ElementUI в Vue2

Сначала подготовьте некоторые элементы el-form.В el-form:model (v-bind:model) это одноэлементная привязка.Если написать v-model="" может показаться, что проверка не имеет никакого эффекта.

 Вот результат после проверки 

Начните использовать его прямо сейчас! 

1. Привязать реф в эл-форме, имя самодельное, и его нужно использовать для последующих результатов проверки триггера

2. Подготовить объект правил, который содержит содержимое проверки

3. Элемент, который нужно проверить, нужно добавить с помощью prop, который соответствует содержанию проверки. Обратите внимание, что если это двусторонняя привязка, такая как (ввод), имя реквизита должно быть таким же, как имя связанного элемента.Например, если данные моей коллекции SkuForm.skuName, то значение реквизита равно skuName, иначе может не пройти проверку.

<el-form ref="SkuForm" label-width="100px" :rules="rules" :model="SkuForm">
        <el-form-item label="SPU名称" prop="prop">
          <span>{
   
   { spu.spuName }}</span>
        </el-form-item>
        <el-form-item label="SKU名称" prop="skuName">
          <el-input placeholder="请输入SKU名称" v-model="SkuForm.skuName"></el-input>
        </el-form-item>
        <el-form-item label="价格（元）" prop="price">
          <el-input placeholder="价格(元素)" v-model="SkuForm.price"></el-input>
        </el-form-item>
        <el-form-item label="重量（千克）" prop="weight">
          <el-input placeholder="重量（千克）" v-model="SkuForm.weight"></el-input>
        </el-form-item>

        <el-form-item label="规格说明" prop="skuDesc">
          <el-input type="textarea" rows="4" v-model="SkuForm.skuDesc"></el-input>
        </el-form-item>

        <el-form-item label="图片列表" prop="skuImageList">
          <!-- :data="tableData" -->
          <el-table style="width: 100%" border :data="skuImageList" @selection-change="changeSelect" ref="ImageTable"
            :highlight-current-row="true">
            <el-table-column type="selection" width="55" prop="prop">
            </el-table-column>
            <el-table-column label="图片" prop="prop">
              <template slot-scope="{row,$index}">
                <img :src="row.imgUrl" style="width:100px;height:100px" />
              </template>
            </el-table-column>
            <el-table-column label="名称" prop="imgName">
            </el-table-column>
            <el-table-column label="操作" prop="caozuo">
              <template slot-scope="{row,$index}">
                <el-button type="primary" v-if="row.isDefault == 0" @click="changeDefault(row)">设置默认</el-button>
                <el-button v-else>默认</el-button>
              </template>
            </el-table-column>

          </el-table>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="medium" @click="saveSku">保存</el-button>
          <el-button size="medium" @click="Cancel">取消</el-button>
        </el-form-item>
      </el-form>

сохраненные данные

data(){
    //自定义校验--校验图片有没有选择 默认图片表示为1
     var checkimageList = (rule, value, callback) => {
      let result = false; 
      if(this.imageList) {
        //如果没有默认图片，就返回true不放行。有默认图片就返回false放行
        result = this.imageList.every(item => {
          return item.isDefault != 1
        })
      }else{
        //没有选择的情况也是不放行的
        result = true
      }
      
      if (result) {
        callback("还没有选择默认图片哦~")
      }
      callback()
 
      }
    return{

        rules: {
        // 如果是双向绑定的如（input）的prop的名字必须和绑定的元素一样
        skuName: [
          { required: true, message: 'SkuName名称不能为空哦~', trigger: 'blur' },
            ],
        price: [
          { required: true, message: '请输入价格~', trigger: 'blur' },
        ],

        weight: [
          { required: true, message: '请输入重量~', trigger: 'blur' },
        ],
        skuDesc: [
          { required: true, message: '请输入描述~', trigger: 'blur' },
        ],

        // 检查图片是否有选择
        skuImageList: [
          { required: true,validator: checkskuImageList , trigger: 'change' }
        ]
      },

      SkuForm: {
        skuName: '',
        spuId: 0,
        weight: '',
        price: '',
        skuDesc: '',
      },

      //保存图片的
      skuImageList: []
    },
    

}

 this.$refs.SkuForm.validate((valida) => {
        if (valida) {
             //如果以上校验通过，则会返回true
            //执行其他业务
        }
      })