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

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

1.  
   <el-dialog title="名单列表" :visible.sync="dialogFormVisible">
2.  
   <el-form :model="addSlipForm">
3.  
   <el-form-item label="微信openid" :label-width="formLabelWidth">
4.  
   <el-input v-model="addSlipForm.wx_openid" autocomplete="off"></el-input>
5.  
   </el-form-item>
6.  
   <el-form-item label="微信昵称" :label-width="formLabelWidth">
7.  
   <el-input v-model="addSlipForm.nick_name" autocomplete="off"></el-input>
8.  
   </el-form-item>
9.  
   </el-form>
10.  
    <div slot="footer" class="dialog-footer">
11.  
    <el-button @click="dialogFormVisible = false">取 消</el-button>
12.  
    <el-button type="primary" @click="addSlipSure()">确 定</el-button>
13.  
    </div>
14.  
    </el-dialog>

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

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

在data中加入

1.  
   dialogFormVisible: false,
2.  
   addSlipForm: {
3.  
   id: "",
4.  
   wx_openid: "",
5.  
   nick_name: ""
6.  
   },
7.  
   formLabelWidth: "120px",
8.  
   rules:{wx_openid:[{required:true,message:"请输入微信openid",trigger:'blur'}]}

在methods方法中加入

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

图示为

这篇好文章是转载于：学新通技术网