Client side validation using regular expression

Suggested Videos
Part 48 - Tools for writing regular expressions
Part 49 - JavaScript strings and regular expressions
Part 50 - JavaScript RegExp object



In this video we will discuss, how regular expressions can be used to perform client side validation.



On most of the websites it is common to check if the format of the email is valid. Using regular expressions we can achieve this very easily.

Invalid email : 


Valid email : 


Here is an example:

Email : <input type="text" id="txtEmail" onkeyup="validateEmail()" />

<script type="text/javascript">

    function validateEmail()

    {

        var emailTextBox = document.getElementById("txtEmail");

        var email = emailTextBox.value;

        var emailRegEx = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

        emailTextBox.style.color = "white";

        if (emailRegEx.test(email))

        {

            emailTextBox.style.backgroundColor = "green";

        }

        else

        {

            emailTextBox.style.backgroundColor = "red";

        }

    }

</script>