jQuery PlugIn - Validate (유효성 검사)
.NET프로그래밍/jQuery 1.3.2 2009. 11. 23. 19:23 |
[Validate.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 src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script src="jquery.validate-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//$('#myForm').validate(); // 유효성 검사
$('#myForm').validate({
rules: {
txtID: { required: true, minlength: 3, remote:"Validate.aspx" },
txtPassword: { required: true },
txtName: { required: true },
txtEmail: { email: true },
txtPasswordConfirm: { equalTo: "#txtPassword" },
txtAge: { range: [1, 150] }
},
messages: {
txtID: {
required: "아이디를 입력하시오.",
minlength: jQuery.format("아이디는 {0}자 이상"),
remote : jQuery.format("{0}는 이미 있는 아이디")
},
txtPassword: { required: "암호를 입력하시오." },
txtName: { required: "이름을 입력하시오." },
txtEmail: { email: "올바른 이메일을 입력하시오." },
txtPasswordConfirm: { equalTo: "암호를 다시 확인하세요." },
txtAge: { range: "나이는 1~150" }
},
// 아래 코드는 버그
//submitHandler: function () {
// $('#myForm').submit(); // 통과시 전송
//},
submitHandler: function (frm) {
frm.submit(); // 통과시 전송
},
success: function (e) {
//
}
});
});
</script>
</head>
<body>
<form id="myForm" method="post" action="Validate.aspx">
아이디 : <input type="text" id="txtID" name="txtID" class="required" /><br />
암호 : <input type="text" id="txtPassword" name="txtPassword" class="required" /><br />
암호확인 : <input type="text" id="txtPasswordConfirm" name="txtPasswordConfirm" class="required" /><br />
이름 : <input type="text" id="txtName" name="txtName" class="required" minlength="2" /><br />
이메일 : <input type="text" id="txtEmail" name="txtEmail" class="required email" /><br />
나이 : <input type="text" id="txtAge" name="txtAge" /><br />
<input type="submit" value="전송" />
</form>
</body>
</html>
-------------------------------------------------------------------------------------
[Validate.aspx]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Validate.aspx.cs" Inherits="Module_Validate_Validate" %>
<!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>
</div>
</form>
</body>
</html>
-------------------------------------------------------------------------------------
[Validate.aspx.cs]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Module_Validate_Validate : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request["txtID"] == "RedPlus")
{
Response.Write("false"); // 이미 있는 아이디
}
else
{
Response.Write("true"); // validation 통과
}
Response.End();
}
}
-------------------------------------------------------------------------------------
[실행결과]
--> 첫 화면.
--> '전송'버튼을 눌렀을 때
--> 바로위의 그림에서 텍스트박스에 '유효성 검사'에맞게 데이터를 입력한 후 '전송'버튼을 눌렀을 때의 화면.
'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글
| jQuery Ajax + ASP.NET + JSON : String (단일값 반환) (0) | 2009.11.27 |
|---|---|
| jQuery 수업 자료 PPT 파일 (0) | 2009.11.27 |
| jQuery를 사용한 한줄메모장 (0) | 2009.11.19 |
| 파일업로드 : jQuery + Uploadify + ASP.NET (1) | 2009.11.19 |
| AutoComplete - 텍스트박스 자동 완성 기능 (0) | 2009.11.19 |