* 여기서는 "ASP.NET의 유효성 검사 컨트롤"인 [FrmRangeValidator.aspx] 와 "HTML레벨"의 [FrmRangeValidator.htm]의 예제로 각각 비교해보았다.

 

 

==> [FrmRangeValidator.aspx] 소스 및 디자인

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmRangeValidator.aspx.cs" Inherits="FrmRangeValidator" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

       

        범위<br />

        <br />

        나이 :

        <asp:TextBox ID="txtAge" runat="server"></asp:TextBox>

        (1~150)

        <asp:RangeValidator ID="valAge" runat="server"

            ControlToValidate="txtAge"

            MinimumValue="1"

            MaximumValue="150"

            Type="Integer"

            ErrorMessage="나이는 1~150까지 입력하시오."></asp:RangeValidator>

        <br />

        <br />

        <asp:Button ID="btnLogin" runat="server" Text="로그인" />

   

    </div>

    </form>

</body>

</html>

 

 


 


 


-------------------------------------------------------------------------------------

 


[실행결과]

--> "범위(1~150)"밖의 값을 텍스트박스에 입력하고 '로그인'버튼을 누르면 아래 그림과 같이 "RangeValidator"컨트롤에 빨간글씨로 텍스트가 출력된다.





--> "범위(1~150)"내의 값을 텍스트박스에 입력하고 '로그인'버튼을 누른 후 결과화면.
 

 


-------------------------------------------------------------------------------------

 


==> [FrmRangeValidator.htm] 소스 및 디자인

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script>

        function CheckLogin() {

            var varAge = parseInt(document.getElementById("txtAge").value); // 값을 받아서 정수형

            if (varAge < 1 || varAge > 150) {

                alert("나이는 1~150까지 입력하시오.");

                document.getElementById("txtAge").focus(); // 포커스

                return false; // 멈춤

            }

            else {

                alert("하하 맞았음");

                return true; // 진행

            }

        }

    </script>

</head>

<body>

 

<form id="frmLogin" action="" method="post" onsubmit=" return CheckLogin(); "> <!-- onsubmit=" return CheckLogin(); " return 'false'이면 멈추고, return 'true'이면 진행해라 라는 뜻이다. -->

나이 : <input type="text" id="txtAge" name="txtAge" />(1~150)<br />

<input type="submit" value="체크" />

</form>

 

</body>

</html>

 

 

 



 

 

-------------------------------------------------------------------------------------

 


[실행결과]

--> "범위(1~150)"밖의 값을 텍스트박스에 입력하고 '체크'버튼을 누르면 아래 그림과 같이 "메시지박스"가 출력된다.





--> "범위(1~150)"내의 값을 텍스트박스에 입력하고 '체크'버튼을 누른 후 결과화면.







 

 

 

 

Posted by holland14
: