验证名称是否在数组中已经存在，自定义表单验证

前端判断输入框输入的名称是否已存在数组中，在rules中添加验证方法

name:[
  {required:true, message: '请输入名称',trigger:'blur'},
  {validator:(rule,value,callback) => {
                            this.tableData.forEach((item) => {
                                let exists = item.name == value
                                if(exists) {
                                    callback(new Error('名称已存在'))
                                }else{
                                    callback()
                                }
                            })
  ,trigger:'blur'},
]

为什么这个验证方法并没有生效？

这段代码中，验证方法可能没有生效的原因是缺少闭合的括号。请将代码中的 }) 改为 })} 以正确关闭匿名方法的定义。修改后的代码如下所示：


name: [
  { required: true, message: '请输入名称', trigger: 'blur' },
  { validator: (rule, value, callback) => {
    this.tableData.forEach((item) => {
      let exists = item.name === value;
      if (exists) {
        callback(new Error('名称已存在'));
      } else {
        callback();
      }
    });
  }, trigger: 'blur' },
],

如若有用，还望博友采纳！

我这里测试是可以的，控制台有报错之类的吗？

<template>
  <div>
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  data () {
    return {
      form: {
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              console.log(
                '%c value: ',
                'background-color: #3756d4; padding: 4px 8px; border-radius: 2px; font-size: 14px; color: #fff; font-weight: 700;',
                value
              )
              this.tableData.forEach((item) => {
                const exists = item.name === value
                if (exists) {
                  callback(new Error('名称已存在'))
                } else {
                  callback()
                }
              })
            },
            trigger: 'blur'
          }
        ]
      },
      tableData: [
        {
          name: '张三'
        }
      ]
    }
  }
}
</script>

不知道你这个问题是否已经解决, 如果还没有解决的话:

看下这篇博客，也许你就懂了，链接：for循环遍历的`form表单组件`rules规则校验失效问题——输入内容后依然提示必填，亲测有效——基础积累
以下回答来自chatgpt:
问题的原因可能是在自定义的验证方法中没有正确地处理验证逻辑，或者验证方法没有正确地绑定到表单上。
解决这个问题的步骤如下：
1. 首先，确保你已经正确地引入了 async-validator 库，并且在表单的 rules 属性中使用了自定义的验证方法。在这个例子中，我们使用 iview 组件，所以需要将验证方法添加到 rules 对象中。
2. 接下来，检查你的自定义验证方法的逻辑。确认你正确地处理了验证逻辑，比如检查输入的名称是否已经存在于数组中。
3. 如果你的验证方法是异步的，确保在验证完成之后调用回调函数来通知表单验证完成。这可以通过在验证方法中使用 Promise 或者 async/await 来实现。
4. 确保你正确地将自定义验证方法绑定到表单上。这可以通过在表单的 rules 属性中使用自定义验证方法的名称来实现。
下面是一个示例代码，展示了如何使用 async-validator 和 iview 组件来实现自定义表单验证：
```
<template>
  <Form :model="form" :rules="rules" ref="form">
    <FormItem label="名称" prop="name">
      <Input v-model="form.name" @blur="validateName" />
    </FormItem>
    <Button type="primary" @click="submitForm">提交</Button>
  </Form>
</template>

<script>
import { Form, FormItem, Input, Button } from 'iview';

export default {
  data() {
    return {
      form: {
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    validateName(callback) {
      // 假设数组存在于 data 中的 names 属性中
      const { name } = this.form;
      if (this.names.includes(name)) {
        callback(new Error('名称已存在'));
      } else {
        callback();
      }
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，提交表单
          // ...
        } else {
          this.$Message.error('表单验证失败');
        }
      });
    }
  }
};
</script>
```
在上面的代码中，我们创建了一个带有名称输入框的表单，并使用了 iview 组件。我们在表单的 rules 属性中定义了一个自定义的验证方法 validateName，它会检查输入的名称是否在 names 数组中存在。在 validateName 方法中，我们使用了 callback 函数来通知验证的结果。在 submitForm 方法中，我们调用了表单的 validate 方法来触发表单的验证。
这样，当用户输入一个名称并失去焦点时，validateName 方法会被调用来进行验证，并根据验证结果更新表单的验证状态。如果验证通过，用户可以提交表单；如果验证失败，会显示一个错误消息。

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