Form 组件提供了表单验证的功能,只需要通过 rules
属性传入约定的验证规则,并 Form-Item 的 prop
属性设置为需校验的字段名即可。
(http://element-cn.eleme.io/#/zh-CN/component/form)
普通文本输入框:
<el-form-item label="模板名称"prop="title" :rules="[{ required: true, message: '模板名称不能为空'},{max:20, message: '模板名称不能超过20个字符'}]">
<el-input v-model="form.title"placeholder="请输入模板名称(20个字符内)"></el-input>
</el-form-item>
级联选择 or 多选:
<el-form-item label="维系分类"prop="contactLevelTypes":rules="[{ required: true, message: '维系分类不能为空',trigger: 'change',type:'array'}]">
<el-cascader placeholder="请选择维系分类" @change="handleContactLevelChange":options="contactLevelTypeList" v-model="form.contactLevelTypes"></el-cascader>
</el-form-item>
<el-form-item label="VIP等级" prop="vipLevelTypes":rules="[{ required: true, message: 'VIP等级不能为空',type:'array',trigger: 'change'}]">
<el-select v-model="form.vipLevelTypes"placeholder="VIP等级"multiple>
<el-option label="低等级VIP"value="0"></el-option>
<el-option label="VIP1"value="1"></el-option>
<el-option label="VIP2"value="2"></el-option>
</el-select>
</el-form-item>
单选(数字类型值)
<el-form-item label="短信模板" prop="msgTemplateId" :rules="[{ required: true, message: '选择短信模板不能为空',trigger: 'change',type:'number'}]">
<el-select v-model="form.msgTemplateId"placeholder="请选择短信模板"@change="handleMsgTemplateChange">
<el-option v-for="item in msgTemplateItems" :key="item.id":label="item.subject":value="item.id">
</el-option>
</el-select>
</el-form-item>
|