Refresh input class on input change-CodePudding

I have been trying for some time to refresh the classes of an input when it changes. I see that when the input changes, my function is called. However, I have to type a new letter in my input to refresh its classes. I would like that when I leave the input with the mouse and click somewhere else, the classes refresh (at the same time as when the bind @change is called)

My input:

<input
       type="email"
       
       v-model="student.email"
       placeholder="Email"
       @change="validateEmail(student.email)"
       :
/>

My validateEmail function:

methods: {
    validateEmail(email) {
      if (/^\w ([.-]?\w )*@\w ([.-]?\w )*(\.\w{2,3}) $/.test(email)) {
        this.errors.clear("live.student.email")
      } else {
        if (!this.errors.get("live.student.email"))
          this.errors.push({"live.student.email" : ["Email mal formaté"]})
      }
    }
}

My errors output on error triggered:

live.student.email: Array(1)
0: "Bad formatted"
length: 1

CodePudding user response：

Have you tried something like this?:
Your input:

<input
       type="email"
       
       v-model="student.email"
       placeholder="Email"
       @mouseleave="mouseLeave(student.email)"
       @change="validateEmail(student.email)"
       :
/>

The methode:

methodes:{
mouseLeave(email) {
        //what to do
        validateEmail(email)
    }
}

CodePudding user response：

Use mouseleave event handler.

something like

@mouseleave:"validateEmail(student.email)"