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() 方法用於將紅色、綠色和藍色值轉換為十六進位制值。此函式處理數字並屬於 Array 集合。讓我們舉一個例子，在其中我們將設計一個網頁以輸入紅色、綠色和藍色的各個值。提供一個按鈕將所有三個值轉換為十六進位制值。請檢視以下程式碼。

示例

<!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() 方法之前和之後字串的差異。

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>

您將收到以下輸出 -

輸出

在三個文字框中輸入文字，然後單擊替換字串按鈕，然後您將看到替換字串。

列印頁面
上一頁
下一頁
廣告

© . All rights reserved.