작업을 하다보면 FORM 은 입력형태가 있는 페이지에서 많이 사용이된다.
요즘은 AJAX 를 통해 처리하기때문에 FORM 데이터가 흐름도가 기본형태를 많이 벗어나지만
아직까지는 기본형태를 통해 많이 사용되기 때문에 반드시 숙지하고 가는게 좋다.
|
일반 FORM 연결 |
<form id="form" method="post">
<input type="hidden" name="value" value="redinfo">
<input type="text" name="id" value="" placeholder="아이디" required="required" autocomplete="new-password">
<input type="password" name="pw" value="" placeholder="비밀번호" required="required" autocomplete="new-password">
<input type="submit" value="submit">
</form>
|
JS 함수로 이벤트를 연결 |
<form id="formJavascript" method="post" onsubmit="return login();">
<input type="hidden" name="value" value="111">
<input type="text" name="id" value="" placeholder="아이디" required="required" autocomplete="new-password">
<input type="password" name="pw" value="" placeholder="비밀번호" required="required" autocomplete="new-password">
<input type="submit" value="submit">
</form>
<script>
function login(){
var $form = $('#formJavascript');
var id = $form.find('input[name="id"]').val();
if( id.length < 3){ alert("아이디는 3글자 이상 입력해 주세요."); return false; }
var pw = $form.find('input[name="pw"]').val();
if( pw.length < 6){ alert("비밀번호는 6글자 이상 입력해 주세요."); return false; }
return true;
}
</script
|
JQUERY 이벤트 핸들러 연결 |
<form id="formJquery" method="post">
<input type="hidden" name="value" value="111">
<input type="text" name="id" value="" placeholder="아이디" required="required" autocomplete="new-password">
<input type="password" name="pw" value="" placeholder="비밀번호" required="required" autocomplete="new-password">
<input type="submit" value="submit">
</form>
<script>
$('#formJquery').submit(function(e){
var $form = $(this);
var id = $form.find('input[name="id"]').val();
if( id.length < 3){ alert("아이디는 3글자 이상 입력해 주세요."); return false; }
var pw = $form.find('input[name="pw"]').val();
if( pw.length < 6){ alert("비밀번호는 6글자 이상 입력해 주세요."); return false; }
return true;
});
</script>
Comment