How to make an input that can receive phone or email?

Question

Vue.js

Hello. You need to make an input in which you can enter either mail or phone.
The problem is that the phone needs to be formatted with a mask and the input type must be set to numeric.

I'm doing on vue, tried vue-the-mask and v-mask. They do not accept null or false values, so there must be a mask, but it seems to me that it is impossible to write a mask for email. I tried to put two inputs side by side according to the condition that if there is a mask, then we will display the input with the mask, if not, we will display a simple input, but it works terribly crooked and it is not clear why. :(

Answer 1

Answer 2

Leave it as a text field, no masks needed. On onBlur + onSubmit, check that it's a valid email or phone number, if none, show an error. This is the simplest solution and it will most likely be enough for you.
It is possible to add a validation during input and which will check 2 cases at once.
1) the entered data is not suitable for either of the second
2) it is already clear that this is an email, validate as an email (in the case there is some kind of letter or @)
I also recommend that you use some ready-made validation solution, for example vuelidate to keep the code declarative and maintainable. However, I plan to write a DIY declarative validation tutorial soon.
The solution proposed by Dmitry Belyaevit will be difficult to maintain in the project, although it really solves the problem exactly as it was set.