<div class="wrapper fadeInDown">
<div id="formContent">
<!-- Tabs Titles -->
<h2 class="inactive underlineHover"><a href="login.php"> 로그인 </h2></a>
<a href="join.php"><h2 class="active">회원가입 </h2></a>
<!-- Icon -->
<!-- Login Form -->
<!--submit버튼을 누르면 onsubmit이 실행되어
check함수가 실행되고
check함수의 return 값이 true일 경우에만 폼을 전송합니다.
onsubmit 이벤트 속성에 들어가는 함수는 반드시
전송해야 할 경우 true를 반환하고
하지말아야 할 경우 false를 반환하는 형식이어야 합니다. -->
<form name="myform" method="POST" action="joinact.php" onsubmit="return check()">
<input type="text" class="fadeIn first" name="id" placeholder="아이디">
<input type="password" class="fodeIn second" name="pass" maxlength="15" placeholder="비밀번호">
<input type="password" class="fodeIn second" name="passcheck" maxlength="15" placeholder="비밀번호확인">
<input type="text" class="fadeIn third" name="name" placeholder="이름" >
<input type="text" class="fadeIn fourth " name="email" placeholder="메일" >
<input type="submit" id="submit" class="fadeIn fourth" value="회원가입">
</form>
<!-- Remind Passowrd -->
<div id="formFooter">
<a class="underlineHover" href="#">Forgot Password?</a>
</div>
</div>
</div>
formname을 설정 해주고 onsubmit를 추가 해준다 submit로 값을 넘겨주기 때문에 보내기전에 검사를 진행 하고 값을 넘겨준다 maxlength는 설정해주면 최대 입력갑 지정 가능
<script>
//체크 함수 생성
function check() {
//myfrom 이름 설정
var f = document.myform;
//id가 공백이면
if (f.id.value == "") {
alert("아이디를 입력해주십시오");
f.id.focus();
console.log(f);
return false;
}
//아이디 유효성 체크 idlength변수 생성 해주고 if로 범위가 맞지 않으면 return
var idlength = /^[a-zA-z0-9]{6,12}$/;
if(!idlength.test(f.id.value)){
alert("아이디는 영문대/소문자 숫자6~12입력해주세요");
f.id.focus();
return false;
}
if (f.pass.value == "") {
alert("비밀번호를 입력해주세요");
f.pass.focus();
return false;
}
if (f.passcheck.value == "" ) {
alert("비밀번호를 입력해주세요");
f.pass.focus();
return false;
}
//틀리면 클리어 시킨다 해야겠찌?
if(f.pass.value !=f.passcheck.value){
alert("비빌번호 확인");
f.passcheck.focus();
f.passcheck.value= "";
return false;
}
if (f.name.value == "") {
alert("이름을 입력해주세요");
f.name.focus();
return false;
}
if (f.email.value == "") {
alert("메일을 확인해주세요");
f.email.focus();
return false;
}
}
</script>
check() 함술를 생성 해주고
formname 설정 해준걸 변수에 저장 해준다
if (f.id.value == "") f는 폼이름 저장 변수.id는 input name.value 값 이곳이 공백이라면
alert창을 띄어주고 focus로 그 곳으로 이동하게 해준다
return false(단어 뜻 그대로 어떤 값을 반환하는 경우에 사용 true,false외에 특정한 값을 return로 설정할 수 있다 값을 정해주지 않으면 null값을 반환 한다) false를 붙히면 기존에 기능이 없어지게 된다 return을 안써주면 if절에 걸리고 if안에 return이 없으면 그냥 알림창 띄우고 포커스 이동후에 submit를 발생한다 그렇게 되면 if를 써준 의미가 없고 그냥 페이지가 넘어가게 된다
[PHP] 로그인 select email (0) | 2021.10.29 |
---|---|
[PHP] 간단한 회원가입 중복처리 비밀번호 암호화 (0) | 2021.10.21 |
[PHP] mysqli_real_escape_string (0) | 2021.10.18 |
[PHP] Fatal error: Call to undefined function mysqli_connect() (0) | 2021.10.14 |
[PHP] php css (0) | 2021.10.05 |
댓글 영역