<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'
}
],
},