vue el-form 多种校验

发布时间 2023-08-17 14:20:03作者: 技术杨
 rules:Object.freeze({
          name1: [{ required: true, message: '请输入发放计划编码', trigger: 'blur' },{ pattern: /^(?!\s+).*(?<!\s)$/,  message: '首尾不能为空格', trigger: 'blur' } ],
      name2: [ { required: true, message: '请输入发放计划名称', trigger: 'blur' } ,
      name3: [ { required: true, type: 'array', min: 1, message: '请至少选择一个劳保物品', trigger: 'blur' } ], //判断数组
}),
   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
        <el-form-item label="发放计划编码" prop="name1">
          <el-input v-model="ruleForm.name2" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="发放计划名称" prop="name2">
          <el-input v-model="ruleForm.name3" style="width: 200px" maxlength="50" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="计划发放劳保物品" prop="name3">
          <el-button size="medium" type="primary" @click="addGoods">选择劳保物品</el-button>
          <div v-model="ruleForm.name3"> //必須用div 双向綁定对应的数字
            <add-list :list="tableData" @on_remove="on_remove"></add-list>
          </div>
        </el-form-item>
     </el-form>