当先锋百科网

首页 1 2 3 4 5 6 7

ElementUI表单验证例子

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>