Учебники

MooTools — входная фильтрация

Сентябрь 8, 2018

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>

Вы получите следующий вывод —

Выход

Попробуйте разные значения и конвертируйте их в реальные целые числа.

тип()

Этот метод проверяет значение передаваемой переменной и возвращает тип этого значения.

Давайте рассмотрим пример, в котором мы создаем веб-страницу и проверяем, является ли входное значение Number, String или Boolean. Посмотрите на следующий код.

пример 

<!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 () используется для установки значений нижней и верхней границ для определенного числа. Число не должно превышать значение верхней границы. Если оно превышает, то число меняется на верхнее граничное значение. Этот процесс аналогичен нижней границе.

Давайте рассмотрим пример, в котором есть текстовое поле для ввода значения, кнопка для проверки предела этого значения. Ограничение по умолчанию, которое мы использовали в этом примере, составляет от 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, которые могут манипулировать входным значением String. Прежде чем мы продолжим, давайте взглянем на следующий синтаксис вызова строковой функции.

строка 

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

Или же, 

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

отделка()

Этот метод используется для удаления пробелов передней позиции и конечной позиции данной строки. Это не касается никаких пробелов внутри строки. Посмотрите на следующий код.

пример 

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

Вы получите следующий вывод —

Выход

В приведенных выше окнах предупреждений вы можете найти различия в String до вызова метода trim () и после вызова метода 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 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>

Вы получите следующий вывод —

Выход

содержит()

Этот метод используется для поиска подстроки в данной строке. Если данная строка содержит строку поиска, она возвращает истину, в противном случае она возвращает ложь. Посмотрите на следующий код.

пример 

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

Вы получите следующий вывод —

Выход

замена()

Этот метод используется для вставки входной строки в основную строку. Посмотрите на следующий код.

пример 

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

Вы получите следующий вывод —

Выход

Введите текст в три текстовых поля и нажмите кнопку замены строки, после чего вы увидите строку замены.

44
Share: