자바스크립트로 회원가입시 문자 체크

JavaScript 2016. 2. 15. 16:28

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<option value="">선택

<option value="a">군인

<option value="b">학생

<option value="c">주부

</select>

</td>

</tr>

<tr>

<td>

남<input type="radio" name="sex" value="m">

여<input type="radio" name="sex" value="f">

</td>

</tr>

</table>

<tr>

</tr>

</table>

</form>

</body>

</html>

위의 HTML을 기본으로 자바스크립트로 아래의 기능을 완성하기.

1. 아이디 입력 여부 체크 (8글자~16글자)

2. 암호 입력 여부 체크

3. 이름 입력 여부 체크

4. email 입력 여부 체크 ( @이 포함되어 있어야 하고 . 도 포함되어 있어야 한다.)

5. 전화번호는 입력 여부 체크 (숫자와 -로 만 입력 받는다)

내가 해본 것)

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

function popup() {

window.open('popup.html', 'popup', 'width=200, height=200');

}

function idCheck() {

var id = document.frm1.id.value;

if(id == '') {

alert('아이디를 입력하세요.');

return false;

}

if(id.length < 6 || id.length > 16) {

alert('아이디를 6~16 글자로 입력하세요');

return false;

}

function pwCheck() {

var pw = document.frm1.pw.value;

if(pw.trim() == '') {

alert('패스워드를 입력하세요');

return false;

}

else if(pw.length < 6 || pw.length > 16) {

alert('패스워드를 6글자 이상 16글자 이하로 입력하시오');

return false;

}

function nameCheck() {

var name = document.frm1.name.value;

if(name.trim() == '') {

alert('이름을 입력하세요');

return false;

}

else if(name.length < 4 || name.length > 16) {

alert('이름을 4글자 이상 16글자 이하로 입력하시오');

return false;

}

function emailCheck() {

var email = document.frm1.email.value;

if(email.trim() == '') {

alert('이메일을 입력하세요');

return false;

}

if (email.indexOf('@') != -1 && email.indexOf('.') != -1) {

return true;

}

else { alert('올바른 이메일을 입력하세요');

return false;

}

function telCheck(){

var tel = document.frm1.tel.value;

if(tel.trim() == '') {

alert('전화번호를 입력하세요');

return false;

}

if (tel.indexOf('-') != -1) {

return true;

}

else {

alert('숫자 사이에 \'-\'를 넣어주세요');

return false;

}

function jobCheck() {

var jobObj = document.frm1.job;

var jobIndex = jobObj.selectedIndex;

if(jobIndex == 0 ) {

alert('직업을 선택하세요');

return false;

}

return true;

}

function genderCheck() { // 어려운 로직이므로 주의!!

var genderArr = document.frm1.gender;

var gChk = false;

for(var i = 0 ; i < genderArr.length; i++){

if(genderArr[i].checked == true){

gChk = true;

break;

}

if(gChk == false){

alert('성별을 선택하세요');

}

return gChk;

}

function memReg() {

var idChk = idCheck();

if(idChk == false) return;

var pwChk = pwCheck();

if(pwChk == false) return;

var nameChk = nameCheck();

if(nameChk == false) return;

var emailChk = emailCheck();

if(emailChk == false) return;

var telChk = telCheck();

if(telChk == false) return;

var jobChk = jobCheck();

if(jobChk == false) return;

var genderChk = genderCheck();

if(genderChk == false) return;

var chk = confirm('이 정보로 가입하시겠습니까?');

if(chk == true) {

document.frm1.submit();

}

else {}

}

</script>

</head>

<body>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<option value="">선택

<option value="a">군인

<option value="b">학생

<option value="c">주부

</select>

</td>

</tr>

<tr>

<td>

남<input type="radio" name="gender" value="m">

여<input type="radio" name="gender" value="f">

</td>

</tr>

</table>

<tr>

</tr>

</table>

</form>

</body>

</html>

팝업 html)

function upCheck() {

var userIdObj = document.f1.userId;

opener.frm1.id.value = userIdObj.value;

useridObj.value = "";

self.close();

}

</script>

</head>

<body>

</form>

로그인 체크

</body>

강사님 강의)

// .value를 붇이면 문자열 변수가 되는데 name만 받으면 해당 name 자체를 다 가리킴.

function idCheck(){

var idObj = document.frm1.id;

if(idObj.value == ''){

alert('아이디를 입력하세요.');

return false;

}

var idStr = idObj.value; // value가 문자열이라 length 붙일 수 있게 된다

var idLen = idStr.length;

if(idLen >=8 && idLen <= 16){ // 맞으면 정상 길이

}else{

alert('아이디 8~16 글자로 입력하세요');

return false ;

}

return true;

}

function passCheck(){

var pwObj = document.frm1.pw;

if(pwObj.value == ''){

alert('암호를 입력하세요');

return false;

}

return true;

}

function emailCheck(){

var emailObj = document.frm1.email;

if(emailObj.value.indexOf('@') != -1 &&

emailObj.value.indexOf('.') != -1 ) {

return true;

}else {

alert('이메일 정확히 입력하세요.');

return false;

}

function telCheck(){

var telObj = document.frm1.tel;

var telStr = telObj.value;

var telchk = true; // 정상전화번호를 전제로 한 체크 변수를 만들어준다

for(var i = 0; i < telStr.length; i++){

var ch = telStr.charAt(i); // 글자 하나하나가 ch에 담기도록

if(isNaN(ch) == false || ch == '-' ){// 숫자이거나 대쉬이면 OK

}else{

telchk = false;// 한번이라도 정상번호가 아닐 때에는 빠져나오게

alert('전화번호는 숫자와 -로 입력하세요.');

break;// for문을 빠져나오기 위함. 나와서 return telchk를 하려고.

} // for문 안에서 return false를 하지 않고 체크변수를 써서 break를 한 이유는

} // for문을 break로 완전히 끝내지 않고 빠져나오는 것이 위험하기 때문.

return telchk;

}

function jobcheck() {

var jobObj = document.frm1.job;

var idx = jobOb.selectedIndex;

if(idx == 0 ) {

alert('직업을 선택하세요');

}

return false;

}

function sexcheck() {

//var sexArr = document.forms[0].elements['sex']; 이렇게도 사용 가능

//var sexArr = document.getElementByName('sex'); 이렇게도 사용 가능

var sexArr = document.frm1.sex;

alert(sexArr[0].checked); // 체크안된 것

alert(sexArr[1].checked); // 체크된 것

return false;

}

function memReg(){

var idchk = idCheck();

if(idchk == false) return;

var pwchk = passCheck();

if(pwchk == false) return;

var emailchk = emailCheck();

if(emailchk == false) return;

var telchk = telCheck();

if(telchk == false) return;

var jobcheck = jobcheck();

if(jobcheck == false) return;

var sexcheck = sexcheck();

if(sexcheck == false) return;

document.frm1.submit(); // submit 버튼을 누르지 않아도 스크립트를 마치고 submit 처리

}

</script>

저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

ECMA 스크립트의 JSON (0)	2016.05.24
ECMA 스크립트에서의 배열 (0)	2016.05.24
자바스크립트로 간단한 덧셈 뺄셈 연산 (0)	2016.02.15
자바 스크립트의 기본: 이벤트 처리 (0)	2016.02.15
자바 스크립트의 기본: Array, String, Date, Math, DOM, 브라우저 객체 (0)	2016.02.15