jQuery/ JSP) Sign up Form

2022. 8. 24. 16:10

Sign up Form

member_join.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sign up</title>
<link rel="stylesheet" type="text/css" href="./css/admin.css" />
<link rel="stylesheet" type="text/css" href="./css/member.css" />
<script src="./js/jquery.js"></script>
<script src="./js/member.js"></script>
</head>
<body>
 <div id="join_wrap">
  <h2 class="join_title">Sign up</h2>
  <form name="f" method="post" action="member_join_ok.nhn"
  onsubmit="return check()" enctype="multipart/form-data">

   <table id="join_t">
    <tr>
     <th>ID</th>
     <td>
      <input name="join_id" id="join_id" size="14" class="input_box" />
      <input type="button" value="Check your ID" class="input_button"
      onclick="id_check()" />
      <div id="idcheck"></div>
     </td>
    </tr>
    
    <tr>
     <th>Password</th>
     <td>
      <input type="password" name="join_pwd1" id="join_pwd1" size="14"
      class="input_box" />
     </td>
    </tr>
    
    <tr>
     <th>Password</th>
     <td>
      <input type="password" name="join_pwd2" id="join_pwd2" size="14"
      class="input_box" />
     </td>
    </tr>
    
    <tr>
     <th>Name</th>
     <td>
      <input name="join_name" id="join_name" size="14" class="input_box" />
     </td>
    </tr>
    
    <tr>
     <th>Post code</th>
     <td>
      <input name="join_zip1" id="join_zip1" size="3" class="input_box"
      readonly onclick="post_search()" />-<input name="join_zip2"
      id="join_zip2" size="3" class="input_box" readonly 
      onclick="post_search()"/>
      <input type="button" value="Search" class="input_button"
      onclick="post_check()" />
     </td>
    </tr>
    
    <tr>
     <th>Address1</th>
     <td>
      <input name="join_addr1" id="join_addr1" size="50" class="input_box"
      readonly onclick="post_search()" />
     </td>
    </tr>
    
    <tr>
     <th>Address2</th>
     <td>
      <input name="join_addr2" id="join_addr2" size="37" class="input_box" />
     </td>
    </tr>
    
    <tr>
     <th>Telephone</th>
     <td>
     <%@ include file="../../jsp/include/tel_number.jsp"%>
      <select name="join_tel1" >      
      <c:forEach var="t" items="${tel}" begin="0" end="16">
      <option value="${t}">${t}</option>
      </c:forEach>        
      </select>-<input name="join_tel2" id="join_tel2" size="4"
      maxlength="4" class="input_box" />-<input  name="join_tel3"
      id="join_tel3" size="4" maxlength="4" class="input_box" />
     </td>
    </tr>
    
    <tr>
     <th>Mobile</th>
     <td>
     <%@ include file="../../jsp/include/phone_number.jsp" %>
     <select name="join_phone1">
      <c:forEach var="p" items="${phone}" begin="0" end="5">
       <option value="${p}">${p}</option>
      </c:forEach>
     </select>-<input name="join_phone2" id="join_phone2" size="4"
     maxlength="4" class="input_box" />-<input name="join_phone3"
     id="join_phone3" size="4" maxlength="4" class="input_box" />
     </td>
    </tr>
    
    <tr>
     <th>Email</th>
     <td>
      <input name="join_mailid" id="join_mailid" size="10" 
      class="input_box" />@<input name="join_maildomain" 
      id="join_maildomain" size="20" class="input_box" readonly />

      <select name="mail_list" onchange="domain_list()">
      <option value="">=Select=</option>
      <option value="daum.net">daum.net</option>
      <option value="nate.com">nate.com</option>
      <option value="naver.com">naver.com</option>
      <option value="hotmail.com">hotmail.com</option>
      <option value="gmail.com">gmail.com</option>
      <option value="0">Other</option>
     </select> 
     </td>
    </tr>
    
    <tr>
     <th>Profile picture</th>
     <td>
      <input type="file" name="join_profile" />
     </td>
    </tr>
   </table>
   
   <div id="join_menu">
    <input type="submit" value="Join" class="input_button" />
    <input type="reset" value="Cancel" class="input_button" 
    onclick="$('#join_id').focus();" />
   </div>
  </form>
 </div>
</body>
</html>

DAO

// DAO(Data Access Object)
package dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Statement;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;

public class MemberDAOImpl {
	
	Connection con=null;
	PreparedStatement pstmt=null;
	Statement stmt=null;
	ResultSet rs=null;
	DataSource ds=null;
	String sql=null; 	
	
	public int checkMemberId(String id){
		int re=-1;		// Available ID
		
		String driver = "oracle.jdbc.driver.OracleDriver";
		String url = "jdbc:oracle:thin:@localhost:1521:xe";
			
		try{
//		
//			con=ds.getConnection();
			
			Class.forName(driver);//JDBC Driver Loading
			con = DriverManager.getConnection(url, "scott", "tiger");
			
			sql="select join_code from join_member where join_id=?";

			pstmt=con.prepareStatement(sql);
			pstmt.setString(1,id);
			rs=pstmt.executeQuery();
			if(rs.next()){
				re=1;	 	// Occupied ID	
			}
			
		}catch(Exception e){
			e.printStackTrace();
		}finally{
			try{
				if(rs != null) rs.close();
				if(pstmt != null) pstmt.close();
				if(con != null) con.close();
			}catch(Exception e){
				e.printStackTrace();
			}
		}
		return re;
	}

member.js

