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
Попробуйте разные значения и преобразуйте их в реальные целые числа.
тип()
Этот метод проверяет значение переданной переменной и возвращает тип этого значения.
Давайте рассмотрим пример, в котором мы разрабатываем веб-страницу и проверяем, является ли входное значение Number, String или Boolean. Взгляните на следующий код.
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 () предназначен для преобразования красного, зеленого и синего значений в шестнадцатеричное значение. Эта функция работает с числами и принадлежит коллекции Array. Давайте рассмотрим пример, в котором мы создадим веб-страницу для ввода отдельных значений для красного, зеленого и синего. Предоставьте кнопку для преобразования всех трех в шестнадцатеричные значения. Взгляните на следующий код.
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
Попробуйте разные значения красного, зеленого и синего и найдите шестнадцатеричные значения.
Строковые функции
Давайте обсудим несколько методов класса 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
В приведенных выше окнах предупреждений вы можете найти различия в String перед вызовом метода trim () и после вызова метода trim ().
чистый ()
Этот метод используется для удаления всех пробелов из данной строки и сохранения одного пробела между словами. Взгляните на следующий код.
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
содержит()
Этот метод используется для поиска подстроки в заданной строке. Если данная строка содержит строку поиска, она возвращает истину, иначе она возвращает ложь. Взгляните на следующий код.
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
Введите текст в три текстовых поля и нажмите кнопку заменяющей строки, после чего вы увидите заменяющую строку.