vue3form循环校验

setup(props,{expose}) {

    const addFormRef = ref({}); // 灰度抽屉组件ref

}

const handleValidate = (key) => {

      return new Promise((resolve, reject) => {

        addFormRef?.value[key].validate(async (valid: any, fields: any) => {

              if (valid) {

                resolve(true)

              } else {

                resolve(false)

                return

              }

          })

      })

    }

    expose({

      handleValidate

    })

{

          formConfig.value?.[props.type]?.map((itemModel, index) => {

            return (

             

                (el) => { if (el) addFormRef.value[itemModel.key] = el }

              }>

               

                  {index + 1}

               

}

Js中调用校验

formEl.validate(async (valid) => {

        if (valid) {

          const ValidateArr = []

          enumParams.forEach(item => {

            if (formConfig.value[item].length > 0) {

              formConfig.value[item].forEach(i => {

                if (item === 'boardListJson') {

                  ValidateArr.push((boardListJsonRef?.value as any)?.handleValidate(i.key))

                }

              })

            }

          })

          if (ValidateArr.length > 0) {

            const res: Array = await Promise.all(ValidateArr)

            if (res.includes(false)) {

                ElMessage({

                message: '请检查后提交',

                type: 'error'

                })

                return

            }

          }

})

你可能感兴趣的:(前端,javascript,html)