샘플예제
/* /resources/js/jquery/jquery.validate.js 수정 */
messages: { required: "<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='필수 입력 사항입니다.'/></span>", remote: "<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='Please fix this field.' /></span>", userId: "<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='아이디는 첫글자는 영문자이고, 영문 또는 숫자 6자리 이상, 20자리 이하로 생성해주십시요.' /></span>", pass: "<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='비밀번호를 입력하세요.' /></span>", pass2: "<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='비밀번호를 다시 확인하세요.' /></span>", email: "<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='이메일 형식이 아닙니다.' /></span>", url: "<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='URL 형식이 아닙니다.' /></span>", date: "<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='Please enter a valid date.' /></span>", dateISO: "<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='날짜 형식이 아닙니다.' /></span>", number: "<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='숫자만 입력이 가능합니다.' /></span>", numberString : "<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='숫자와 소문자로만 입력해주세요' /></span>", digits: "Please enter only digits.", creditcard: "Please enter a valid credit card number.", regist_no: "<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='올바른 주민등록번호가 아닙니다.' /></span>", user_id: "<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='올바른 ID가 아닙니다.' /></span>", business_no: "<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='올바른 사업자등록번호가 아닙니다.' /></span>", equalTo: "<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='입력하신 값이 일치하지 않습니다.' /></span>", accept: "Please enter a value with a valid extension.", maxlength: "<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='{0}자 이하 입력해 주시기 바랍니다.'/></span>", minlength: "<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='{0}자 이상 입력해 주시기 바랍니다.'/></span>", rangelength: $.validator.format("<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='{0}자 이상 {1}자 이하로 입력해 주시기 바랍니다.'/></span>"), range: $.validator.format("<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='{0}이상 {1}이하로 입력해 주시기 바랍니다.'/></span>"), max: $.validator.format("<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='Please enter a value less than or equal to {0}.'/></span>"), min: $.validator.format("<span><img class='error_icon' src='/resources/images/common/exclamation.png' title='Please enter a value greater than or equal to {0}.'/></span>") },
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Alert</title>
<link type="text/css" rel="stylesheet" href="<c:url value='/resources/css/button.css'/>">
<link type="text/css" rel="stylesheet" href="<c:url value='/resources/css/jquery.alerts.css'/>">
<link type="text/css" rel="stylesheet" href="<c:url value='/resources/css/jquery-ui.css'/>">
<script type="text/javascript" src="<c:url value='/resources/js/jquery.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resources/js/jquery-ui.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resources/js/jquery-migrate-1.2.1.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resources/js/jquery.alerts.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resources/js/jquery.blockUI.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resources/js/jquery/jquery.validate.js'/>"></script>
<script type="text/javaScript" language="javascript">
$(document).ready(function() {
fncInputFormatter(); /*input box format 제어 */
//select, radio, combo
$("#sex").val('2');
$("input:radio[id='rdo']:input[value='B']").attr("checked", true);
$("input:checkbox[id='chk2']").attr("checked", true);
//저장 버튼 클릭
$( "#btn_save" ).click(function() {
//validate 검증
var valFlag = fncValidCheck("view_form");
if (!valFlag) {
return false;
}
Confirm("저장하시겠습니까?",
"저장",
'fncAdd');
});
});
/**
* Function Name : fncValidCheck
* Description : form validate 체크
*/
function fncValidCheck(p_form_id) {
// var error_string = "";
var returnVal = false;
returnVal = $('#'+p_form_id).validate().form();
return returnVal;
}
</script>
</head>
<body>
<form id="view_form" name="view_form">
<table cellpadding="0" cellspacing="0" class="ta_01">
<colgroup>
<col width="25%" />
<col />
</colgroup>
<tbody>
<tr>
<th>ID</th>
<td class="l"><input type="text" name="userID" id="userID" class="box required userId" maxlength="20" size="20"/></td>
</tr>
<tr>
<th>이름</th>
<td class="l"><input type="text" name="userNm" id="userNm" class="box required" maxlength="20" size="20"/></td>
</tr>
<tr>
<th>회사전화</th>
<td class="l"><input type="text" name="telNo" id="telNo" class="box required" fieldType="phone" maxlength="20" size="20" value="0211112222"/></td>
</tr>
<tr>
<th>휴대전화</th>
<td class="l"><input type="text" name="hp" id="hp" class="box required" fieldType="phone" maxlength="20" size="20" value="01011112222"/></td>
</tr>
<tr>
<th>E-mail</th>
<td class="l"><input type="text" name="email" id="email" class="box required email" fieldType="email" maxlength="20" size="20" value="totoro@paran.com"/></td>
</tr>
<tr>
<th>월급</th>
<td class="l"><input type="text" name="money" id="money" class="box required" fieldType="money" maxlength="20" size="20" value="111122000"/></td>
</tr>
<tr>
<th>주민번호</th>
<td class="l"><input type="text" name="registNo" id="registNo" class="box regist_no" fieldType="phone" maxlength="20" size="20" value="710101-11232222"/></td>
</tr>
<tr>
<th>사업자번호</th>
<td class="l"><input type="text" name="businessNo" id="businessNo" class="box business_no" fieldType="phone" maxlength="20" size="20" value="123456-1112222"/></td>
</tr>
<tr>
<th>생년월일(달력 FORMAT)</th>
<td class="l"><input type="text" name="birthday" id="birthday" class="box" fieldType="money" maxlength="20" size="20" value="700219"/></td>
</tr>
<tr>
<th>성별</th>
<td class="l">
<select id="sex" name="sex" class="required">
<option value="">선택</option>
<option value="1">남자</option>
<option value="2">여자</option>
</select>
</td>
</tr>
<tr>
<th>등급</th>
<td class="l">
<input type="radio" id="rdo" name="rdo" value="A" />A등급
<input type="radio" id="rdo" name="rdo" value="B" />B등급
<input type="radio" id="rdo" name="rdo" value="C" />C등급
</td>
</tr>
<tr>
<th>동의여부</th>
<td class="l">
<input type='checkbox' id='chk1' name='chk' value='Y' />동의
<input type='checkbox' id='chk2' name='chk2' value='N' />미동의
</td>
</tr>
<tr>
<th>등록자</th>
<td class="l"><input type="text" id="regDate" name="regDate" class="w_200" readonly value="윤혁신" /></td>
</tr>
<tr>
<th>세션</th>
<td class="l"><c:out value="${userId}" /></td>
</tr>
</tbody>
</table>
<p class="pagging"><span id="btn_save" class="btn_pack"><a href="#">확인</a></span></p>
</form>
</body>
</html>
댓글 없음:
댓글 쓰기