el-radio 表单校验

### Element UI `el-radio` 表单验证规则及实现方法

在Element UI框架下，对于`el-radio`组件的表单校验主要通过其父级容器如`<el-form>`配合`rules`属性完成。当希望某些特定条件下触发或取消验证逻辑时，可以利用动态绑定的方式调整验证规则。

#### 动态控制验证规则的应用场景
针对点击不同选项后有条件地应用验证规则的需求，可以通过监听`change`事件来改变数据模型中的验证配置项。例如，仅当选中某一项（比如不是“无”的情况），才会激活额外字段的有效性检查[^2]。

<!-- HTML部分 -->
<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
    <!-- ...其他表单项... -->
    <el-form-item label="选择项：" prop="selectOption">
      <el-radio-group v-model="ruleForm.selectOption">
        <el-radio :label="'optionA'">选项 A</el-radio>
        <el-radio :label="'none'">无</el-radio>
      </el-radio-group>
    </el-form-item>

    <!-- 需要条件验证的项目 -->
    <el-form-item v-if="showConditionalField" label="附加信息：" prop="additionalInfo">
      <el-input v-model="ruleForm.additionalInfo"></el-input>
    </el-form-item>
    
    <!-- 提交按钮 -->
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
  </el-form>
</template>

// JavaScript/TypeScript部分
export default {
  data() {
    const validateAdditionalInfo = (rule, value, callback) => {
      if (!value && this.ruleForm.selectOption !== 'none') { // 当选择了非 "无"
        return callback(new Error('请输入附加信息'));
      }
      callback();
    };

    return {
      ruleForm: {
        selectOption: '',
        additionalInfo: ''
      },
      rules: {
        selectOption: [{ required: true, message: '请选择一个选项', trigger: 'blur' }],
        additionalInfo: [
          { validator: validateAdditionalInfo, trigger: ['blur'] }
        ]
      }
    };
  },
  computed: {
    showConditionalField() {
      return this.ruleForm.selectOption !== 'none';
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          console.log('错误提交!!');
          return false;
        }
      });
    }
  }
};

此代码片段展示了如何根据用户的选择动态显示隐藏输入框以及相应地启用禁用验证规则。每当`selectOption`发生变化时，计算属性`showConditionalField`会自动更新视图状态；而自定义验证器则负责确保只有在必要情况下才提示用户提供更多信息。

为了防止旧有的验证消息残留影响用户体验，在每次重新渲染表单之前应当调用`resetFields()`清除之前的验证结果[^5]。