I’ll break it down to the individual sections with a brief explaination.

//protocol and subdomain
(http(s)?:\/\/)?(([a-z]+[a-z0-9\-]*[.])?

The first part includes the protocol (http:// or https://), I am only dealing with web http urls here and it is optional in my app hence the ? at the end of the first group, the rest includes an optional subdomain which should start with one or more letters followed by zero or more letters/numbers/hyphens and a dot. This first subdomain and dot is also optional. So far this would match: [empty string] http:// https//www. https://ww2 etc.

//server hostname
([a-z0-9]+[a-z0-9\-]*[.])+[a-z]{2,3}|localhost)

This next part includes the rest of the web host, the first grouping (first enclosing brackets) specifies the start of the hostname or a further subdomain which must start with a letter or number followed by a dot (the dot as a character set is how to represent the dot in Flex, you might be able to just use \.). This can be repeated many times, but then should be followed by 2 or three characters. Alternatively the hostname localhost can be used instead, the extra closing bracket matches the additional opening one after the protocol. This section should match: www.example.com localhost example.com example.co.uk co.uk etc.

//web path
(\/[a-z0-9_-]+[a-z0-9_ -]*)*\/?

This next part consists of the optional path (directory from the web root), it starts with a forward slash and can be any number of letters, numbers, underscores, spaces or hyphens, but can not start with a space (you might need to backslash escape your hypen in a different language. The trailing backslash is also optional as is the entire path. This part should match: [empty string] / /directory /a/b/ etc.

//query string
(\\?[a-z0-9_-]+=[a-z0-9 ',.-]*(&[a-z0-9_-]+=[a-z0-9 ',.-]*)*)?

This part contains the optional query string part of the URL. Starting with a ? (may require only a single backslash in a different language), followed by the first parameter made up of one or more letters/numbers/underscores/hyphens the equals sign, followed by an optional parameter value made up of letters/numbers/spaces/apostrophes/commas/dots/hypens. This parameter=value part of the query string can be repeated several times after that but each extra parameter should be preceded with the ampersand (you would normally use just the & for this, but flex requires the encoded version). This section could match: [empty string] ?a= ?a=bc ?a=b&c=d&e=f etc.

//fragment
(#[a-z0-9/_-]*)?$

Finally the last part of the expression contains the optional url fragment (the part with a #). In my case I specified zero or more letters/numbers/forward slashes/underscores/hypens (flex does not require escaping the forward slash when it is included in a character set). Then the dollar sign specifies that there should not be anything else after this. This could match: [empty string] # #value #a/b/c etc.

I hope this is useful to those struggling to create their own URL regular expression matchers. Flex devs remember to double escape the ? for the query string part of the URL.

Lets have a look at a quick simple example, lets say I have a form with 3 input fields, name, email and website, we want to have the name and email fields required, we want to check the email is valid and because we are storing these fields in a database with a character limit we need to check the fields are not too long. Below is the html form code and the javascript for the validation.

In the above example you can see that you can apply the validation rules both in javascript and also using the predefined rule names as the css class for the input. E.g. the email input field is using classes email and required, the validation plugin will look for any class names on the inputs and apply the validation rule if there is one. I could have defined the email rule solely in the script but I wanted to show that there is a quicker way using classes. The working example for the above code is below.

You can also do remote validation. For example, lets say in our example we did not want someone with the same email address to be subscribed twice. You can use a special validation rule remote which points to a script which should output true or false based on the form input value. We will also give a special message for when the email address is already in use. The changed script code is then:

The running example now will not allow you to enter the email test@example.com, for this example there is a script called check_subscribed.php which is hard coded to look for the POST email variable and return false if it equals test@example.com.

So that is all good everything seems to be validating fine. Now I will show you a small case to watch out for. Lets assume that the subscribe form needs to be submitted using ajax and only accepts a required email address which should be remotely validated. Below is the code and the working example, if you simply enter the already subscribed email test@example.com and submit you see it does not work properly, the form gets submitted even though the validation fails.

Update 29/09/2010 since updating this post and rechecking the code it appears, this actually does work. Perhaps the browsers have changed the order the javascript events occur, I certainly did not change anything, this was an issue previously.

Code and example below.

The reason the above example did not work properly is because the remote validation checking is done asynchronously, as is the ajax request. In the above code, the form submit event binding function checks first if the form is valid before doing the ajax submit. The trouble is that the remote validation is done asynchronously. So the valid check is just returning true instead of false. In order to solve this the remote validation needs to be done synchronously instead (or async: false). Below is the relevant fix and the fixed example.

Update 27/09/2010

It has been asked what the check_subscribed.php script did, so here it is below:

Update 01/11/2010

Someone has asked for the files used in these examples, so here is a zip file containing a html page and the necessary php scripts. The jquery and validation plugin are not included in the zip but are referenced as external scripts. This is a recommended way of including jQuery in your sites (but obviously a more up to date version).