[JavaScript知识库]elementUI表单校验–如何进行表单项之间的联动校验

elementUI表单校验–如何进行表单项之间的联动校验

平时开发，都是一个表单项对应一个校验规则，表单项和表单项之间是相互独立的，一个值的改变不会影响到另一个值的校验。但凡是总有例外，比如…比如那啥，没错，就那个…emmmm，抱歉，我是菜鸡，完全不明白为啥这么玩，这个需求时在干啥？？？头脑风暴了好一阵，想到几个可能会使用的场景(公司的需求，不好拿出来=_=)----

游戏打造装备场景。根据玩家给的材料的不同，从而打造不同的装备，甚至于材料之间可能存在兼容性的问题。为了解决兼容性的问题，表单联动这种方式就可以派上用场了（emmmm，假设玩家就是通过elementUI表单进行装备材料的配置吧，尽管这不太现实…）。玩家选择了材料A，然后选择了材料B，因为A、B不兼容，所以需要提示校验失败。

参数配置场景。在实际开发中，有时会出现参数需要联动的情况，比如参数A选择了某个值aa，参数B选择了某个值bb，无论是A、B哪个参数先进行选择，需求要求最后一个进行选择的参数都要触发向服务器询问某个文件路径是否存在（或者是其它任意事情）并根据返回值决定是否A、B参数都显示校验失败的提示文字，或者都不显示任何校验文字表示通过。

电脑配置场景。需求想要用户通过选择表单中的磁盘、CPU、内存等选项，来判断是否在某个主板型号上组装成电脑。依次选择完所有选项后，会在最后一个进行选择的选项中触发校验，并请求服务器得到结果，将不能加到主板上的硬件信息框下方显示校验失败的信息。（话说，直接选主板，后续的其它硬件只显示能和主板组装的数据不香吗）

…

思来想去，觉得参数配置的场景可能会有需要。比如，参数A和参数B共同决定了文件路径（假设需求明确说参数A决定文件路径的前半段，参数B决定文件路径的后半段，且参数B是一个数组，类似于A：D:\data B: [“json”, “js”]），为了确保用户自己设置的这个路径是存在的，则需要在用户在最后一个进行选择的选项中触发校验，请求服务器得到结果，如果用户设置的路径不可用，则参数A和B都需要显示校验失败的信息（比如参数A–文件路径不存在；参数B–文件路径不存在）。

回到正题，如何在elementUI框架中使用框架的表单校验功能实现表单项的联动校验----

