IP address

[rudashi]

How is possible to mask an IP address?

mask: ['###.###.###.###']

This works only if you got full IP, but very common is get ###.###.#.##

[vhoyer]

don't ['###.###.###.###', '###.###.#.##'] work?

[vhoyer]

or maybe you could register another translatrion option, like { 'p': /^(?:1?\d{1,2}|2(?:[0-4]\d|5[0-5]))$/ }, then you register the mask like: 'p.p.p.p'

not that I ever used this lib, just tring to help :D

EDIT: Just tried, this. Dont work, but the last comment do work :D

We could raise an issue to support patterns that match with more than one character :D

[rudashi]

@vhoyer Thanks for help but your solution with p.p.p.p only works for one digits ip: 1.2.3.4

[vhoyer]

Yeah, sorry, afterwards I went to try it out and figured it doesn't work. I took a look at the code and it would be a pain to implement this :D. I think it is possible, but it would require a lot of work.

That said, my other suggestions (of doing ['###.###.###.###', '###.###.#.##']) does work for your particular problem, I did a small demo here: https://codesandbox.io/s/vue-template-ev453

Is that a super problem?

[rudashi]

Unfortunately, it is problematic. I have several extreme cases:

• .###.###.

• .###.###.

• .###.###.

• .###.##.

• .###.##.

• .###.##.

• .###.#.

• .###.#.

• .###.#.

[maiorano84]

You're also not taking into consideration the fact that "999.999.999.999" would pass the mask validation, but would be an invalid IP address.

You would need a custom token to ensure that you allow 4 groupings of numbers 0-255.

This is untested, but something like this could work:

data() {
    masks: {
        IP: {
            mask: 'B.B.B.B',
            tokens: {
                'B': { pattern: /\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b/ }
            },
        }
    }
},

[vhoyer]

You're also not taking into consideration the fact that "999.999.999.999" would pass the mask validation, but would be an invalid IP address.

You would need a custom token to ensure that you allow 4 groupings of numbers 0-255.

This is untested, but something like this could work:

data() {
    masks: {
        IP: {
            mask: 'B.B.B.B',
            tokens: {
                'B': { pattern: /\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b/ }
            },
        }
    }
},

In fact, I tested this, I mentioned about it on this other comment. Unfortunatly, the custom tokens implementation for a single token match with more than one character does not exist. :/

If you see this while loop closely: https://github.com/vuejs-tips/vue-the-mask/blob/master/src/maskit.js#L7-L26 you will notice that this checks in a per character basis, meaning the custom pattern we made just go through as unmatched :(

Although I think even if we were to open a PR for this feature, no mantainer would bother, as this repo has been staled for like, two and a half years.

[rudashi]

Any alternative repo?

[maiorano84]

@vhoyer Ah, you're right. I completely missed your comment, sorry about that.

And you're 100% right, this library falls short in that it's on a per-character basis. It doesn't look like it was built for this level of pattern-matching.

I've already put in an issue asking for the maintainers to mark this project as abandoned. We'll see if they even bother to respond.

[vhoyer]

There is this guy that posted an issue here about forking this project: https://github.com/vuejs-tips/vue-the-mask/issues/112.

This is the fork: https://github.com/RonaldJerez/vue-the-mask

later on, apparently he decided to create a new package: https://github.com/RonaldJerez/vue-input-facade

Although I haven't tested any of that, the last commit is from January 3rd, so it looks promising