日常开发记录-远程搜索下拉根据上一个表单值去动态控制必填还是非必填-优快云博客

本文链接：https://blog.youkuaiyun.com/machine_vision123/article/details/129701360

文章展示了如何在Vue.js应用中实现一个条件性表单验证，当手机号字段的值为123时，验证码字段变为必填。通过修改`el-form-item`的`:rules`属性来动态控制验证规则。提供了两种方法，第一种能正确显示必填标志但无法进行非空验证，第二种则实现了显示逻辑但验证功能有误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当手机号中的值为123验证码必填。

手机号为非123的值非必填。

代码示例：

<template>
    <div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item  label="手机号" prop="phone">
                <el-input autocomplete="on" name="phone" v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code"
            :rules="{
              required: ruleForm.phone=='123'?true:false, message: '不能为空', trigger: 'change'
            }">
                 <el-select
                  v-model="ruleForm.code"
                  multiple
                  filterable
                  allow-create
                  default-first-option
                  placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
            </el-form>
    </div>
</template>

<script>
export default {
  data () {
    return {
      options: [{
        value: 'HTML',
        label: 'HTML'
      }, {
        value: 'CSS',
        label: 'CSS'
      }, {
        value: 'JavaScript',
        label: 'JavaScript'
      }],
      ruleForm: {
        phone: '',
        code: ''
      },
      rules: {
        phone: [
          { required: true, trigger: 'blur', message: '手机号不能为空' }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

方法2：

虽然实现当手机号为123出现必填项符号，但是却无法进行非空验证

　　　　　　　<el-form-item label="验证码" :prop="ruleForm.phone == '123' ? 'code':''">
                 <el-select
                  v-model="ruleForm.code"
                  multiple
                  filterable
                  allow-create
                  default-first-option
                  placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>