Element UI 表单验证库-小龙资源网

📌 温馨提示：
本文内容可能随时间变动而失效，请以页面显示的更新时间为准。
若内容已不准确或资源失效，欢迎留言或联系站长反馈修正。

⚠️ 免责声明：
本文仅供学习与参考，观点仅代表作者个人意见，与本站无关。
如有侵权问题，请立即联系我们处理，谢谢理解与支持。

要求：address: [ { required: true, message: ‘详细地址为必填字段’, trigger: ‘blur’ }, ],
如果变量A = 1，则address为必填如果变量A = 2，则address为非必填 rules要怎么配置

在前端开发中，通常会使用表单验证库（如async-validator，Vue的vee-validate，Element UI 的表单验证等）来配置表单验证规则。下面以Element UI为例，说明如何根据变量 A 的值动态配置 address 字段的验证规则。

思路分析

- 当变量 A 的值为 1 时，为 address 字段添加必填项验证规则。

- 当变量 A 的值为 2 时，移除 address 字段的必填项验证规则。

代码示例

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="A" prop="A">
      <el-input v-model="form.A" @input="handleAChange"></el-input>
    </el-form-item>
    <el-form-item label="详细地址" prop="address">
      <el-input v-model="form.address"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        A: 1,
        address: ''
      },
      rules: {
        A: [
          { required: true, message: 'A为必填字段', trigger: 'blur' }
        ],
        address: []
      },
      formRef: null
    };
  },
  created() {
    this.handleAChange(this.form.A);
  },
  methods: {
    handleAChange(value) {
      if (parseInt(value) === 1) {
        this.rules.address = [
          { required: true, message: '详细地址为必填字段', trigger: 'blur' }
        ];
      } else if (parseInt(value) === 2) {
        this.rules.address = [];
      }
      // 重新设置表单验证规则
      this.$refs.formRef.clearValidate();
      this.$refs.formRef.setRules(this.rules);
    },
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          alert('表单提交成功');
        } else {
          alert('表单验证失败');
        }
      });
    }
  }
};
</script>

代码解释

1. data 部分：
  - - form 对象包含 A 和 address 两个字段，分别用于存储用户输入的值。
  - - rules 对象用于配置表单验证规则，初始时 address 字段的验证规则为空数组。
  - - formRef 用于引用表单实例。

1. created 钩子：
  - - 在组件创建时，调用 handleAChange 方法，根据初始的 A 值配置 address 字段的验证规则。

1. handleAChange 方法：
  - - 当 A 的值发生变化时，根据 A 的值动态更新 address 字段的验证规则。
  - - 调用 clearValidate 方法清除表单的验证状态。
  - - 调用 setRules 方法重新设置表单的验证规则。