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
세 개의 텍스트 상자에 텍스트를 입력하고 대체 문자열 버튼을 클릭하면 대체 문자열을 볼 수 있습니다.