首页 > 其他分享 >Element select表单必填验证

Element select表单必填验证

时间:2023-07-04 18:44:05浏览次数:35  
标签:必填 表单 prop model Element type array 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'}
            ]
          }

标签:必填,表单,prop,model,Element,type,array,select
From: https://www.cnblogs.com/zh76412950/p/17526729.html

相关文章

  • element-ui表格多选
    <template><el-tablesize="medium"v-loading="tableLoading":data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"stripeheight="100%&q......
  • Element-布局
     Layout布局<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.el-row{margin-bottom:20px;}.el-col......
  • Element-快速入门
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><divid="app"><div><el-button>默认按钮......
  • el-select获取当前选择的label值
    例如<el-selectv-model="biaotou11"placeholder="请选择模型类别"clearable@change="biaotouchange"ref="dataTypeSelect1"><el-optionv-for="tabnamein......
  • 直播平台搭建源码,multiple-select 单选框多选框的用法
    直播平台搭建源码,multiple-select单选框多选框的用法         <divclass="row">            <divclass="col-sm-11">              <divclass="input-group">            ......
  • element-ui弹出框模板
    <el-dialogwidth="650px"append-to-body:show-close="false":modal="false":visible.sync="dialogRegisterVisible"><el-formv-show="!isLogin"ref......
  • element-ui表格模板
    <template><divclass="container"><divclass="breadcrumb"><el-breadcrumbseparator-class="el-icon-arrow-right"><el-breadcrumb-item>个人中心</el-breadcrumb-item>&......
  • vue+element-ui 实现可编辑表格、动态渲染表头和表格数据、列向数据合计(每行末尾合计
    HTML部分代码<template> <div>  <el-container>   <el-header>Header</el-header>   <el-main>    <div>     //表格数据在这里::data="tableData"     <el-table      border    ......
  • elementui 手动上传文件 post 请求
    //上传图片校验  fileChange(file){   constisJPG=file.raw.type==='image/jpeg'   constisPNG=file.raw.type==='image/png'   constisLt2M=file.raw.size/1024/1024<0.2   if(!isPNG&&!isJPG){   ......
  • vue+elementui实现树形结构表格且合并同一个children的单元格
    1、实现效果2、结构代码(给table添加classname)3、通过设置css实现合并同一个children的单元格.nonRelationalDatabase{//去除横向边框::v-deep.el-table__row{  td{   border-bottom:none!important;  } }//......