elementui el-form验证之坑

一.使用方法

 <el-form
            ref="formLabelAlign"
            :rules="rules"
            label-position="top"
            label-width="80px"
            :model="formLabelAlign"
          >
            <div class="detail_title">
              信息填写
            </div>
            <el-form-item label="新旧程度" prop="degreeType">
              <el-select
                v-model="formLabelAlign.degreeType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品标题" prop="commodityTitle">
              <el-input
                v-model="formLabelAlign.commodityTitle"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品描述" prop="commodityDescription">
              <el-input
                type="textarea"
                :rows="3"
                v-model="formLabelAlign.commodityDescription"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品展示" prop="commodityImages">
              <el-upload
                class="avatar-uploader"
                multiple
                :limit="3"
                action="#"
                list-type="picture-card"
                ref="upload_img"
                :before-upload="beforeUp"
                :http-request="uploadFun"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
            <div class="detail_title">
              价格填写
            </div>
            <el-form-item label="入手价" prop="price">
              <el-input
                type="Number"
                v-model="formLabelAlign.price"
                placeholder="请输入入手价"
              ></el-input>
            </el-form-item>
            <el-form-item label="转让价" prop="transferPrice">
              <el-input
                type="Number"
                v-model="formLabelAlign.transferPrice"
                placeholder="请输入转让价"
              ></el-input>
            </el-form-item>
            <div class="detail_title">
              联系人信息填写
            </div>
            <el-form-item label="姓名" prop="linkMan">
              <el-input
                v-model="formLabelAlign.linkMan"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="mobile">
              <el-input
                type="Number"
                v-model="formLabelAlign.mobile"
                placeholder="请输入联系电话"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button>取消</el-button>
              <el-button type="primary" @click="submitForm('formLabelAlign')"
                >立即创建</el-button
              >
            </el-form-item>
          </el-form>

 逻辑:

data内的验证规则

 rules: {
        // 新旧程度校验
        degreeType: [
          { required: true, message: "请选择新旧程度", trigger: "blur" }
        ],
        // 商品标题校验
        commodityTitle: [
          { required: true, message: "请输入商品标题", trigger: "blur" }
        ],
        // 商品描述校验
        commodityDescription: [
          { required: true, message: "请输入商品描述", trigger: "blur" }
        ],
        // 商品图片校验
        commodityImages: [
          { required: true, message: "请上传商品图片", trigger: "blur" }
        ],
        // 入手价校验
        price: [{ required: true, message: "请输入入手价", trigger: "blur" }],
        // 转让价校验
        transferPrice: [
          { required: true, message: "请输入转让价", trigger: "blur" }
        ],
        // 姓名校验
        linkMan: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        // 手机号校验
        mobile: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]||19[0-            
                        9]14[57])[0-9]{8}$/;
              if (!reg.test(value)) {
                return callback(new Error("手机格式不正确"));
              } else {
                callback()
              }
            },
            message: "手机格式不正确",
            trigger: "blur"
          }
        ]
      },

需要记住的是自定义的验证的validator:(rule, value, callback）=>{  callback()}一定要在条件之后选择回调，否则表单提交的时候不会执行下去，

 async submitForm(formName) {
      let that = this;
      console.log(formName);
      let valid = await that.$refs[formName].validate().then((res) => {
        console.log(res);
      }).catch((err) => {
        console.log(err);
      })
      console.log(valid) //如果没有callback(),不会到这里
    },