MooTools-입력 필터링

MooTools는 사용자 입력을 필터링 할 수 있으며 입력 유형을 쉽게 인식 할 수 있습니다. 기본 입력 유형은 숫자 및 문자열입니다.

숫자 함수

입력 값이 숫자인지 여부를 확인하는 몇 가지 방법에 대해 논의하겠습니다. 이 방법은 숫자 입력을 조작하는데도 도움이됩니다.

toInt ()

이 메서드는 모든 입력 값을 정수로 변환합니다. 변수에서 호출 할 수 있으며 변수에 포함 된 모든 항목에서 일반 정수를 제공하려고합니다.

텍스트 상자와 이름이 지정된 버튼이 포함 된 웹 페이지를 디자인하는 예를 살펴 보겠습니다. TO INT. 버튼은 텍스트 상자에 입력 한 값을 실제 정수로 확인하고 반환합니다. 값이 정수가 아니면NaN상징. 다음 코드를 살펴보십시오.

Example

<!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>

다음과 같은 출력을 받게됩니다.

Output

다른 값을 시도하고 실제 정수로 변환하십시오.

유형()

이 메서드는 전달한 변수의 값을 검사하고 해당 값의 유형을 반환합니다.

웹 페이지를 디자인하고 입력 값이 숫자, 문자열 또는 부울인지 확인하는 예를 들어 보겠습니다. 다음 코드를 살펴보십시오.

Example

<!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>

다음과 같은 출력을 받게됩니다.

Output

다른 값을 시도하고 유형을 확인하십시오.

한도()

limit () 메서드는 특정 숫자에 대한 하한 및 상한 값을 설정하는 데 사용됩니다. 숫자는 상한 값을 초과하지 않아야합니다. 초과하면 상한값으로 변경됩니다. 이 과정은 하한과 동일합니다.

값을 입력 할 수있는 텍스트 상자를 제공하는 예를 들어, 해당 값의 한계를 확인하는 버튼을 제공합니다. 예제에서 사용한 기본 제한은 0에서 255까지입니다. 다음 코드를 살펴보십시오.

Example

<!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>

다음과 같은 출력을 받게됩니다.

Output

한도를 확인하려면 다른 번호를 시도하십시오.

rgbToHex ()

rgbToHex () 메서드는 빨강, 녹색 및 파랑 값을 16 진수 값으로 변환하는 것입니다. 이 함수는 숫자를 처리하며 Array 컬렉션에 속합니다. 빨간색, 녹색 및 파란색에 대한 개별 값을 입력하는 웹 페이지를 디자인하는 예를 들어 보겠습니다. 세 가지 모두를 16 진수 값으로 변환하는 버튼을 제공합니다. 다음 코드를 살펴보십시오.

Example

<!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>

다음과 같은 출력을 받게됩니다.

Output

다른 빨강, 녹색 및 파랑 값을 시도하고 16 진수 값을 찾으십시오.

문자열 함수

입력 String 값을 조작 할 수있는 String 클래스의 몇 가지 메서드에 대해 설명하겠습니다. 진행하기 전에 문자열 함수를 호출하는 방법에 대한 다음 구문을 살펴 보겠습니다.

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

또는,

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

손질()

이 메서드는 주어진 문자열의 앞쪽 위치와 끝 위치의 공백을 제거하는 데 사용됩니다. 문자열 내부의 공백은 건드리지 않습니다. 다음 코드를 살펴보십시오.

Example

<!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>

다음과 같은 출력을 받게됩니다.

Output

위의 경고 상자에서 trim () 메서드를 호출하기 전과 trim () 메서드를 호출 한 후 String의 차이점을 찾을 수 있습니다.

깨끗한()

이 방법은 주어진 문자열에서 모든 공백을 제거하고 단어 사이의 단일 공백을 유지하는 데 사용됩니다. 다음 코드를 살펴보십시오.

Example

<!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>

다음과 같은 출력을 받게됩니다.

Output

contains ()

이 메서드는 주어진 문자열에서 하위 문자열을 검색하는 데 사용됩니다. 주어진 문자열에 검색 문자열이 포함되어 있으면 true를 반환하고 그렇지 않으면 false를 반환합니다. 다음 코드를 살펴보십시오.

Example

<!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>

다음과 같은 출력을 받게됩니다.

Output

대용품()

이 메서드는 입력 문자열을 기본 문자열에 삽입하는 데 사용됩니다. 다음 코드를 살펴보십시오.

Example

<!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>

다음과 같은 출력을 받게됩니다.

Output

세 개의 텍스트 상자에 텍스트를 입력하고 대체 문자열 버튼을 클릭하면 대체 문자열을 볼 수 있습니다.