 function check(){
	 if($.trim($("#join_id").val())==""){
		 alert("Insert your ID");
		 $("#join_id").val("").focus();
		 return false;
	 }
	 if($.trim($("#join_pwd1").val())==""){
		 alert("Insert your password");
		 $("#join_pwd1").val("").focus();
		 return false;
	 }
	 if($.trim($("#join_pwd2").val())==""){
		 alert("Insert your password(again)");
		 $("#join_pwd2").val("").focus();
		 return false;
	 }
	 if($.trim($("#join_pwd1").val()) != $.trim($("#join_pwd2").val())){

		 alert("Please double-check your password");
		 $("#join_pwd1").val("");
		 $("#join_pwd2").val("");
		 $("#join_pwd1").focus();
		 return false;
	 }
	 if($.trim($("#join_name").val())==""){
		 alert("Insert your name");
		 $("#join_name").val("").focus();
		 return false;
	 }
	 if($.trim($("#join_zip1").val())==""){
		 alert("Insert your post code1");
		 $("#join_zip1").val("").focus();
		 return false;
	 }
	 if($.trim($("#join_zip2").val())==""){
		 alert("Insert your post code2");
		 $("#join_zip2").val("").focus();
		 return false;
	 }
	 if($.trim($("#join_addr1").val())==""){
		 alert("Insert your address1");
		 $("#join_addr1").val("").focus();
		 return false;
	 }
	 if($.trim($("#join_addr2").val())==""){
		 alert("Insert your address2");
		 $("#join_addr2").val("").focus();
		 return false;
	 }
	 if($.trim($("#join_tel2").val())==""){
		 alert("Insert your telephone number");
		 $("#join_tel2").val("").focus();
		 return false;
	 }
	 if($.trim($("#join_tel3").val())==""){
		 alert("Insert your mobile number1");
		 $("#join_tel3").val("").focus();
		 return false;
	 }
	 if($.trim($("#join_phone2").val())==""){
		 alert("Insert your mobile number2");
		 $("#join_phone2").val("").focus();
		 return false;
	 }
	 if($.trim($("#join_phone3").val())==""){
		 alert("Insert your mobile number3");
		 $("#join_phone3").val("").focus();
		 return false;
	 }
	 if($.trim($("#join_mailid").val())==""){
		 alert("Insert your email ID");
		 $("#join_mailid").val("").focus();
		 return false;
	 }
	 if($.trim($("#join_maildomain").val())==""){
		 alert("Insert the domain of your email");
		 $("#join_maildomain").val("").focus();
		 return false;
	 }	 	 
 }
 
function post_search(){
	alert("Click the search button");
}

function post_check(){
	window.open("zipcode_find.nhn","Search",
			"width=420,height=200,scrollbars=yes");

}


function id_check(){
	$("#idcheck").hide();
	var memid=$("#join_id").val();	
	
	if($.trim($("#join_id").val()).length < 4){
		var newtext='<font color="red">Your ID must be at least 4 characters.</font>';
		$("#idcheck").text('');
		$("#idcheck").show();
		$("#idcheck").append(newtext);
		$("#join_id").val("").focus();
		return false;
	};
	if($.trim($("#join_id").val()).length >12){
		var newtext='<font color="red">Your ID must be less than 12 characters </font>';
		$("#idcheck").text('');
		$("#idcheck").show();
		$("#idcheck").append(newtext);
		$("#join_id").val("").focus();
		return false;
	};

	if(!(validate_userid(memid))){
		var newtext='<font color="red">Your ID must include lower case English and numbers</font>';
		$("#idcheck").text('');
		$("#idcheck").show();
		$("#idcheck").append(newtext);
		$("#join_id").val("").focus();
		return false;
	};
	

    $.ajax({
        type:"POST",
        url:"member_idcheck.jsp",    
        data: {"memid":memid},  
        success: function (data) {  
          alert(data);
      	  if(data==1){ 		
      		var newtext='<font color="red">The ID already exists</font>';
      			$("#idcheck").text('');
        		$("#idcheck").show();
        		$("#idcheck").append(newtext);
          		$("#join_id").val('').focus();
          		return false;
	     
      	  }else{			
      		var newtext='<font color="blue">Available ID</font>';
      		$("#idcheck").text('');
      		$("#idcheck").show();
      		$("#idcheck").append(newtext);
      		$("#join_pwd1").focus();
      	  }  	    	  
        }
        ,
    	 error:function(e){
    		  alert("data error"+e);
    	  }
      });	//$.ajax() end	
};

function validate_userid(memid){
  var pattern= new RegExp(/^[a-z0-9_]+$/);

  return pattern.test(memid); 
};
 
function domain_list() {
	 var num=f.mail_list.selectedIndex;
	if ( num == -1 ) {

	return true;
	 }
	 if(f.mail_list.value=="0")
	 {

	 f.join_maildomain.value="";

	 f.join_maildomain.readOnly=false;

	f.join_maildomain.focus();

	}
	 
	 else {
	 
	f.join_maildomain.value=f.mail_list.options[num].value;
	
	f.join_maildomain.readOnly=true;
	 }
 }

Output

'Codes & Projects' 카테고리의 다른 글

HTML / Javascript / JSP ) Sign up Form2 (0)	2022.08.28
HTML / Javascript /JSP ) Bulletin Board (0)	2022.08.28
Javascript/ JSP/ HTML ) Log in form (0)	2022.08.27
Java) Finding Maximum value (0)	2022.08.25
Java) Math.random() (0)	2022.08.25

agilemeadow Devlog

jQuery/ JSP) Sign up Form

'Codes & Projects' 카테고리의 다른 글

+ Recent posts

티스토리툴바