vue使用ElementUI提交表单时验证

场景：当我点击提交表单的按钮时，自动校验是否满足条件

最终效果如下：

 HTML：

<div class="addShopTemp">
          <el-form :inline="true" :rules="shopRules" ref="addShopFormRef" :model="addShopData" status-icon class="shopForm">
            <el-form-item label="商品名称" prop="shopName">
              <el-input v-model="addShopData.shopName" placeholder="请输入商品名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="商品单价" prop="shopPrice">
              <el-input v-model.number="addShopData.shopPrice" placeholder="请输入商品单价" clearable></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="shopCount">
              <el-input v-model.number="addShopData.shopCount" placeholder="请输入商品数量" clearable></el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="addShop">添加商品</el-button>
        </div>

:rules="shopRules"  校验规则

ref="addShopFormRef"  ref为后面的校验做铺垫

:model="addShopData"  绑定的数据

 :inline="true"  表示横向布局

prop="shopName"  表示校验时需要用的元素名称

v-model.number="addShopData.shopPrice"  表示这个input框里，只能输入数字类型

 JS：

shopRules:{
        shopName:[
          { required: true, message: '请输入商品名称', trigger: 'blur' },
        ],
        shopPrice:[
          { required: true, message: '请输入商品单价', trigger: 'blur' },
          { type: 'number', message: '商品单价必须为数字值'}
        ],
        shopCount:[
          { required: true, message: '请输入商品数量' },
          { type: 'number', message: '商品数量必须为数字值'}
        ]
      }

这是校验的规则

addShop(addShopData){//添加商品
      this.$refs.addShopFormRef.validate(valid => {
        if(valid){
          ......
        }
      })
    },

这一步是提交时，校验定义的ref属性：addShopFormRef 的 方法 validate 是否为true

为true则通过校验，否则未通过校验

到这就完成了表单提交时的校验   (#^.^#)