柚ξ 2021-12-30 14:01 采纳率: 46.2%
浏览 72
已结题

vue表单验证报错,求解答

问题遇到的现象和发生背景

我用的UI框架是 iview,只要有表单的地方就会有这种报错,网上搜出来说是验证错了,但是都没有具体的解决方法

img

<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
          <FormItem label="小区地址" prop="addressName">
            <Input
              v-model="formValidate.addressName"
              placeholder="请选择地址"
              search
              readonly
              @on-search="showAddressSelect"
            />
            <address-select ref="AddressSelect" @setValAddress="setValAddress"></address-select>
          </FormItem>
          <FormItem label="地上层数" prop="upPlies">
            <Input
              v-model="formValidate.upPlies"
              placeholder="输入地上层数"
              @on-keyup="
                formValidate.upPlies = formValidate.upPlies.replace(
                  /[^\d]/g,
                  ''
                )
              "
            />
          </FormItem>
          <FormItem label="地下层数" prop="downPlies">
            <Input
              v-model="formValidate.downPlies"
              placeholder="输入地下层数"
              @on-keyup="
                formValidate.downPlies = formValidate.downPlies.replace(
                  /[^\d]/g,
                  ''
                )
              "
            />
          </FormItem>
          <FormItem label="单元数" prop="unitNum">
            <Input
              v-model="formValidate.unitNum"
              placeholder="输入单元数"
              @on-keyup="
                formValidate.unitNum = formValidate.unitNum.replace(
                  /[^\d]/g,
                  ''
                )
              "
            />
          </FormItem>
          <FormItem label="楼栋海拔(m)" prop="buildAltitude">
            <Input
              v-model="formValidate.buildAltitude"
              placeholder="输入楼栋海拔"
              @on-keyup="
                formValidate.buildAltitude = formValidate.buildAltitude.replace(
                  /^\D*(\d*(?:\.\d{0,8})?).*$/g,
                  '$1'
                )
              "
              readonly
              style="width:62%"
            />
            <Button type="primary" style="float:right" @click="mapSelectPOI">获取海拔</Button>
          </FormItem>
          <FormItem label="楼栋编号" prop="buildNum">
            <Input
              v-model="formValidate.buildNum"
              placeholder="输入楼栋编号"
              @on-keyup="
                formValidate.buildNum = formValidate.buildNum.replace(
                  /[^\d]/g,
                  ''
                )
              "
            />
          </FormItem>
          <FormItem label="楼栋名称" prop="buildName">
            <Input v-model="formValidate.buildName" placeholder="输入楼栋名称" />
          </FormItem>
          <FormItem label="楼栋负责人" prop="personIdName">
            <Input v-model="formValidate.personIdName" placeholder="输入楼栋负责人" />
          </FormItem>
          <FormItem label="房产(不动产)证号">
            <Input v-model="formValidate.realEstate" placeholder="输入房产(不动产)证号" />
          </FormItem>
          <FormItem label="竣工备案号">
            <Input v-model="formValidate.recordNo" placeholder="输入竣工备案号" />
          </FormItem>
          <div v-show="isMore">
            <FormItem label="楼栋结构" prop="structure">
              <Select v-model="formValidate.structure" placeholder="选择楼栋结构">
                <Option
                  :value="item.id"
                  v-for="item in buildStructure"
                  :key="item.id"
                >{{ item.dicName }}</Option>
              </Select>
            </FormItem>
            <FormItem label="楼栋状态" prop="buildStatus">
              <Select v-model="formValidate.buildStatus" placeholder="选择楼栋状态">
                <Option value="01">居住中</Option>
                <Option value="02">已拆迁</Option>
              </Select>
            </FormItem>
            <FormItem label="采集时间" prop="collectDate">
              <DatePicker
                type="date"
                format="yyyy-MM-dd"
                placeholder="选择采集时间"
                :value="formValidate.collectDate"
              ></DatePicker>
            </FormItem>
            <FormItem label="楼栋建成年份" prop="buildDate">
              <DatePicker
                type="year"
                format="yyyy"
                placeholder="选择楼栋建成年份"
                :value="formValidate.buildDate"
              ></DatePicker>
            </FormItem>
            <FormItem label="户数" prop="houseNum">
              <Input v-model="formValidate.houseNum" placeholder="输入户数" />
            </FormItem>
            <FormItem label="人数" prop="peopleNum">
              <Input v-model="formValidate.peopleNum" placeholder="输入人数" />
            </FormItem>
            <FormItem label="楼栋建筑面积" prop="buildArea">
              <Input v-model="formValidate.buildArea" placeholder="输入楼栋建筑面积" />
            </FormItem>
            <FormItem label="楼栋编码" prop="buildCode">
              <Input v-model="formValidate.buildCode" placeholder="输入楼栋编码" />
            </FormItem>
            <FormItem label="是否危房" prop="isUnsafe">
              <Select v-model="formValidate.isUnsafe" placeholder="选择是否危房">
                <Option value="1"></Option>
                <Option value="0"></Option>
              </Select>
            </FormItem>
            <FormItem label="是否独栋" prop="isAlong">
              <Select v-model="formValidate.isAlong" placeholder="选择是否独栋">
                <Option value="1"></Option>
                <Option value="0"></Option>
              </Select>
            </FormItem>
          </div>
          <Button type="primary" style="float: right; margin-bottom: 20px" @click="showMore">
            {{ more }}
            <Icon type="ios-arrow-down" v-show="!isMore" />
            <Icon type="ios-arrow-up" v-show="isMore" />
          </Button>
          <FormItem class="textarea-item" label="备注" prop="remark">
            <Input
              v-model="formValidate.remark"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="输入备注"
            />
          </FormItem>
          <FormItem label="房产(不动产)证号附件" class="textarea-item">
            <Upload
              :action="FILE_URL + 'upload'"
              name="files"
              :on-success="handleSuccessA"
              multiple
              :show-upload-list="false"
              ref="upload"
            >
              <Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button>
            </Upload>
            <div style="width: 100%">
              <div
                v-for="(item, index) in dataLists"
                :key="index"
                v-if="item.refType == 'a'"
                class="publicBox"
              >
                <div
                  :style="{
                    backgroundImage:
                      'url(' + VIEWFILE_URL + '?path=' + item.path + ')',
                  }"
                  class="fileImgBox"
                  alt
                  v-if="
                    item.type == 'png' ||
                    item.type == 'jpg' ||
                    item.type == 'jpeg' ||
                    item.type == 'PNG' ||
                    item.type == 'gif'
                  "
                  @click="viewImg(item)"
                >
                  <img
                    src="../../../assets/images/cha.png"
                    alt
                    id="cha"
                    @click.stop="remove(item.path)"
                  />
                </div>
                <div
                  v-if="
                    item.type != 'png' &&
                    item.type != 'jpg' &&
                    item.type != 'jpeg' &&
                    item.type != 'PNG' &&
                    item.type != 'gif'
                  "
                  @click="viewImg(item)"
                  class="wenjian"
                >
                  <img src="../../../assets/images/wenjian.png" alt />
                  <p :title="item.name">{{ item.name }}</p>
                  <img
                    src="../../../assets/images/cha.png"
                    alt
                    id="cha"
                    @click.stop="remove(item.path)"
                  />
                </div>
              </div>
            </div>
          </FormItem>
          <FormItem label="竣工备案号附件" class="textarea-item">
            <Upload
              :action="FILE_URL + 'upload'"
              name="files"
              :on-success="handleSuccessB"
              multiple
              :show-upload-list="false"
              ref="upload1"
            >
              <Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button>
            </Upload>
            <div style="width: 100%">
              <div
                v-for="(item, index) in dataLists"
                :key="index"
                v-if="item.refType == 'b'"
                class="publicBox"
              >
                <div
                  :style="{
                    backgroundImage:
                      'url(' + VIEWFILE_URL + '?path=' + item.path + ')',
                  }"
                  class="fileImgBox"
                  alt
                  v-if="
                    item.type == 'png' ||
                    item.type == 'jpg' ||
                    item.type == 'jpeg' ||
                    item.type == 'PNG' ||
                    item.type == 'gif'
                  "
                  @click="viewImg(item)"
                >
                  <img
                    src="../../../assets/images/cha.png"
                    alt
                    id="cha"
                    @click.stop="remove(item.path)"
                  />
                </div>
                <div
                  v-if="
                    item.type != 'png' &&
                    item.type != 'jpg' &&
                    item.type != 'jpeg' &&
                    item.type != 'PNG' &&
                    item.type != 'gif'
                  "
                  class="wenjian"
                  @click="viewImg(item)"
                >
                  <img src="../../../assets/images/wenjian.png" alt />
                  <p :title="item.name">{{ item.name }}</p>
                  <img
                    src="../../../assets/images/cha.png"
                    alt
                    id="cha"
                    @click.stop="remove(item.path)"
                  />
                </div>
              </div>
            </div>
          </FormItem>
          <FormItem label="其它附件" class="textarea-item">
            <Upload
              :action="FILE_URL + 'upload'"
              name="files"
              :on-success="handleSuccessC"
              multiple
              :show-upload-list="false"
              ref="upload2"
            >
              <Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button>
            </Upload>
            <div style="width: 100%">
              <div
                v-for="(item, index) in dataLists"
                :key="index"
                v-if="item.refType == 'c'"
                class="publicBox"
              >
                <div
                  :style="{
                    backgroundImage:
                      'url(' + VIEWFILE_URL + '?path=' + item.path + ')',
                  }"
                  class="fileImgBox"
                  alt
                  v-if="
                    item.type == 'png' ||
                    item.type == 'jpg' ||
                    item.type == 'jpeg' ||
                    item.type == 'PNG' ||
                    item.type == 'gif'
                  "
                  @click="viewImg(item)"
                >
                  <img
                    src="../../../assets/images/cha.png"
                    alt
                    id="cha"
                    @click.stop="remove(item.path)"
                  />
                </div>
                <div
                  v-if="
                    item.type != 'png' &&
                    item.type != 'jpg' &&
                    item.type != 'jpeg' &&
                    item.type != 'PNG' &&
                    item.type != 'gif'
                  "
                  class="wenjian"
                  @click="viewImg(item)"
                >
                  <img src="../../../assets/images/wenjian.png" alt />
                  <p :title="item.name">{{ item.name }}</p>
                  <img
                    src="../../../assets/images/cha.png"
                    alt
                    id="cha"
                    @click.stop="remove(item.path)"
                  />
                </div>
              </div>
            </div>
          </FormItem>
          <div class="btn-opration">
            <Button :loading="submitLoading" type="primary" @click.prevent="submitForm">保存</Button>
            <Button style="margin-left: 8px" @click="cancel">取消</Button>
          </div>
        </Form>






