Vuetify Email Rules hangs the web page when we type very long emails?

Question

I'm using the VuetifyJs form component for VueJS and I'm trying to add validation to the email when you input.

But when we type very long emails, it makes the web page unresponsive and freezes the email field. I can understand that very long emails are not valid and should be avoided but then it should not hang the page.

I am using the below email rule provided by on the form component page :

emailRules: [
  v => !!v || 'E-mail is required',
  v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E- 
  mail must be valid'
]

You can reproduce the issue on the below CodePen URL. Please do not copy paste the email. You reproduce the issue only when you type it manually.

CodePen Url : https://codepen.io/dhnsh/pen/rKQpGb

Example Email Input : [email protected]

---

1) How can we validate the email in vuetify if its valid or not when you type ?

2) Is this a bug in the framework or something to do with the javascript behaviour ?

Answer 1

I did it like this, it work for me:

emailRules: [
   (v) => !!v || "Email is required",
   (v) => /.+@.+\..+/.test(v) || "Email must be valid",
]