How to use textbox with characters and numbers only in vuejs?

Question

 methods: {      
      isEmail(e) {
       let char = String.fromCharCode(e.keyCode); // Get the character
       if(/^[A-Za-z]+$/.test(char)) return true; // Match with regex 
       else e.preventDefault(); // If not match, don't add to input text 
                   },

 <input type="email" v-model.trim="$v.email.$model" :class="{'is-invalid': validationStatus($v.email)}" class="input-section" placeholder="Enter your company email ID" :maxlength="maxemail" v-on:keypress="isEmail($event)"> 

<div v-if="!$v.email.required" class="invalid-feedback">The email field is required. 
</div>
<div v-if="!$v.email.maxLength" class="invalid-feedback">30 characters {{ 
$v.email.$params.maxLength.min }} only</div>

My issue is that at present the textbox above is only accepting characters (A to Z and z to A). However, I need it to accept alpha numeric characters (i.e A to Z, a to z, 0 to 9 and special characters like *,&,@). How do I change the code above to accomplish this?

I'm sorry, but I don't understand what question you're asking. Could you clarify what the problem is you're facing? — Stanislas
– Stanislas, Commented Feb 12, 2021 at 19:17
My issue is at present textbox accepting only characters. it need to accept alpha numeric characters (i.e, A to Z and a to z and 0 to 9, *,&,@). — T dhanunjay
– T dhanunjay, Commented Feb 13, 2021 at 5:28
Simply add 0-9 for alpha numeric and any other special characters you need in your regex so for alpha numeric it becomes [A-Za-z0-9] — RajkumarG
– RajkumarG, Commented Feb 13, 2021 at 6:43

Stanislas · Accepted Answer · 2021-02-13 11:39:18Z

1

As you may or may not know, /^[A-Za-z]+$/ is a regular expression and is currently limited to only allow the values A to Z and a to z.

If I were to purely answer your question, it would be to add the missing characters to your existing regular expression. E.g. /^[A-Za-z0-9*&@]+$/

Note that there are online tools you can use to test and validate your regular expressions.
For example: https://regex101.com/r/uE4GfO/2

However, currently it's only validating character per character, while it would be more efficient (and most likely more correct) to validate the entire string at once.

Additionally, it looks like you're trying to validate an email address. You should consider using a regular expression as discussed here: See How to validate an email address in JavaScript

answered Feb 13, 2021 at 11:39

Stanislas

2,0401 gold badge14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use textbox with characters and numbers only in vuejs?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related