input设置必填项

 <el-dialog :title="dialoguide" :visible.sync="dialogFormVisible" ref="dialogRef" @close="cancel()" width="40%">
        <el-form :model="formInfo" :rules="rules" ref="formData">
          <el-form-item label="导购编码" :label-width="formLabelWidth" prop="guideCode">
            <el-input v-model="formInfo.guideCode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="导购名称" :label-width="formLabelWidth" prop="guideName">
            <el-input v-model="formInfo.guideName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="导购电话" :label-width="formLabelWidth" prop="guidePhone">
            <el-input v-model="formInfo.guidePhone" type="number" autocomplete="off"
              oninput="if(value.length>11)value=value.slice(0,11)"></el-input>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-switch v-model="formInfo.status" active-color="#13ce66" :active-value="1" :inactive-value="0"
              inactive-color="#ff4949" @click="changeSwitch">
            </el-switch>

重点：设置:rules=“rules”
在需要的字段添加prop=“设置个名称”
之后在data里定义：

区别：blur失去焦点时提醒，change数据改变时提醒

 rules: {
          guideCode: [{
              required: true,
              message: '请输入导购编码',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 20,
              message: '长度在 3 到 20个字符',
              trigger: 'blur'
            }
          ],
          guideName: [{
              required: true,
              message: '请输入导购姓名',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 20,
              message: '长度在 1 到 20个字符',
              trigger: 'blur'
            }
          ],
        },