MooTools - 输入过滤

MooTools可以过滤用户输入，并且可以轻松识别输入类型.基本输入类型是数字和字符串.

数字函数

让我们讨论一些方法来检查输入值是否为数字或不.这些方法还可以帮助您操作数字输入.

toInt()

此方法将任何输入值转换为整数.你可以在变量上调用它，它会尝试从变量包含的内容中给出常规整数.

让我们举个例子来设计一个包含文本框和按钮的网页命名为 TO INT .该按钮将检查并将您输入到文本框中的值作为实数整数返回.如果该值不是整数，则它将返回 NaN 符号.请看下面的代码.

示例

                                    var toIntDemo = function(){            var input = $('input').get('value');            var number = input.toInt();            alert ('Value is : ' + number);         }                  window.addEvent('domready', function() {            $('toint').addEvent('click', toIntDemo);         });                     Enter some value:             

尝试不同的值并将它们转换为实数整数。

typeOf()

此方法检查您传递的变量的值，并返回该值的类型。

让我们举一个例子，其中，我们设计一个网页并检查输入值是Number，String还是Boolean。 看一下下面的代码。

示例

                                    var checkType = function(){            var input = $('input').get('value');            var int_input = input.toInt();                        if(typeOf(int_input) != 'number'){               if(input == 'false' || input == 'true'){                  alert("Variable type is : Boolean"+" - and value is: "+input);               } else{                  alert("Variable type is : "+typeof(input)+" - and value is: "+input);               }            } else{               alert("Variable type is : "+typeof(int_input)+"                   - and value is:"+int_input);            }         }                  window.addEvent('domready', function() {            $('checktype').addEvent('click', checkType);         });                     Enter some value:             

尝试其他值并检查类型。

limit()

imit（）方法用于为特定数字设置下限值和上限值。 该数字不应超过上限值。 如果超过，则将数字更改为上限值。 这个过程也与下限相同。

让我们以提供一个用于输入值的文本框，提供用于检查该值限制的按钮的示例为例。 我们在示例中使用的默认限制是0到255。请看下面的代码。

示例

                                    var checkLimit = function(){            var input = $('input').get('value');            var number = input.toInt();            var limited_number = number.limit(0, 255);            alert("Number is : " + limited_number);         }                  window.addEvent('domready', function() {            $('check_limit').addEvent('click', checkLimit);         });                     Enter some value:             

尝试使用其他数字检查限制。

rgbToHex()

rgbToHex（）方法是将红色，绿色和蓝色值转换为十六进制值。 此函数处理数字，属于Array集合。 让我们举一个例子，其中，我们将设计一个网页来输入Red，Green和Blue的各个值。 提供一个按钮，将所有三个都转换为十六进制值。 看一下下面的代码。

示例

                                    var rgbToHexa_Demo = function(){            var red = $('red').get('value');            var red_value = red.toInt();            var green = $('green').get('value');            var green_value = green.toInt();            var blue = $('blue').get('value');            var blue_value = blue.toInt();            var color = [red_value, green_value, blue_value].rgbToHex();            alert(" Hexa color is : " + color);         }                  window.addEvent('domready', function() {            $('rgbtohex').addEvent('click', rgbToHexa_Demo);         });                     Red Value: 

      Green Value: 

      Blue Value: 

            

尝试不同的红色，绿色和蓝色值，然后找到十六进制值。

String Functions

让我们讨论一些可以控制输入String值的String类方法。 在继续之前，让我们看一下如何调用字符串函数的以下语法。

String

var my_variable = "Heres some text";var result_of_function = my_variable.someStringFunction();

Or,

var result_of_function = "Heres some text".someStringFunction();

trim()

此方法用于删除给定字符串的开头和结尾位置的空白。 它不会碰到字符串内的任何空格。 看一下下面的代码。

示例

                                    window.addEvent('domready', function() {            var input_str = " This is IT屋.com ";            document.writeln("
Before trim String is : |-"+input_str+"-|
");                        var trim_string = input_str.trim();            document.writeln("
After trim String is : |-"+trim_string+"-|
");         });                     

在上面的警报框中，可以在调用trim（）方法之前和调用trim（）方法之后找到String中的差异。

clean()

此方法用于删除给定字符串中的所有空格，并在单词之间保持单个空格。 看一下下面的代码。

示例

                                    window.addEvent('domready', function() {            var input_str = " This is IT屋.com ";            document.writeln("
Before clean String is : |-"+input_str+"-|
");                        var trim_string = input_str.clean();            document.writeln("
After clean String is : |-"+trim_string+"-|
");         });                     

contains()

此方法用于搜索给定字符串中的子字符串。 如果给定的字符串包含搜索字符串，则返回true，否则返回false。 看一下下面的代码。

示例

                                    var containsString = function(){            var input_string = "Hai this is IT屋";            var search_string = $('input').get('value');            var string_contains = input_string.contains(search_string);            alert("contains : " + string_contains);         }                  window.addEvent('domready', function() {            $('contains').addEvent('click', containsString);         });                     Given String : 
Hai this is IT屋
      Enter search string:             

substitute()

此方法用于将输入字符串插入主字符串。 看一下下面的代码。

示例

                                    var containsString = function(){            var input_string = "One is {one}, Two is {two}, Three is {three}";            var one_str = $('one').get('value');            var two_str = $('two').get('value');            var three_str = $('three').get('value');                        var substitution_string = {               one : one_str,               two : two_str,               three : three_str            }            var new_string = input_string.substitute(substitution_string);            document.write("NEW STRING IS : " + new_string);         }                     window.addEvent('domready', function() {            $('contains').addEvent('click', containsString);         });                     Given String : 
One is {one}, Two {two}, Three is {three}
      one String : 

      two String : 

      three String : 

            

在三个文本框中输入文本，然后单击替换字符串按钮，然后您将看到替换字符串.