<html>
<head>
<title> jQuery 폼체크 예제 </title>
<script src="jquery-1.7.2.js"></script>
<script type="text/javascript">
<!--
function form_check(fo) {
// 체크 패턴
var pattern = /^[a-z]+[a-z0-9_]*$/;
var num = /[0-9]/;
// 아이디 체크
var id = $.trim($('#id').val());//jQuery를 이용하여 앞뒤 공백 제거
if(id=="") {
alert("아이디를 입력하세요!");
$('#id').focus();
return false;
}
else {
if(!pattern.test(id)) {
alert("아이디는 영문소문자로 시작하고\r\n영문소문자, 숫자, 언더바(_)만 사용하실 수 있습니다! ");
$('#id').select();
return false;
}
}
// 비밀번호 체크
var pss = $.trim($('#pss').val());//jQuery를 이용하여 앞뒤 공백 제거
if(pss=="") {
alert("비밀번호를 입력하세요!");
$('#pss').focus();
return false;
}
else {
if(!num.test(pss)) {
alert("비밀번호는 숫자만 가능합니다!");
$('#pss').select();
return false;
}
}
alert("여기까지 왔다면 폼을 전송하자!");
fo.submit();
}
//-->
</script>
</head>
<body>
사용전 꼭 <script src="jquery-1.7.2.js"></script> 부분을 자신에게 맞게 고치세요.<br>
<form method="post" action="">
<input type="text" id="id" name="post_id">
<input type="text" id="pss" name="post_pss">
<input type="button" id="join_button" value="폼체크" onclick="form_check(this.form);">
</form>
</body>
</html>
Html_CSS_JScript
