How to get Regex through other components?-CodePudding

I have a little problem with my Vue application.

Here I have a .vue file named Module1.vue, where the user has to enter a email adress.

<template>
<div class="row">
 <div class="column">
  <span>Emailadresse</span>
 </div>
 <div class="column column2">
  <input id="inputMail" type="text" placeholder="Bsp: franken@stein.öö"/>
 </div>
 <span ref="mailSpan1" id="mailSpan"></span>
</div>

</template

Then i created a method which should check the correctness of the email format. And to show in a span if the email is valid or not.

module.exports = {
  name: "Emaildaten Baustein",
  props: {},
  data() {
  },
  methods:{
    checkInput(){
        let email = document.getElementById('inputMail');
        let spanMail = document.getElementById('mailSpan');

        email.onkeydown = function(){
        const regex = /^([\.\_a-zA-Z0-9] )@([a-zA-Z] )\.([a-zA-Z]){1,8}$/;
        const regexo = /^([\.\_a-zA-Z0-9] )@([a-zA-Z] )\.([a-zA-Z]){1,3}\.[a-zA-Z]{1,3}$/;
        if(regex.test(email.value) || regexo.test(email.value))
        {
          spanMail[0].value="Your email is valid";
          spanMail[0].style.color= 'lime';
        }
        else
        {
          spanMail[0].value="Your email is invalid";
          spanMail[0].style.color= 'red';
        }
      }
    }
  },
  mounted(){
    this.checkInput();
  }
};

Now when I run my application and type in something, I get this error:

Uncaught TypeError: Cannot set property 'value' of undefined
    at HTMLInputElement.email.onkeydown (eval at C (httpVueLoader.js:86), <anonymous>:32:29)

For you information: I use this Module1.vue component in a other component. This looks like this:

<template>
 <header-component></header-component>
 <email-component></email-component> //Module1.vue
 <footer-component></footer-component>
</template>

CodePudding user response：

Since it says "value" is undefined.

Checking value before using regex could solve this.


if (email.value === undefined) 
   return false;

Something like this.

CodePudding user response：

I think the problem lies here:

spanMail[0].value="Your email is valid";

You're initializing your spanMail variable with:

let spanMail = document.getElementById('mailSpan');

and getElementById(id) returns an actual Element, not the list of Elements. So your code should be more like:

spanMail.value="Your email is valid";

CodePudding user response：

I already found the mistake. You cannot do

spanMail[0].value="Your email is valid";

instead i did

spanMail.textContent="Your email is valid";