使用 Javascript 的电子邮件验证不适用于 HTML

Question

I'm trying to let user check if his email adress pass RFC standard, comparing it with regular expression dropped below.

I already checked few examples on console using function responsible for excecute validation test. I'm aware of possibilities that my regex is not ready for, but whenever I tried a few examples on console - it works.

Problem begins when function gets value from included 'text' HTML form.

Using Javascript I also checked how value is interpretated by browser (Simply pasting text into another div) - result is ok.

Why validation doesn't work properly whenever use input value on HTML forms?

 const regular = /^[az/d]+[/d/w.-]*@(?:[az/d-]+[az/d-]\\.+){1,5}[az]{1,3}[az]$/i; test = function(email) { if (regular.test(email) == false) { alert('Your email adress is not correct. Try again!') document.getElementById('result').innerHTML = document.getElementById('text').value; return false; } else { alert('Match'); return true; } }

 <div id='form-structure'> <form name='form1' action='#'> <label for='email' name='email'>E-mail</label> <input type='text' name='text' id='text' placeholder="Enter your email" required> <button type='submit' name='submit' onclick="test(document.form1.text)" value='Submit'>Test</button> </form> </div> <div id='result' style='font-size: 15px'> </div>

Answer 1

You are not passing the correct value to your function. In your function, the email variable is

<input type="text" name="text" id="text" placeholder="Enter your email" required></input>

What you need to pass to your function is the actual value of the element #test . This can be retreive using this selector. You can use this selector inside the function, or directly into the function call. The latter is prefered, like Mr Zach pointed out. :

 document.getElementById('text').value;

Also, you regex does not seams right. You are using foward slash ( / ) in your digit token and your word token. You need backslash ( \\ ) in that case.

I've also removed the submit behaviour of your form, this is to facilitate debugging. It was not the cause of your problem.

 const regular = /^[az\\d]+[\\d\\w.-]*@(?:[az\\d-]+[az\\d-]\\.+){1,5}[az]{1,3}[az]$/i; var test = function(email) { if (regular.exec(email) == null) { alert('Your email adress is not correct. Try again!') document.getElementById('result').innerHTML = document.getElementById('text').value; return false; } else { alert('Match'); return true; } }

 <div id='form-structure'> <form name='form1' action=''> <label for='email' name='email'>E-mail</label> <input type='text' name='text' id='text' placeholder="Enter your email" required> <button type='button' name='submit' onclick="test(document.getElementById('text').value)" value='Submit'>Test</button> </form> </div> <div id='result' style='font-size: 15px'> </div>

Answer 2

While this may not be the best of code example, the simple solution to your issue lies in document.form1.text . Simple change it to document.forms.form1.text .

Eg

<button type='submit' name='submit' onclick="test(document.forms.form1.text.value)" 
         value='Submit'>Test</button>

EDIT:

I missed the .value before. Now it should work.