不用element等组件的情况下实现自定义数据校验

有时候开源组件的表单校验并不能满足我们的需求，我们可能在某些地方也需要对数据进行是否填写的校验，这时候我们就得想办法自己写一个来满足自己的需求了。

• 例如下面这种，需要判断用户是否选择了医生池里的医生，如果未选择提交表单信息时就提示，并且只有在专家咨询打勾了才触发这个校验逻辑。

  
  

• 大概思路是：在这个地方下面加一段提示信息，默认隐藏，提交表单时对数据进行判断，如果未选就更换状态为显示以提示用户，并且只有专家咨询选中情况下才触发。

• 为了更贴近组件的样子(用户选择后立马把提示信息进行隐藏)，我们可以用计算属性+监听器，用计算属性把这条数据单独抽离出来，再用监听器进行监听，如果数据发生变化就改变提示信息的状态为隐藏即可。

• 为什么不直接监听数据变化要用计算属性配合？因为监听器如果监听整个表单数据对象的话，无论哪一个值变化都会引起监听器触发，另外一个原因就是计算属性是有缓存的，意思就是如果这个值未发生变化计算属性就不会触发，既然计算属性不触发那么监听器也不会触发，如果还不明白的话，建议去看vue官方文档计算属性+监听器那一段。

<template>
  <!-- 专家咨询 -->
  <div class="big-box" v-loading="loading">
    <div style="margin:60px 0 20px 55px;">
      <el-checkbox v-model="expertConsultationConfVO.isModuleNeed"
        >专家咨询</el-checkbox
      >
    </div>
    <el-form
      ref="expertConsultationConfVO"
      :model="expertConsultationConfVO"
      style="display: flex"
      size="small"
      label-width="168px"
    >
      <el-form-item label="医生池配置" class="icon">
       // 这个组件就是医生池展示的样式等，大家不用在意。
        // editCallBack自定义函数为点+号就会往数组里添加医生并触发
        <doctorPool
          class="doctorPool"
          :dataList="pollList"
          @editCallBack="editCallBack"
        ></doctorPool>
        <span v-if="userProp" style="color: red; font-size: 12px; margin-left: 60px"
        >请选择医生团队人员</span
        >
      </el-form-item>
      <el-form-item label="付费咨询列表资源位ID">
        <el-input v-model="expertConsultationConfVO.resourceIdFee"></el-input>
        <span  style="color: red; font-size: 12px" v-if="payProp"
        >付费咨询列表资源位ID不能为空</span
        >
      </el-form-item>
      <el-button
        type="text"
        @click="ResourceBit"
        style="height: 32px; margin-left: 10px"
        >资源位配置</el-button
      >
    </el-form>
  </div>
</template>

<script>
import { openWindow, paseDataDoctor } from '@/utils'
import doctorPool from '@/views/specialized-subject/serviceSet/components/doctor-pool.vue'
export default {
  // 组件名称
  name: 'consulting',
  // 组件参数 接收来自父组件的数据
  props: {
    tabberLists: {
      default: () => []
    }
  },
  // 局部注册的组件
  components: {
    doctorPool
  },
  // 组件状态值
  data () {
    return {
      VerificationResults: true, // 总校验结果
      userProp: false, // 医生池校验结果
      payProp: false, // 资源位校验结果
      loading: true,
      pollList: [], // 医生池列表数据
      expertConsultationConfVO: {
        doctorPoolFee: '', // 医生池ID
        resourceIdFee: '', // 资源位
        isModuleNeed: false // 专家咨询
      }
    }
  },
   // 计算属性
  computed: {
    // 判断是否为修改
    users () {
      return this.$route.query
    },
    // vuex存储的数据
    pollLists () {
      return this.$store.state.common.poolList
    },
    // 资源位ID值
    resourceIdFees () {
      return this.expertConsultationConfVO.resourceIdFee
    }
  },
  // 侦听器
  watch: {
    // 监听数据是否传递完成
    tabberLists (val) {
      this.display = false
      if (val.expertConsultationConfVO.isModuleNeed === 0) {
        val.expertConsultationConfVO.isModuleNeed = false
      } else {
        val.expertConsultationConfVO.isModuleNeed = true
      }
      this.expertConsultationConfVO = val.expertConsultationConfVO
      this.loading = false
    },
    // 监听vuex存储数据是否传输完成，并赋值给列表数据
    pollLists (val) {
      this.pollList = val
    },
    // 监听是在选中专家咨询情况下医生池数据是否选择
    pollList (val) {
      if (val.length !== 0 && this.expertConsultationConfVO.isModuleNeed) {
        this.userProp = false
      }
    },
    // 监听在选中专家咨询情况下资源位ID是否有值
    resourceIdFees (val !=='' && this.expertConsultationConfVO.isModuleNeed) {
        this.payProp = false
    }
  },
  created () {
    if (this.users.id === undefined) {
      this.loading = false
    }
  },
  // 组件方法
  methods: {
    // 医生池列表
    editCallBack (value) {
      this.pollList = value
    },
    // 向父组件传递参数/并对医生池进行排序
    transmit () {
      const userList = this.pollList.find(x => x.isSelected)
      if (this.expertConsultationConfVO.isModuleNeed && userList === undefined) {
        this.userProp = true
        this.VerificationResults = true
        // this.$message.error('请完善专家咨询数据')
      } else {
        this.VerificationResults = false
      }
      if (this.expertConsultationConfVO.isModuleNeed && this.expertConsultationConfVO.resourceIdFee === '') {
        this.payProp = true
        this.VerificationResults = true
      } else {
        this.VerificationResults = false
      }
    // 具体校验结果要作用于什么地方，看自己需求了。
    },
  },
  // 操纵DOM元素写这里/页面渲染完毕
  mounted () {}
}
</script>

<style scoped lang="less">
.big-box {
  border-top: 1px solid #ccc;
}
</style>

• 如果想更加逼真，可以自己利用定位与伪元素为其加一个 * 将其控制也加进校验判断里

···
<el-form-item label="付费咨询列表资源位ID" class="icon">
   <el-input v-model="expertConsultationConfVO.resourceIdFee"></el-input>
   <span  style="color: red; font-size: 12px" v-if="payProp">付费咨询列表资源位ID不能为空</span>
</el-form-item>
···
<style scoped lang="less">
···
.icon {
  position: relative;
}
.icon::before {
  content: "*";
  position: absolute;
  margin-top: 6px;
  margin-left: 20px;
  color: #F56C6C;
}
···
</style>