Validate user input using JavaScript

Evaluating regular expressions

Regular expressions are a mix of special characters and literal characters that make up the pattern that someone would want to match.

Validating user input in JavaScript can be more effective than inline with attributes.

The following Table lists the special characters and their meaning:

Symbol Description
^ The caret character denotes the beginning of a string.
$ The dollar sign denotes the end of a string.
. The period indicates to match on any character.
[A-Z] Alphabet letters indicate to match any alphabetic character. This is case-sensitive. To match lowercase letters, use [a-z].
\d This combination indicates to match any numeric character.
+ The plus sign denotes that the preceding character or character set must match at least once.
* The asterisk denotes that the preceding character or character set might or might not match. This generates zero or more matches.
[^] When included in a character set, the caret denotes a negation. [^a] would match a string that doesn’t have an ‘a’ in it.
? The question mark denotes that the preceding character is optional.
\w This combination indicates to match a word character consisting of any alphanumeric character, including an underscore.
\ The backslash is an escape character. If any special character should be included in the character set to match on literally, it needs to be escaped with a \. For example, to find a backslash in a string, the pattern would include \\.
\s This combination indicates to match on a space. When it’s combined with + or *, it can match on one or more spaces.

You can build regular expression for evaluating email addresses, postal code, URLs, phone numbers etc...

The following code demonstrates regular expression for a postal code: 

<body>
    <form>
         <label for="postalCode">Postal Code: </label>
         <input type="text" title="Invalid Postal Code."
                pattern="^[A-Z,a-z]\d[A-Z,a-z][\s{1}]?\d[A-Z,a-z]\d" />
    </form>
</body>

The above regular expression uses the following elements:

  • ^[A-Z,a-z] - the caret indicates the beginning of a string, the next an alphabetic letter.
  • \d - a number between 0-9.
  • [A-Z,a-z] alphabetic letter (uppercase or lowercase).
  • [\s{1}]? - an optional space denoted with the ?.
  • \d - a number between 0-9.
  • [A-Z,a-z] alphabetic letter (uppercase or lowercase).
  • \d - a number between 0-9.

Evaluating regular expressions in JavaScript

Just like with strings and integers, regular expressions are objects in JavaScript.

To encapsulate the expression, use the forward slash /<expression>/ instead. JavaScript knows that text surrounded by forward slashes in this way is a regular expression object.

The following code evaluates a postal code using regular expression in JavaScript:

<body>
<form>
    <label for="regExString">Postal Cod : </label>
    <input type="text" id="regExString" /> <br />
    <div id="span1"></div><br />
    <button onclick="CheckString();">Evaluate</button>
</form>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    var CheckString = function () {
        try {
            var s = $('#regExString').val();
            //REGULAR EXPRESION letter-number-letter  opsional space (1) -number-letter
            var regExpression = /^[A-Z,a-z]\d[A-Z,a-z][\s{1}]?\d[A-Z,a-z]\d/;
            if (regExpression.test(s))
                document.getElementById("span1").innerHTML= ("Valid postal code.");
            else
                document.getElementById("span1").innerHTML = ("Invalid postal code.");
        } catch (e) {
            alert(e.message);
        }
    }
</script>
</body>

Evaluating regular expressions in JavaScript using exec method

The regular expression object also provides a method called exec. This method returns the portion of the input string that matches the expression.

The following code example demonstrates this: 

<body>
<form>
    <label for="regExString2">Name : </label>
    <input type="text" id="regExString2" /> <br />
    <div id="div2"></div><br />
    <button onclick="CheckStringExec();">Evaluate with Exec</button>
</form>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
 <!--  /REGULAR EXPRESION with EXEC METHOD -->
<script type="text/javascript" >
    var CheckStringExec = function () {
        var s = $('#regExString2').val();
        var regExpression = /^[A-Z,a-z]\d[A-Z,a-z][\s{1}]?\d[A-Z,a-z]\d/;
        var results = regExpression.exec(s);
            if (results != null)
                //results[] - return string array
                alert("Valid postal code." + results[0]);
            else
                alert("Invalid postal code.");
    }
</script>
</body>

The string object also provides regular expression methods such as the search and match method.

  • The search method returns the index of the character in the string where the first match occurred.
  • The match method returns the part of the string that matches the pattern, much like the exec method.

Ads Right