Vue+Element表单验证

1.首先给form表单绑定rules规则，然后绑定ref

<el-form ref="form" :rules="rules" :model="form"> //主要看这一行绑定得rules和ref
   <el-form-item prop="name" :label="formTable[0]" label-width="100px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item prop="power" :label="formTable[1]" label-width="100px">
          <el-input-number
            v-model.number="form.power"
            controls-position="right"
            @change="handleChange"
          ></el-input-number>
   </el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
    <el-button @click="hide">取 消</el-button>
    <el-button type="primary" @click="handleSubmit">确 定</el-button>
</div>

2.定义具体规则

我这里定义得规则是，第一项不能为空，第二项也不能为空，且必须是数字

 rules: {
        //表单规则项
        name: { required: true, message: "请输入内容", trigger: "blur" },
        power: [
          { required: true, message: "该项不能为空" },
          { type: "number", message: "必须为数字值" },
        ],
      },

3.提交验证

 handleSubmit() {
 //你绑定ref名是什么，这里this.$refs['xxx']什么，需要是字符串
      this.$refs["form"].validate((valid) => {
        if (valid) {
          //通过验证
          this.$emit("submitFrom", this.form);
        } else {
          console.log("error submit!");
          return false;
        }
      });
    },