<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="myForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="路径名称" prop="filepathfirst">
        <el-input v-model="ruleForm.filepathfirst"></el-input>
      </el-form-item>
      <el-form-item label="路径文件名" prop="filepathsecond">
        <el-checkbox-group v-model="ruleForm.filepathsecond">
          <el-checkbox label="json" name="filepathsecond"></el-checkbox>
          <el-checkbox label="js" name="filepathsecond"></el-checkbox>
          <el-checkbox label="css" name="filepathsecond"></el-checkbox>
          <el-checkbox label="html" name="filepathsecond"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('myForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  请求方法名称
} from '请求方法API路径'
export default {
  data() {
    // 文件路径校验方法
    const checkFilePathfirst = async(rule, value, callback) => {
      // 值为空，则显示校验失败信息--不可为空
      if (!value) {
        return callback(new Error(`不可为空`))
      }
      // 请求服务器方法，根据后台返回的结果决定是否进行联动或者显示校验失败信息
      // 使用async和await是因为需要在请求结束后通过服务器返回的数据决定返回到表单的校验信息
      // 如果不使用async和await的话，会永远执行return callback()这方法中最后一行代码
      await 请求方法名称({ 'filepathfirst': value, 'filepathsecond': this.ruleForm.filepathsecond }).then(data => {
        // 文件路径存在
        if (data) {
          // 清除另一个联动表单项的校验信息
          this.$refs.myForm.clearValidate('filepathsecond')
          return callback()
        } else {
          if (this.lastStatus === '') {
            // 关键点。通过this.$ref.Form（Form是表单的ref属性中的值），直接执行另一个需要联动的校验方法checkFilePathsecond进行校验。
            this.$refs.myForm.validateField('filepathsecond')
            this.lastStatus = 'check'
          } else if (this.lastStatus === 'check') {
            this.lastStatus = ''
          }
          // 表单项显示后台校验错误信息
          return callback(new Error(`${data.errorMessage}`))
        }
      })
      return callback()
    }
    // 文件路径校验方法
    const checkFilePathsecond = async(rule, value, callback) => {
      // 值为空，则显示校验失败信息--不可为空
      if (!value) {
        return callback(new Error(`不可为空`))
      }
      // 请求服务器方法，根据后台返回的结果决定是否进行联动或者显示校验失败信息
      // 使用async和await是因为需要在请求结束后通过服务器返回的数据决定返回到表单的校验信息
      // 如果不使用async和await的话，会永远执行return callback()这方法中最后一行代码
      await 请求方法名称({ 'filepathfirst': this.ruleForm.filepathfirst, 'filepathsecond': value }).then(data => {
        // 文件路径存在
        if (data) {
          // 清除另一个联动表单项的校验信息
          this.$refs.myForm.clearValidate('filepathfirst')
          return callback()
        } else {
          if (this.lastStatus === '') {
            // 关键点。通过this.$ref.Form（Form是表单的ref属性中的值），直接执行另一个需要联动的校验方法checkFilePathfirst进行校验。
            this.$refs.myForm.validateField('filepathfirst')
            this.lastStatus = 'check'
          } else if (this.lastStatus === 'check') {
            this.lastStatus = ''
          }
          // 表单项显示后台校验错误信息
          return callback(new Error(`${data.errorMessage}`))
        }
      })
      return callback()
    }
    return {
      lastStatus: '', // 防止无限请求，‘’表示可以联动另一个表单项的校验，‘chcek’表示不需联动
      ruleForm: {
        filepathfirst: 'D:\\data',
        filepathsecond: ['json', 'js']
      },
      rules: {
        filepathfirst: [{ required: true, validator: checkFilePathfirst, trigger: 'blur' }],
        filepathsecond: [{ required: true, validator: checkFilePathsecond, trigger: 'change' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      // 控制校验时不触发任何事件，这里不使用值'check'是为了防止在checkFilePathfirst事件中执行到this.lastStatus = ''
      // 导致checkFilePathsecond关于this.lastStatus会被判断为空字符串从而触发服务器请求
      this.lastStatus = 'validate'
      this.$refs[formName].validate((valid) => {
        this.lastStatus = ''
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

      

如果你只需要单独的表单项进行请求服务器校验的话，那么只需

    // 文件路径校验方法
    const checkFilePathfirst = async(rule, value, callback) => {
      // 值为空，则显示校验失败信息--不可为空
      if (!value) {
        return callback(new Error(`不可为空`))
      }
      // 请求服务器方法，根据后台返回的结果决定是否进行联动或者显示校验失败信息
      // 使用async和await是因为需要在请求结束后通过服务器返回的数据决定返回到表单的校验信息
      // 如果不使用async和await的话，会永远执行return callback()这方法中最后一行代码
      await 请求方法名称({ 'filepathfirst': value, 'filepathsecond': this.ruleForm.filepathsecond }).then(data => {
        // 文件路径存在
        if (data) {
          return callback()
        } else {
          // 表单项显示后台校验错误信息
          return callback(new Error(`${data.errorMessage}`))
        }
      })
      return callback()
    }

这个在网络条件比较好的情况下，能够有效提高用户体验度；如果网络不好，会出现校验信息延时出现，给用户一种----这个表单什么毛病？！-----的感觉。

一般来说，前端的校验是无法被后台信赖的，无论开发者搞了什么表单校验，最终决定这个表单能否保存到数据库中是由后台决定的。所以前端的校验一向以限制、引导用户输入合适的字符为主。像是这类表单校验时发送请求，甚至联动校验的需求可能有不少（emmm我这不就遇上了），但是确实不是主流，而且这个联动校验的使用场景太“窄”了，不是很推荐使用。一次性校验不香吗？就我的想法，这个有点鸡肋。就单个而言，无论是表单项之间的联动校验（不涉及服务器请求），还是单个表单项校验时触发服务器请求，都属于正常的范畴，但是两者一结合，就给人一种‘何必呢’的感觉。