JSFiddle - React, Tailwind, and code Playground

by dbjdbj

HTML

<h2>Email Regular Expression Check</h2>
<p>For more checks, please type different email.</p>
<br/><br/>
<label class="bigger" for="fname">Email:</label>
<input type="text" class="bigger frame" id="txtEmail" value="[email protected]" >
<button class="bigger" onclick="checkEmail()" >&nbsp;Check&nbsp;</button>
<br/><br/>

<p class="bigger" id="rezult">&nbsp;</p>

CSS

.big    { font-size: xx-large; }
.bigger { font-size: large; }
.frame  { width: 50%; padding: 5px; border: 1px solid black;  }

JavaScript

function checkEmail() {

try {
  var email = document.getElementById('txtEmail').value;
  var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;


  if (!filter.test(email)) {
   pokazi("That is NOT a valid email");
    return false;
  } else {
    pokazi("That is a Valid email!");
  }
  } catch(x)
  {
     pokazi("EXCEPTION:\n\n" + x);
  }
    document.getElementById('txtEmail').focus();
}

var rez = document.getElementById('rezult') ;
  
var pokazi = function ( msg_ )
{
    rez.innerText = msg_;
}