验证:ruleValidate: {
        addressName: [
          {
            required: true,
            message: "小区地址不能为空",
            trigger: "blur,change"
          }
        ],
        unitNum: [
          {
            required: true,
            message: "单元数不能为空",
            trigger: "blur,change"
          }
        ],
        upPlies: [
          {
            required: true,
            message: "地上层数不能为空",
            trigger: "blur,change"
          }
        ],
        downPlies: [
          {
            required: true,
            message: "地下层数不能为空",
            trigger: "blur,change"
          }
        ],
        buildAltitude: [
          {
            required: true,
            message: "楼栋海拔不能为空",
            trigger: "blur,change"
          }
        ]
      },

  • 写回答

3条回答 默认 最新

  • 半盏 · 花凋 2021-12-30 14:21
    关注

    可以看一下代码吗。这是提交数据的时候验证数据报错了

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 1月13日
  • 已采纳回答 1月5日
  • 修改了问题 12月30日
  • 创建了问题 12月30日

悬赏问题

  • ¥100 需要跳转番茄畅听app的adb命令
  • ¥50 寻找一位有逆向游戏盾sdk 应用程序经验的技术
  • ¥15 请问有用MZmine处理 “Waters SYNAPT G2-Si QTOF质谱仪在MSE模式下采集的非靶向数据” 的分析教程吗
  • ¥50 opencv4nodejs 如何安装
  • ¥15 adb push异常 adb: error: 1409-byte write failed: Invalid argument
  • ¥15 nginx反向代理获取ip,java获取真实ip
  • ¥15 eda:门禁系统设计
  • ¥50 如何使用js去调用vscode-js-debugger的方法去调试网页
  • ¥15 376.1电表主站通信协议下发指令全被否认问题
  • ¥15 物体双站RCS和其组成阵列后的双站RCS关系验证