element-ui的Form表单设置自定义校验规则。input输入框设置必填。input框前红色*号的设置。

首先，从element-ui中找到你需要的组件

    <el-dialog title="名单列表" :visible.sync="dialogFormVisible">
      <el-form :model="addSlipForm">
        <el-form-item label="微信openid" :label-width="formLabelWidth">
          <el-input v-model="addSlipForm.wx_openid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="微信昵称" :label-width="formLabelWidth">
          <el-input v-model="addSlipForm.nick_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSlipSure()">确 定</el-button>
      </div>
    </el-dialog>

在组件中填写方法中需要的属性（ref，prop，:ruls）

    <el-dialog title="名单列表" :visible.sync="dialogFormVisible">
      <el-form :model="addSlipForm" :rules="rules" ref="addSlipForm">
        <el-form-item label="微信openid" :label-width="formLabelWidth" prop="wx_openid">
          <el-input v-model="addSlipForm.wx_openid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="微信昵称" :label-width="formLabelWidth">
          <el-input v-model="addSlipForm.nick_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSlipSure('addSlipForm')">确 定</el-button>
      </div>
    </el-dialog>

在data中加入

dialogFormVisible: false,
addSlipForm: {
  id: "",
  wx_openid: "",
  nick_name: ""
},
formLabelWidth: "120px",
rules:{wx_openid:[{required:true,message:"请输入微信openid",trigger:'blur'}]}

在methods方法中加入

async addSlipSure(formName) {
  await this.$refs[formName].validate()
}

图示为