Vue中form表单校验rules的问题（对象数组过滤新对象数组，对象校验，数组校验，）

@贱小涛

已于 2023-08-11 11:45:50 修改

阅读量3.3k

点赞数

分类专栏： VUE基础文章标签： vue.js 前端 javascript

于 2023-05-27 19:26:44 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45034835/article/details/130904666

版权

VUE基础专栏收录该内容

1 篇文章

订阅专栏

js遍历对象数组通过过滤将字段值=0的过滤到新的对象数组中

form.value.leftPinCameraConfigList=response.data.filter(item=> item.pinType==0);

对象数组：每个元素都是一个对象，每个对象有自己的属性和值，可以通过对象的属性名来访问对象的值集合数组：每个元素是一个简单的值，没有属性名，只有值。可以通过索引号来访问集合数组的值

let objArr = [
  { name: 'Tom', age: 20 },
  { name: 'John', age: 25 },
  { name: 'Mary', age: 30 }
];
`et setArr = [1, 2, 3, 4, 5];``

<div v-for="item in objArr">
  <p>{{ item.name }}</p>
  <p>{{ item.age }}</p>
</div>

<div v-for="item in setArr">
  <p>{{ item }}</p>
</div>

表单对象和单个字段校验

      <el-form-item label="品名:"  prop="name"  label-width="60px" >
        <el-input style="width:160px;margin-left: 15px;" v-model="form.name" placeholder="请输入品名名称" :disabled="true"   />
      </el-form-item>
      <el-row style="margin-top: -8px;">
        <el-form-item label="X:" prop="vehicleInitialPositionX" label-width="155px"  >
          <el-input style="width:130px;margin-left: 8px;margin-top: 5px;" v-model="form.vehicleObject.vehicleInitialPositionX" placeholder="X" />
        </el-form-item>
      </el-row>
      </el-form>

数组校验

  <el-col :span="3">
    <span style=" margin-left: -18px;  ">{{form.cameraNamesList[index].cname}}：</span>
  </el-col>
  <el-col :span="2.2"  >
    <!-- <el-form-item :prop="`cameraParameterList.${index}.initialPosition`" label-width="10px"  :rules="rules.backLight"> -->
    <el-form-item :prop="`cameraParameterList.${index}.initialPosition`" label-width="10px"  :rules="rules.initialPosition" >
      <el-input style=" width:68px;margin-left: -30px;" 
        v-model="form.cameraParameterList[index].initialPosition" placeholder="" />
    </el-form-item>
  </el-col>
  <el-col :span="2.2"   style=" margin-left: 2px">
    <el-form-item :prop="`cameraParameterList.${index}.initialPositionSpeed`" label-width="10px"  :rules="rules.initialPositionSpeed" >
      <el-input style=" width:68px"
        v-model="form.cameraParameterList[index].initialPositionSpeed" placeholder="" />
    </el-form-item>
  </el-col>
  <el-col :span="2.2"   style=" margin-left: 2px">
    <el-form-item :prop="`cameraParameterList.${index}.startShootingPosition`" label-width="10px" :rules="rules.startShootingPosition" >
      <el-input style=" width:68px" 
        v-model="form.cameraParameterList[index].startShootingPosition" placeholder="" />
    </el-form-item>
  </el-col>
  <el-col :span="2.2"   style=" margin-left: 2px">
    <el-form-item :prop="`cameraParameterList.${index}.startShootingPositionSpeed`" label-width="10px"  :rules="rules.startShootingPositionSpeed">
      <el-input style=" width:68px" 
        v-model="form.cameraParameterList[index].startShootingPositionSpeed" placeholder="" />
    </el-form-item>
  </el-col>
  <el-col :span="2.2"   style=" margin-left: 2px">
    <el-form-item :prop="`cameraParameterList.${index}.endShootingPosition`" label-width="10px" :rules="rules.endShootingPosition" >
      <el-input style=" width:68px" 
        v-model="form.cameraParameterList[index].endShootingPosition" placeholder="" />
    </el-form-item>
  </el-col>
  <el-col :span="2.2"   style=" margin-left: 2px">
    <el-form-item :prop="`cameraParameterList.${index}.endShootingPositionSpeed`" label-width="10px" :rules="rules.endShootingPositionSpeed" >
      <el-input style=" width:68px" 
        v-model="form.cameraParameterList[index].endShootingPositionSpeed" placeholder="" />
    </el-form-item>
  </el-col>
  <el-col :span="2.2"   style=" margin-left: 2px">
    <el-form-item :prop="`cameraParameterList.${index}.focusPosition`" label-width="10px"  :rules="rules.focusPosition" >
      <el-input style=" width:68px" 
        v-model="form.cameraParameterList[index].focusPosition" placeholder="" />
    </el-form-item>
  </el-col>
  <el-col :span="2.2"   style=" margin-left: 2px">
    <el-form-item :prop="`cameraParameterList.${index}.focusPositionSpeed`" label-width="10px" :rules="rules.focusPositionSpeed"  >
      <el-input style=" width:68px" 
        v-model="form.cameraParameterList[index].focusPositionSpeed" placeholder="" />
    </el-form-item>
  </el-col>
</el-row>

      </el-form>

定义

const data = reactive({
        form: {
          radioLeft:1,
          name: null,
          productNameId: null，
          vehicleObject: reactive({
            id: null,
            productNameId: null,
            vehicleInitialPositionX:null,
            vehicleInitialPositionY:null,
            vehicleClampPositionX:null,
            vehicleClampPositionY:null,
            clampMoment:null,
            vehicleInitialPositionSpeed:null,
            vehicleClampPositionSpeed:null,
          }),
          cameraParameterList: [
            { productNameId: null,
              initialPosition: null,
              initialPositionSpeed: null,
              startShootingPosition: null,
              startShootingPositionSpeed: null,
              endShootingPosition: null,
              endShootingPositionSpeed: null,
              focusPosition: null,
              focusPositionSpeed: null,   
            },
            {
              productNameId: null,
              initialPosition: null,
              initialPositionSpeed: null,
              startShootingPosition: null,
              startShootingPositionSpeed: null,
              endShootingPosition: null,
              endShootingPositionSpeed: null,
              focusPosition: null,
              focusPositionSpeed: null,   
            },
            {
              productNameId: null,
              initialPosition: null,
              initialPositionSpeed: null,
              startShootingPosition: null,
              startShootingPositionSpeed: null,
              endShootingPosition: null,
              endShootingPositionSpeed: null,
              focusPosition: null,
              focusPositionSpeed: null,   
            },
            {
              productNameId: null,
              initialPosition: null,
              initialPositionSpeed: null,
              startShootingPosition: null,
              startShootingPositionSpeed: null,
              endShootingPosition: null,
              endShootingPositionSpeed: null,
              focusPosition: null,
              focusPositionSpeed: null,   
            },
            //第五个相机参数
            {
              productNameId: null,
              initialPosition: null,
              initialPositionSpeed: null,
              startShootingPosition: null,
              startShootingPositionSpeed: null,
              endShootingPosition: null,
              endShootingPositionSpeed: null,
              focusPosition: null,
              focusPositionSpeed: null,   
            },
          ],

move

const data = reactive({
form: {

radioLeft: 1,
name: null,
productNameId: null,
lightObject1: reactive({
  id: null,
  productNameId: null,
  cameraType: "",
  cameraIp: "",
  shootingNumber: "",
  exposureTime: "",
  gain: "",
  length: "",
  width: "",
  picturePath: "",
  continuousShootingNumber: "",
  triggerTime: "",
}),
//相机参数集合
lightCamera: reactive([]),}

js
//往数组中添加这八个相机配置参数
for(var i=0;i<8;i++){
const clonedLightObject1 = { …data.form.lightObject1 };
clonedLightObject1.productNameId=pid
clonedLightObject1.cameraType=i
clonedLightObject1.shootingNumber=1

  data.form.lightCamera.push(clonedLightObject1);
}

页面

<el-dialog :title="title" v-model="openLightCamera" width="950px" append-to-body  v-if="openLightCamera">
   
  <el-form ref="lightRefs" :model="form.lightCamera" :rules="rulesws" label-width="60px"   >
    <el-row v-for="(i, index) in form.lightCamera.length" style="margin-top: -2px;">
    <el-col :span="3">
      <span
        style=" margin-left: -8px;font-size: 10px;font-weight:bold;   ">{{formatStatus(form.lightCamera[index].cameraType) }}</span>
    </el-col>
    <el-col :span="2" style=" margin-left: -38px">
      <!-- <el-form-item :prop="`cameraParameterList.${index}.initialPosition`" label-width="10px"  :rules="rules.backLight"> -->
      <el-form-item :prop="`lightCamera.${index}.cameraType`" label-width="10px"
        :rules="rules.initialPositions"
        >
        <el-input style=" width:65px;margin-left: 5px; font-size: 5px;"  :disabled="true"
          v-model="form.lightCamera[index].cameraType" placeholder="" />
      </el-form-item>
    </el-col>
    </el-row>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <!-- v-hasPermi="['org:lightParameter:add']" -->
      <el-button :loading="buttonLoading" type="primary" @click="submitCameraLight()"
      >提交</el-button>
      <el-button @click="openLightCamera = false">取 消</el-button>
    </div>
  </template>
</el-dialog>