MooTools - 输入过滤

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

数字函数

让我们讨论几种检查输入值是否为数字的方法。这些方法还将帮助您操作数字输入。

toInt()

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

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

示例

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var toIntDemo = function(){
            var input = $('input').get('value');
            var number = input.toInt();
            alert ('Value is : ' + number);
         }
         
         window.addEvent('domready', function() {
            $('toint').addEvent('click', toIntDemo);
         });
      </script>
   </head>
   
   <body>
      Enter some value: <input type = "text" id = "input" />
      <input type = "button" id = "toint" value = "TO INT"/>
   </body>
   
</html>

您将收到以下输出 −

输出

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

typeOf()

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

让我们举一个例子，我们设计一个网页并检查输入值是数字、字符串还是布尔值。看看下面的代码。

示例

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         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);
         });
      </script>
   </head>
   
   <body>
      Enter some value: <input type = "text" id = "input" />
      <input type = "button" id = "checktype" value = "CHECK TYPE"/>
   </body>
   
</html>

您将收到以下输出 −

输出

尝试不同的值并检查类型。

limit()

limit() 方法用于设置特定数字的下限和上限值。数字不应超过上限值。如果超过，则数字将更改为上限值。此过程也与下限相同。

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

示例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         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);
         });
      </script>
   </head>
   
   <body>
      Enter some value: <input type = "text" id = "input" />
      <input type = "button" id = "check_limit" value = "Check Limit (0 to 255)"/>
   </body>
   
</html>

您将收到以下输出 −

输出

尝试不同的数字来检查限制。

rgbToHex()

rgbToHex() 方法用于将红色、绿色和蓝色值转换为十六进制值。此函数处理数字，属于数组集合。让我们举一个例子，我们将设计一个网页来输入红色、绿色和蓝色的单独值。提供一个按钮将这三个值转换为十六进制值。看看下面的代码。

示例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         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);
         });
      </script>
   </head>
   
   <body>
      Red Value: <input type = "text" id = "red" /><br/><br/>
      Green Value: <input type = "text" id = "green" /><br/><br/>
      Blue Value: <input type = "text" id = "blue" /><br/><br/>
      <input type = "button" id = "rgbtohex" value = "RGB To HEX"/>
   </body>
   
</html>

您将收到以下输出 −

输出

尝试不同的红色、绿色和蓝色值并找到十六进制值。

字符串函数

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

字符串

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

或者，

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

trim()

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

示例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var input_str = " This is tutorialspoint.com ";
            document.writeln("<pre>Before trim String is : |-"+input_str+"-|</pre>");
            
            var trim_string = input_str.trim();
            document.writeln("<pre>After trim String is : |-"+trim_string+"-|</pre>");
         });
      </script>
   </head>
   
   <body>
   </body>
   
</html>

您将收到以下输出 −

输出

在上面的警告框中，您可以发现调用 trim() 方法之前和调用 trim() 方法之后字符串中的差异。

clean()

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

示例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var input_str = " This is tutorialspoint.com ";
            document.writeln("<pre>Before clean String is : |-"+input_str+"-|</pre>");
            
            var trim_string = input_str.clean();
            document.writeln("<pre>After clean String is : |-"+trim_string+"-|</pre>");
         });
      </script>
   </head>
   
   <body>
   </body>
   
</html>

您将收到以下输出 −

输出

contains()

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

示例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var containsString = function(){
            var input_string = "Hai this is tutorialspoint";
            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);
         });
      </script>
   </head>
   
   <body>
      Given String : <p>Hai this is tutorialspoint</p>
      Enter search string: <input type = "text" id = "input" />
      <input type = "button" id = "contains" value = "Search String"/>
   </body>
   
</html>

您将收到以下输出 −

输出

substitute()

此方法用于将输入字符串插入到主字符串中。请查看以下代码。

示例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         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);
         });
      </script>
   </head>
   
   <body>
      Given String : <p>One is {one}, Two {two}, Three is {three}</p>
      one String : <input type = "text" id = "one" /><br/><br/>
      two String : <input type = "text" id = "two" /><br/><br/>
      three String : <input type = "text" id = "three" /><br/><br/>
      <input type = "button" id = "contains" value = "Substitute String"/>
   </body>
   
</html>

您将收到以下输出 −

输出

在三个文本框中输入文本，然后点击替换字符串按钮，即可看到替换字符串。

MooTools 教程

MooTools 有用资源

MooTools - 输入过滤

数字函数

toInt()

typeOf()

limit()

rgbToHex()

字符串函数

字符串

trim()

clean()

contains()

substitute()

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！