Question

我正在使用vue-tags-input组件。在其文档中，我们可以找到validation。我正在尝试创建验证，因此有效的输入必须具有：

至少3个迹象
两个数字
数字之间的逗号

这就是我所拥有的：

validation: [{
    classes: 'min-length',
    rule: tag => tag.text.length < 3,
},{
    classes: 'min-length',
    rule: ({ text }) => {
        const comma = text.indexOf(',') === -1;
        if(comma) {
            const arr = text.split(',')
            if(arr[0] && arr[1]) {
                if(arr[0].typeof === 'number' && arr[1].typeof === 'number') {
                    return true;
                }
            }
        }
        return false;
    }
}]

所以我用,将字符串分割成数组。结果，我应该有两个元素的数组。然后，我检查两个元素是否都是数字。但是，由于111被视为有效，但却被拒，因此无法正常工作。

我已经创建了demo on codesanbox。

Answer 1

要检查逗号是否存在，必须检查indexOf逗号是否不等于-1。
```
const comma = text.indexOf(",") !== -1;
```
您必须使用Number(string)将字符串转换为数字。
```
if (typeof Number(arr[0]) === "number") {..
```
如果验证成功，则必须返回false；如果发生错误，则必须返回true，你正相反。

完整的代码将是：

{
  classes: "custom",
  rule: ({ text }) => {
    const comma = text.indexOf(",") !== -1;
    if (comma) {
      const arr = text.split(",");
      if (arr[0] && arr[1]) {
        if (typeof Number(arr[0]) === "number" && typeof Number(arr[1]) === "number") {
          return false;
        }
      }
    }
    return true;
  }
}

更短的正则表达式规则将是：

{
  classes: "custom",
  rule: ({ text }) => {
    return !text.match(/^\d+,\d+$/);
  }
}

Vue标签输入自定义验证

1 个答案: