MooTools - การกรองอินพุต

MooTools สามารถกรองอินพุตของผู้ใช้และสามารถจดจำประเภทของอินพุตได้อย่างง่ายดาย ประเภทอินพุตพื้นฐาน ได้แก่ Number และ String

ฟังก์ชันตัวเลข

ให้เราพูดถึงวิธีการสองสามอย่างที่จะตรวจสอบว่าค่าที่ป้อนเป็นตัวเลขหรือไม่ วิธีการเหล่านี้จะช่วยคุณจัดการกับการป้อนตัวเลข

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

ลองใช้ค่าต่างๆและตรวจสอบประเภท

ขีด จำกัด ()

วิธีการขีด จำกัด () ใช้เพื่อกำหนดค่าขอบเขตล่างและขอบเขตบนสำหรับจำนวนเฉพาะ จำนวนไม่ควรเกินค่าขอบเขตบน หากเกินจำนวนจะเปลี่ยนเป็นค่าขอบเขตบน กระบวนการนี้เหมือนกันกับขอบเขตล่างด้วย

ให้เราใช้ตัวอย่างที่มีกล่องข้อความสำหรับป้อนค่าให้ปุ่มเพื่อตรวจสอบขีด จำกัด ของค่านั้น ขีด จำกัด เริ่มต้นที่เราใช้ในตัวอย่างคือ 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 ซึ่งสามารถจัดการกับค่าสตริงอินพุตได้ ก่อนที่เราจะดำเนินการต่อให้เรามาดูไวยากรณ์ต่อไปนี้ของวิธีการเรียกใช้ฟังก์ชันสตริง

สตริง

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

ป้อนข้อความในช่องข้อความสามช่องและคลิกที่ปุ่มสตริงแทนจากนั้นคุณจะเห็นสตริงการแทนที่