element 表单校验（表单逐个属性校验并进行对应提示）

最新推荐文章于 2023-09-04 20:02:16 发布

退休生活

最新推荐文章于 2023-09-04 20:02:16 发布

阅读量380

点赞数

文章标签： javascript 前端开发语言 elementui vue

本文链接：https://blog.csdn.net/hello_CSDM/article/details/127247299

版权

element 表单校验（表单逐个属性校验并进行对应提示）

/**
     * 校验多个字段
     */
    async validateIndex () {
      // 需要校验的字段
      const fieldsToValidate = [
        'name',
        'gender',
        'birthDate',
        'age',
        'politicalOutlook',
        'positionId',
        'workYears',
        'highestEducation',
        'highestProfessional',
        'highestDegree',
        'highestColleges',
        'highestIsFull'
      ]

      // 将回调转换为Promise
      let errorMessages = await Promise.all(
        fieldsToValidate.map((field) => {
          return new Promise((resolve, reject) => {
            this.$refs.addForm.validateField(field, (errorMessage) => {
              resolve(errorMessage)
            })
          })
        })
      )
      const valid = errorMessages.every((errorMessage) => {
        return errorMessage == ''
      })
      if (!valid) {
        // 校验失败
        errorMessages = errorMessages.filter(item => item !== '')
        util.$message.showInfo2('请完善表单：'+errorMessages)
      }
      return valid
    },