vue+element-ui 简单表单、复杂表单的校验

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情​

 1、背景

公司最近开发的业务系统中，涉及到表单提交相关的内容，在表单提交之前，需要对表单中的内容是否填写进行校验，一些是简单表单校验、一些是复杂结构的表单校验，对于入前端坑不久的我，在此做下记录，以便理解的更深入一些。

话不多说，先上效果图：

​编辑

 其中 "商品属性" 是普通表单校验；

”联系电话“、”表格数据“ 表单属于复杂表单校验。

2、具体实现

2.1 校验原理

vue中的表单校验是通过调用

this.$refs[form].validate((valid, object)=>{
//valid 返回校验结果是一个boolean值，true 表示校验通过， false 表示校验未通过
//object 返回未校验通过的对象
}
)

来触发校验规则的，返回值打印如下图所示：

​编辑

 2.2 具体实现

布局代码：

<!-- 复杂表单校验 -->
<div class="box-class">
  <div class="box-content">
  <el-form ref="form" :model="form" label-width="156px" label-position="left" :rules="rules">
    <el-form-item label="商品类型" prop="goodType">
      <el-radio-group v-model="form.goodType">
      <el-radio :label="1">文具</el-radio>
      <el-radio :label="2">零食</el-radio>
      <el-radio :label="3">厨具</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="商品属性" prop="goodAttr">
      <el-input class="item-attr" placeholder="请选择" v-model="form.goodAttr" clearable></el-input>
    </el-form-item>
    <el-form-item label="联系电话" prop="phons">
      <div class="item-div" v-for="(item,index) in form.phons" :key="index">
        <el-form-item label="" :prop="'phons.'+index" :rules="phoneRules">
          <el-input class="item-attr" placeholder="请填写电话" v-model="form.phons[index]" clearable></el-input>
          <i class="item-opt el-icon-circle-plus-outline" @click="optClick(0)" ></i>
          <i class="item-opt el-icon-remove-outline" @click="optClick(1,index)" v-if="form.phons.length > 1"></i>
        </el-form-item>
      </div>
    </el-form-item>
    <el-form-item label="表格数据">
      <el-table :data="form.tableDatas" align="center" border style="width:244px">
        <el-table-column label="等级名称" prop="name"></el-table-column>
        <el-table-column label="等级倍数" prop="value" style="height:70px">
          <template slot-scope="scope">
            <div style="height:70px;display: flex;align-items: center;">
              <el-form-item label="" :prop="'tableDatas.'+scope.$index+'.value'" :rules="tableRules">
                <el-input v-model="scope.row.value" placeholder="N"></el-input>
              </el-form-item>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
  </el-form>
  </div>
  <div class="box-footer">
    <el-button @click="confirm">确定</el-button>
  </div>
</div>

 关注点有几个：

1）el-form 设置 :rules ，并且 el-form-item中的prop 中的名称 需rules 中设置的名称保持一致，不然不会生效。

2）复杂表单中prop的写法

:prop="'phons.'+index"

通过index确定是哪一个值

3）表格中prop的写法

:prop="'tableDatas.'+scope.$index+'.value'"

 js代码：

data() {
        return {
            phoneRules: [
                {
                    required: true,
                    message: "请填写",
                    trigger: "blur"
                }
            ],
            tableRules: [
                {
                    required: true,
                    message: "请填写",
                    trigger: "blur"
                }
            ],
            rules: {
                goodAttr1: [
                    {
                        required: true,
                        message: "请填写",
                        trigger: ["blur"]
                    }
                ]
            },
            form: {
                goodType: 1,
                goodAttr: "",
                phons: [""],
                tableDatas: [
                    { name: "李四", value: "" },
                    { name: "王五", value: "" },
                ]
            },
}
}
methods: {
        optClick(type, index) {
            if (type == 0) {
                //add
                this.form.phons.push("");
            }
            else {
                //减少
                this.form.phons.splice(index, 1);
            }
        },
        //提交
        confirm() {
            this.$refs.form.validate((valid, object) => {
              console.log("检验结果valid =>",valid, " ;返回的object=>", object)
                if (valid) {
                    this.$message({
                        message: "校验通过",
                        type: "success"
                    });
                }
                else {
                    this.$message({
                        message: "校验未通过",
                        type: "error"
                    });
                }
            });
        },
}

js代码比较逻辑比较简单，主要是定义了规则以及定义了form表单

样式代码：

<style lang="less" scoped>
.box-class {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.box-content {
  flex-direction: column;
}

.item-attr{
  width: 220px;
}

.item-div{
  margin-bottom: 18px;
}
.item-div:last-child{
  margin-bottom: 0px;
}
.item-opt{
  font-size: 18px;
}
</style>

好了，到这里表单的校验都实现了。