Today, let's take a look at how MooTools makes filtering user input very easy. Today we will talk about some basic numeric filtering, and tomorrow we will talk more about string filtering. Note: The input filtering in JavaScript is only used to ensure the smooth execution of (client) code. It cannot replace the string filtering on the server side to protect your applications from injection attacks.
In the last example in section 4, we get the RGB values from the text input box and use them to change the background color of the page. Today we will first look at some code in the example, let's talk about this.
RgbToHex ()
Technically, the rgbToHex () method actually belongs to the Array set. Because it is an array method for processing numbers, let's take a look at this method today. In terms of functions, rgbToHex () is used
Easy to use:
Reference code:
The Code is as follows:
Function changeColor (red_value, green_value, blue_value ){
Var color = [red_value, green_value, blue_value]. rgbToHex ();
Alert ('converts to: '+ color );
}
This is perfect because the values in red, green, and blue are numbers. If you pass in something unexpected:
At the end of the result, you can see a "NaN". NaN indicates that it is not a number (
Not a Number ). If you write the color value in the Code as hard-coded, this may not happen. But if you get this from an input form
Value, so you may encounter such a situation, you need to deal with such non-conforming input values.
ToInt ()
Therefore, we need to make sure that the parameters passed to the rgbToHex () method are numbers. here we need to use the toInt () method. ToInt () is another relatively simple function. You can call it on a variable, so it will convert it into an integer as much as possible.
Reference code:
The Code is as follows:
Var toIntDemo = function (make_me_a_number ){
Var number = make_me_a_number.toInt ();
Alert ('best Attempt: '+ number );
}
As you can see, the toInt () method cannot handle all the situations you can think of, but thanks to another cool method in MooTools called $ type (), we can also handle the problem well.
$ Type ()
$ Type () is another incredible simple and useful thing from MooTools. It can check whatever variable you pass in, and then return a string to tell you What type the variable is:
Reference code:
The Code is as follows:
Var checkType = function (variable_to_check ){
Var variable_type = $ type (variable_to_check );
Alert ("Variable is a:" + variable_type );
}
There are many types that can be detected by the $ type () method-you can
The Core. $ type () file contains a complete list. But now we are really concerned about how to detect integers. If we
The $ type () method is used in the toIntDemo () method, so we can easily process the input that toInt () cannot process:
Reference code:
The Code is as follows:
Var toIntDemo = function (make_me_a_number ){
// Try to make the input number
Var number = make_me_a_number.toInt ();
// If That didn't work, set number to 0
If ($ type (number )! = 'Number') {number = 0 ;}
Alert ('best Attempt: '+ number );
}
When we combine them with the changeColor () method, we can get an almost perfect solution:
Reference code:
The Code is as follows:
Var changeColor_2 = function (red_value, green_value, blue_value ){
// Try to make sure everything is an integer
Red_value = red_value.toInt ();
Green_value = green_value.toInt ();
Blue_value = blue_value.toInt ();
// Set default values on anything thats Not a Number
If ($ type (red_value )! = 'Number') {red_value = 0 ;}
If ($ type (green_value )! = 'Number') {green_value = 0 ;}
If ($ type (blue_value )! = 'Number') {blue_value = 0 ;}
// Calculate hex value
Var color = [red_value, green_value, blue_value]. rgbToHex ();
Alert ('converts to: '+ color );
}
The number passed to the rgbToHex () method in the last method exceeds the range 0-of the RGB value. This value is faithfully converted to its hexadecimal value. Unfortunately, this means that we accept a number beyond that range and we will not be able to get a valid hexadecimal color value. Fortunately, another method in MooTools can be used to solve this problem.
Limit ()
The limit () method in MooTools is also very simple and straightforward. You can call this method on a number and input the minimum value and the maximum value allowed by this number as the parameter.
Number, which is automatically rounded. You also need to keep this in mind: the limit method needs to pass in an integer parameter, so before using the limit method, you generally need to specify something as a number (or others in the number set (
Number Collection) use the toInt () method.
Reference code:
The Code is as follows:
Var limitDemo = function (number_to_limit ){
// Do our best to get an integer
Number_to_limit = number_to_limit.toInt ();
// Get the limited value
Var limited_number = number_to_limit.limit (0,255 );
Alert ("Number Limited To:" + limited_number );
}
Sample Code
Try mixing the above method with our changeColor () method:
Reference code:
The Code is as follows:
Var changeColor = function (red_value, green_value, blue_value ){
// Try to make sure everything is an integer
Red_value = red_value.toInt ();
Green_value = green_value.toInt ();
Blue_value = blue_value.toInt ();
// Set default values on anything thats Not a Number
If ($ type (red_value )! = 'Number') {red_value = 0 ;}
If ($ type (green_value )! = 'Number') {green_value = 0 ;}
If ($ type (blue_value )! = 'Number') {blue_value = 0 ;}
// Limit Everything to the RGB Scale (0-255)
Red_value = red_value.limit (0,255 );
Green_value = green_value.limit (0,255 );
Blue_value = blue_valuee.limit (0,255 );
// Calculate hex value
Var color = [red_value, green_value, blue_value]. rgbToHex ();
Alert ('converts to: '+ color );
}
Learn more
Download a zip package containing everything you need
- Standard Number processing function
- Number processing function of Mootools
- Array Processing Function of Mootools
