526互联

使用:required="true"时，el-form 表单验证出现xxx is required

发布时间 2023-08-10 13:06:50作者: 周文豪

原来的代码：

<el-row>
          <el-col :span=24>
            <el-form-item :required="true" label="产品图片：" prop="productPicList" ref="upload-element">
              <file-upload ref="productPic" :keyId="productForm.id" :businessObject.sync="productForm.productPicList"
                           :fileList="productForm.productPicList" tableName="t_applet_product" fieldName="productPic" name="查看"
                           :editable="!disabled" fileType="jpg,png,jpeg,pdf" />
            </el-form-item>
          </el-col>
        </el-row>

报错如下：

解决办法：required属性不要用在form-item里，在rules中添加规则

修改如下：

<el-row>
          <el-col :span=24>
            <el-form-item label="产品图片：" prop="productPicList" ref="upload-element">
              <file-upload ref="productPic" :keyId="productForm.id" :businessObject.sync="productForm.productPicList"
                           :fileList="productForm.productPicList" tableName="t_applet_product" fieldName="productPic" name="查看"
                           :editable="!disabled" fileType="jpg,png,jpeg,pdf" />
            </el-form-item>
          </el-col>
        </el-row>

在rules中添加规则

rules: {
          productPicList: [
            { required: true, message: '至少要有一张图片', trigger: 'blur' },
          ],
        }