Element UI + Swiper 实现表单验证

swiper如今已是成熟阶段，各方面都很稳定。

也不局限一个轮播图用到swiper，很强。

公司项目脱离不了element ，swiper也是

利用swiper取消了自动轮播，改成手动滑动，用表单代替图片，这样就一屏屏form表单

滑动到下一屏时，会触发element 里表单验证，表单未填写会禁止用户滑动到下一页。

swiperOption: { //  swiper相关配置
        pagination: {
          el: '.swiper-pagination'  // 几个小点分页器
        },
        paginationClickable: true, 
        autoplay: 1500, 
        cancelable: false,
        autoplayDisableOnInteraction: false,
        loop: false,
        autoHeight: true,
        touchMoveStopPropagation: true, // 阻止touchMove冒泡事件
        allowSlideNext: false, // 禁止用户向右或向上滑动

        coverflow: {
          rotate: 30,
          stretch: 10,
          depth: 60,
          modifier: 2,
          slideShadows: true
        },
        on: {
        // swiper内置方法，当每一页发生移动时触发验证方法
          sliderMove: () => {
        // 箭头函数里获取到swiper的实例，this->Swiper
            let swiper = this.$refs.mySwiper.swiper
            let i = swiper.activeIndex // 变量名i存取swiper的每一页索引
            if (i === 0) {
            //下面是element 提供的表单验证
              this.$refs['form'].validate((valid) => {
                if (valid) {
                  swiper.allowSlideNext = true
                } else {
                  swiper.allowSlideNext = false
                  console.log('未填写完表单')
                }
              })
            } else if (i === 1) {
              this.$refs['formList'].validate((valid) => {
                if (valid) {
                  swiper.allowSlideNext = true
                } else {
                  swiper.allowSlideNext = false
                  console.log('未输入完表单')
                }
              })
            } else if (i === 2) {
              this.$refs['formScend'].validate((valid) => {
                if (valid) {
                  swiper.allowSlideNext = true
                } else {
                  swiper.allowSlideNext = false
                  console.log('未输入完表单')
                }
              })
            } else if (i === 3) {
              this.$refs['formTrist'].validate((valid) => {
                if (valid) {
                  swiper.allowSlideNext = true
                } else {
                  swiper.allowSlideNext = false
                  console.log('未输入完表单')
                }
              })
            } else if (i === 4) {
              this.$refs['formFive'].validate((valid) => {
                if (valid) {
                  swiper.allowSlideNext = true
                } else {
                  swiper.allowSlideNext = false
                  console.log('未输入完表单')
                }
              })
            } else if (i === 5) {
              this.$refs['formSix'].validate((valid) => {
                if (valid) {
                  swiper.allowSlideNext = true
                } else {
                  swiper.allowSlideNext = false
                  console.log('未输入完表单')
                }
              })
            }
          }
        }
      },
复制代码

固然当时也遇到了问题，如下总结：

1. swiper相关配置在vue data里，想用swiper内置的方法，就得首先改变this指向，让指向Swiper实例，this---Swiper

2. let swiper = this.$refs.mySwiper.swiper ，报错mySwiper找不到，想要找到前提是得在swiper结构上加上ref="mySwiper"，告诉mySwiper是谁

<swiper :options="swiperOption" ref="mySwiper">
..... //
</swiper>
复制代码

3. 表单填写完，滑动到下一页时，验证会当即触发，不会等到再次滑动时触发。方法里加上条件if判断当前页索引是几，再去触发方方法

功能算得上是很简单，不难，也没有什么逻辑性。最主要的是细节处理

若是你以为对你有帮助，烦请点个赞呗👍