Element select表单必填验证
特别注意:如第一段代码这里的区别是prop和v-model绑定的值不一样,这样的话是不行的,他们两个的值必须一样!!!!!而且还有一种情况,就是roleStatus必须要放在form里面,而且还必须是一个数组!!!!
错误写法prop和v-model不一致
<el-form label-width="300px" :rules="rules" :model="changeSourceDataForm">
<el-form-item label="民政部门儿童登记信息: " prop="civilChildrenName11">
<el-select v-model="changeSourceDataForm.civilChildrenName" multiple filterable placeholder="请选择民政部门儿童登记信息"
>
<el-option v-for="item in changeSourceData.civilChildrens" :key="item.id" :label="item.tableName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
正确做法 写法prop和v-model 一致
<el-form label-width="300px" :rules="rules" :model="changeSourceDataForm">
<el-form-item label="民政部门儿童登记信息: " prop="civilChildrenName">
<el-select v-model="changeSourceDataForm.civilChildrenName" multiple filterable placeholder="请选择民政部门儿童登记信息"
>
<el-option v-for="item in changeSourceData.civilChildrens" :key="item.id" :label="item.tableName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
这注意 trigger 和 type,下拉框一般是change来触发验证,type是你v-model绑定的值看看是什么类型,是什么就写什么,我这是数组就写的array。
// 表单校验
rules: {
civilChildrenName: [
{required: true, message: "民政部门儿童登记信息不能为空", trigger: ["blur",'change'],type: 'array'}
]
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了