前端基础学习-移除部分表单校验

最新推荐文章于 2024-08-02 00:06:19 发布

小夭。

最新推荐文章于 2024-08-02 00:06:19 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签： vue css html js javascript

本文链接：https://blog.csdn.net/m0_47146037/article/details/106719319

版权

前端专栏收录该内容

56 篇文章 0 订阅

订阅专栏

在有的情况下，我们需要选择性对表单移除部分校验
我们可以看到element-ui上有一个方法
在这里插入图片描述
但具体操作方法需要根据情况而定

我们可以先看下这次的效果
在这里插入图片描述
当我们选择选项一时，选项二的表单被置灰，这时我们只对选项一的表单进行校验，而不对选项二的表单进行校验，所以这里我们需要移除表单二的校验（如果不移除，这里仍然会对prop 的属性进行校验）

移除选项二校验
在这里插入图片描述
移除选项一校验

首先是表单的页面代码，在切换el-radio时会切换部分el-input的disabled
这里绑定的校验内容都是最基础的校验，rules的内容就不展示了

		<el-form :model="changeForm" :rules="changeRules" ref="changeForm" label-width="100px" style="margin-left:5%">
          <el-row>
            <el-col :span="4" style="line-height:130px">
              <el-radio :label="1" v-model="radio">选项一</el-radio>
            </el-col>
            <el-col :span="16" style="border: 1px solid #e6e6e6;padding: 20px 20px 10px 0">
              <el-form-item label="必填项1" prop="name1">
                <el-input v-model="changeForm.name1" :disabled="radio===2"></el-input>
              </el-form-item>
              <el-form-item label="必填项2" prop="name2">
                <el-input v-model="changeForm.name2" :disabled="radio===2"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top:10px">
            <el-col :span="4" style="line-height:130px">
              <el-radio :label="2" v-model="radio">选项二</el-radio>
            </el-col>
            <el-col :span="16" style="border: 1px solid #e6e6e6;padding: 20px 20px 10px 0">
              <el-form-item label="必填项3" prop="name3">
                <el-input v-model="changeForm.name3" :disabled="radio===1"></el-input>
              </el-form-item>
              <el-form-item label="必填项4" prop="name4">
                <el-input v-model="changeForm.name4" :disabled="radio===1"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item style="margin: 20px 0 0 20px">
            <el-button type="primary" @click="submitChangeForm">立即创建</el-button>
            <el-button @click="resetForm('changeForm')">重置</el-button>
          </el-form-item>
        </el-form>

移除表单的部分主要在submitChangeForm方法中

    submitChangeForm () {
      this.$refs['changeForm'].validate((valid, value) => {
        console.log(valid, 'valid')
        console.log(value, 'value')
        if (this.radio === 1) { // 选项一
          // name1,name2满足校验
          if (valid === false && value.name3 && value.name4 && !value.name1 && !value.name2) {
            // 当前表单有效
            if (this.changeForm.name1 && this.changeForm.name2) {
              valid = true
              // 移除必填项1校验
              this.$refs.changeForm.clearValidate('name3')
              // 移除必填项2校验
              this.$refs.changeForm.clearValidate('name4')
            }
          } else if ((valid === false && value.name3 && value.name4) || value.name1 || value.name2) { // 必填项1、2填了其中一个
            // 移除必填项3校验
            this.$refs.changeForm.clearValidate('name3')
            // 移除必填项4校验
            this.$refs.changeForm.clearValidate('name4')
          }
        } else if (this.radio === 2) { // 选项二
        // name3,name4满足校验
          if (valid === false && value.name1 && value.name2 && !value.name3 && !value.name4) {
            // 当前表单有效
            if (this.changeForm.name3 && this.changeForm.name4) {
              valid = true
              // 移除必填项1校验
              this.$refs.changeForm.clearValidate('name1')
              // 移除必填项2校验
              this.$refs.changeForm.clearValidate('name2')
            }
          } else if ((valid === false && value.name1 && value.name2) || value.name3 || value.name4) { // 必填项3、4填了其中一个
            // 移除必填项1校验
            this.$refs.changeForm.clearValidate('name1')
            // 移除必填项2校验
            this.$refs.changeForm.clearValidate('name2')
          }
        }
        if (valid) {
          this.$message.success('表单提交成功!')
        }
      })
    },

我们这里移除表单主要是对value和valid进行判断
可以打印一下他们的值
在这里插入图片描述
valid为true才可以提交表单
而value是对校验项的校验内容value
首先再对应选项是选项一的情况下，判断valid是否为false
（1）当表单的name1、name2满足校验条件且内容有效时，使valid=true，并且移除name3、name4的校验，此时可以提交表单
（2）当表单的name1、name2不能同时满足校验条件时，这时valid仍为false，但是要移除name3、name4的校验，仍然对name1、name2进行校验

如果选择选项二则是同样的逻辑

在理解的基础上对表单校验进行优化

    /** 提交移除部分校验表单 */
    submitChangeForm () {
        // 优化校验
        if (this.radio === 1) { // 选项一
          // 移除必填项1校验
          this.$refs.changeForm.clearValidate('name3')
          // 移除必填项2校验
          this.$refs.changeForm.clearValidate('name4')
          // name1,name2满足校验
          if (valid === false && !value.name1 && !value.name2) {
            // 当前表单有效
            if (this.changeForm.name1 && this.changeForm.name2) {
              valid = true
            }
          }
        } else if (this.radio === 2) { // 选项二
          // 移除必填项1校验
          this.$refs.changeForm.clearValidate('name1')
          // 移除必填项2校验
          this.$refs.changeForm.clearValidate('name2')
          // name3,name4满足校验
          if (valid === false && !value.name3 && !value.name4) {
            // 当前表单有效
            if (this.changeForm.name3 && this.changeForm.name4) {
              valid = true
            }
          }
        }
        if (valid) {
          this.$message.success('表单提交成功!')
        }
      })
    },