elementUI自定义表单校验规则中的callback和return

一个被代码耽误的厨子

已于 2023-05-22 17:06:35 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： elementui 前端 javascript

于 2023-03-21 18:10:51 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_48975022/article/details/129694269

文章描述了一个在开发中遇到的问题，即在创建新记录时需要进行表单验证，但更新记录时则不需要。作者定义了一个`checkNameRepeat`函数用于检查部门名称是否重复，并在更新模式下通过回调函数`callback()`跳过验证。在处理异步操作时，遇到了ts类型错误，因为`async`函数返回Promise，不适用于`validator`。解决方案是根据是否更新来决定是否调用`callback()`。

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

最近在写一个功能是当点击新增的时候进行表单验证，而更新不需要

先上代码

  // 现在定义一个函数 这个函数的目的是 去找重复的部门
const checkNameRepeat =  async (rule: any, value: any, callback: any) => {
  if (isValidate.value) {
    return  //这代表如果是更新，就不需要表单验证，直接return出去，
//如果使用return  如果想使用await 必须加一个async，但是加了一个async就变成了Promise函数，
//下面的rules就会有ts类型错误，因为validator后边不可使用Promise函数

//因此为了不使用async，可使用callback()，即如果是更新，则直接callback()，
//下方的代码虽然也会执行，但是不会执行callback(new Error('已存在该机构'))
  }

  const reqAllList = {//获取数据的入参
    deptIds: [],
    pageQuery: {
      isAsc: 'asc,desc',
      orderByColumn: '',
      pageNum: 1,
      pageSize: 100000000,
    },
    recipient: '',
  };

  getScheConfList(reqAllList).then((res) => {
    const isRepeat = res.data.some((item: any) => item.deptId == value);
    console.log('isRepeat', isRepeat);
    isRepeat ? callback(new Error('已存在该机构')) : callback();
    
  });
};
const rules: FormRules = {
  deptId: [
    { required: true, message: '请填写此项', trigger: 'change' },
    { validator: checkNameRepeat, trigger: 'change' },
  ],
  recipientNames: [{ required: true, message: '请填写此项', trigger: 'change' }],
};