Flex: Using Regular Expressions For RealTime Filtering

Another bit of UI fun that came up: Suppose that you are creating a form for an organization that requires email input for a single domain, but that they have specific rules that enable us to (1) make input easier and (2) prevent input errors.

In this case, let's suppose that numbers are verboten and that the typical format of the email address is the first initial and the entire last name (or the whole first name if that is all that is given). The email account name should be over-writeable in case it is an exception to the naming convention. Also, we need to remove any additional characters that might not be email friendly. Finally, the organization wants all email addresses are expressed in lowercase. An example would be:

"John Smith" >> "jsmith"

(This was an actual set of business rules, so don't ask me how they would differentiate James Smith from John Smith)

For the interface, we'll use a single TextInput for both the first and last name and we'll use simple binding to link that into the email TextInput. For good measure, there is a Label to show the company domain name.

So, moving right along we have a simple setup like:

<mx:TextInput id="user_name" />

<mx:TextInput id="user_email" text="{getUsername(user_name.text)}"

The removeSpaces() function will return the parsed user_name field. For that, we need to first get a handle on the first and last words (as separated by a space), or just the one word if that's all there is. To do that, we trim the TextInput.text and then split into an array on the " "'s. If the length of the resulting array is greater than 1, we want to grab the first character of the first word and the entirety of the last word. Otherwise, we just take the only array element available.

The heavy lifting of the function is done with a regular expression that strips away numbers and any unwanted characters.

private function getUsername(str:String):String {
var nameParts:Array = StringUtil.trim(str).split(" ");
var _username:String = nameParts.length >
1? String(nameParts[0]).charAt(0) + nameParts[nameParts.length-1] : nameParts[0];
return (_username.replace(/[0-9*,()&^%$#!@~`+<>{}=?\\\/]/g,'')).toLowerCase();
}

This could be packaged better and there are a couple of quirks - such as using a number as the second word such that only the first character of the only valid word is used, instead of the whole thing. For my uses, those aren't a bug deal as this isn't providing the whole validation, just filtering bad characters and potentially making life a little easier for the user.

Finally, as we want to allow tweaking after the fact, but still need to ensure that no crazy characters are allowed, we need to listent to the user_email change event and reparse the string. Note that the regular expression is a little different. In this case, spaces are not removed from the string by way of the split() method, so I have included the space as a character to be removed:

private function removeCharacters(ti:TextInput):void {            
ti.text = (ti.text.replace(/[0-9*, ()&^%$#!@~`+<>{}=?\\\/]/g,'')).toLowerCase();
}

And, event though I have include the source in the live example linked below, here is everything put together:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html" backgroundColor="#ffffff">

<mx:Script>
<![CDATA[
import mx.utils.StringUtil;
        
private const INPUT_WIDTH:int = 120;
        
private function getUsername(str:String):String {
var nameParts:Array = StringUtil.trim(str).split(" ");
var _username:String = nameParts.length >
1? String(nameParts[0]).charAt(0) + nameParts[nameParts.length-1] : nameParts[0];
return (_username.replace(/[0-9*,()&^%$#!@~`+<>{}=?\\\/]/g,'')).toLowerCase();
}
        
private function removeCharacters(ti:TextInput):void {            
ti.text = (ti.text.replace(/[0-9*, ()&^%$#!@~`+<>{}=?\\\/]/g,'')).toLowerCase();
}
        
]]>

</mx:Script>

<mx:Form top="20" horizontalCenter="0">
<mx:FormItem label="User Name">
<mx:TextInput id="user_name" width="{INPUT_WIDTH}" />        
</mx:FormItem>
<mx:FormItem label="User Email">
<mx:HBox>
<mx:TextInput id="user_email" text="{getUsername(user_name.text)}" width="{INPUT_WIDTH}" change="removeCharacters(user_email)" />
<mx:Label text="@myDomain.com.us" />
</mx:HBox>        
</mx:FormItem>
    
</mx:Form>
    
</mx:Application>

Here is a working example of using instantaenous regular expression filtering of text inputs.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
BlogCFC was created by Raymond Camden. This blog is running version 5.9.1.001. Contact Blog Owner