element-plus验证红框去除

判断2项同时为空或都有值 通过之后红框怎么去除啊 而且每次错误都是走第二个字段，第一个字段从来没走过

img

img

img

这个提交时判断值。然后调用form得api 手动验证通过 。可以通过这几个方法实现

img

img

img


为啥写俩遍？
正常来说不是一个el-form 下面多个el-form-item吗
而且验证规则正常来说是:rules="xxx"
然后在下面去定义具体的规则内容吧
你咋直接把规则当个对象写了呢？
一般来说都是这么写的

:rules="validationRules"
validationRules: [
        { validator: validateRequire, trigger: 'change' }
      ]

然后再去写具体的规则方法
validateRequire(rule, value, callback) {
      // 实现您的验证逻辑
}

【以下回答由 GPT 生成】

要去除element-plus中的验证红框，需要通过自定义验证规则和消息来实现。以下是具体的解决方案：

  1. 首先，在使用element-plus表单组件的地方，给需要进行验证的字段添加rules属性，并设置自定义的验证规则。例如：
<el-form>
  <el-form-item label="字段1" prop="field1" :rules="field1Rules">
    <el-input v-model="field1"></el-input>
  </el-form-item>

  <el-form-item label="字段2" prop="field2" :rules="field2Rules">
    <el-input v-model="field2"></el-input>
  </el-form-item>
</el-form>
  1. 在Vue.js的data选项中，定义验证规则和错误消息的变量，如下所示：
data() {
  return {
    field1: '',
    field2: '',
    field1Rules: [
      { required: true, message: '字段1必填', trigger: 'blur' },
      { validator: this.validateFields, trigger: 'blur' }
    ],
    field2Rules: [
      { required: true, message: '字段2必填', trigger: 'blur' },
      { validator: this.validateFields, trigger: 'blur' }
    ]
  };
},
  1. 在Vue.js的methods选项中，添加用于自定义验证的方法。在该方法中，判断字段1和字段2是否同时为空或都有值，如果是，则将红框提示错误消息去除。具体代码如下：
methods: {
  validateFields(rule, value, callback) {
    const field1Value = this.field1;
    const field2Value = this.field2;
    if ((!field1Value && !field2Value) || (field1Value && field2Value)) {
      callback();
    } else {
      callback(new Error('字段1和字段2需要同时为空或都有值'));
    }
  }
}

通过以上步骤，即可实现判断两个字段是否同时为空或都有值来去除element-plus中的验证红框的功能。

请注意，在以上代码中，我使用了自定义验证函数validateFields来进行验证判断，并在验证规则中调用该函数。当验证不通过时，通过callback(new Error())的方式来提示错误消息，并保持红框的显示；当验证通过时，通过callback()的方式来去除红框的显示。

希望这个解决方案对您有帮助！如果有任何疑问，请随时追问。



【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^