html部分

<el-form :model="formData" :rules="formRules" ref="formRef" label-width="60px" class="demo-ruleForm">

            <el-form-item label="" prop="userName">

              <el-input v-model="formData.userName" class="account" placeholder="请输入用户名" ></el-input>

            </el-form-item>

            <el-form-item label="" prop="passWord" >

              <el-input v-model="formData.passWord"  placeholder="请输入密码" class="passWord" type="password"></el-input>

            </el-form-item>

            <el-form-item label="">

              <el-checkbox-group v-model="formData.checked">

                <el-checkbox label="记住密码" class="pwd_cz"></el-checkbox>

              </el-checkbox-group>

            </el-form-item>

            <el-form-item>

              <button type="primary"  @click="submitForm('formData')" class="sub_btn">登录</button>

            </el-form-item>

          </el-form>

data部分:

data() {

    return {

      formData: {

        userName: "",

        passWord: "",

        checked: false,

      },

      formRules: {

        userName: [{required: true,message: "请输入用户名称",trigger: "blur"}],

        passWord: [{required: true,message: "请输入用户密码",trigger: "blur"}],

      }

    };

  },

函数部分：

submitForm(ruleForm) {

      console.log("refs:", this.$refs.formRef);

      let that = this

      this.$refs.formRef.validate((valid) => {

        console.log('valid',valid)

          if (valid) {

            that.handleLogin()

          } else {

            console.log('error submit!!');

            return false;

          }

        });

    },

其中 :model连接的是data里的数据集，:rules连接的是data里的验证规则集，ref用于给此组件命名便于之后函数使用获取整个表单状态用于判断是否符合校验规则，prop用于连接所对应的校验规则。