How to add allowed symbols on input field in HTML?

user_16732680 0
Viewed 171

I have my own create input tag which has to field for phone number:

    <base-input
        style="margin-bottom: 15px; width: 100%; max-width: 510px;"
        v-model="phone"
        type="tel"
        placeholder="Mobile phone"
    />

How can I add only allowed symbols (0-9 and +). I was trying to use pattern="[0-9]+", but it doesn't work. Also, as I know, it can be done with regular expressions, but I don't know how to use it here

vue.js input css html javascript
2 Answers

Use the regex ^[0-9+]+$. It allows numbers and +

Example here

user_149503610

The HTML input tag has a pattern attribute that receives a RegEx.

for your case:

<input
style="margin-bottom: 15px; width: 100%; max-width: 510px;"
v-model="phone"
type="tel"
placeholder="Mobile phone" 
pattern="[0-9\+]+" title="Phone number - allowed symbols are (0-9 and +)" />

If the pattern does not match it will throw the title.

user_168348040
Related