2013-09-21 6 views
0

자바 스크립트에서 유효성 검사가 포함 된 html SignUp 페이지를 만들었습니다. 다음은 유효성 검사 코드입니다.가입 과정에서 유효성 확인 양식이 작동하지 않습니다.

SignUp.html

< 스크립트 유형 = "텍스트/자바 스크립트">

function validateForm() { 
var id = document.signup.LoginId; 
var password = document.signup.LoginPassword; 
var cpassword = document.signup.ConfirmPassword; 
var city = document.signup.City; 
var state = document.signup.State; 
var number = document.signup.PhoneNumber; 
var email = document.signup.Email; 
var address = document.signup.Address; 
var zipcode = document.signup.ZipCode; 

if(id.value == "") { 
    window.alert("Error: Username should be filled out."); 
    id.focus(); 
    return false; 
} 
re = /^\w+$/; 
if(!re.test(id.value)) { 
    window.alert ("Error: Username must contain only letters, numbers and underscores."); 
    id.focus(); 
    return false; 
} 

if(id.length < 6) { 
    window.alert("Error: Username must contain at least 6 charecters."); 
    id.focus(); 
    return false; 
} 
if(id.length > 12) { 
    window.alert("Error: Username must not be greater than 12 charecters."); 
    id.focus(); 
    return false; 
} 

if(password.value != "" && password.value == cpasswotd.value) { 
    if(password.length < 6) { 
     window.alert("Error: Password must contain at least 6 charecters."); 
     password.focus(); 
     return false; 
    } 
    if(password.length > 12) { 
     window.alert("Error: Password must not be greater than 12 charecters."); 
     password.focus(); 
     return false; 
    } 
    if(password.value == id.value) { 
     window.alert("Error: Password must be different from UserName."); 
     password.focus(); 
     return false; 
    } 
    re = /[0-9]/; 
    if(!re.test(password.value)) { 
     window.alert("Error: Password must contain at least one number."); 
     password.focus(); 
     return false; 
    } 
    re = /[a-z]/; 
    if(!re.test(password.value)) { 
     window.alert("Error: Password must contain at least one lowercase letter (a-z)."); 
     password.focus(); 
     return false; 
    } 
    re = /[A-Z]/; 
    if(!re.test(password.value)) { 
     window.alert("Error: Password must contain at least one uppercase letters (A-Z)."); 
     password.focus(); 
     return false; 
    } 
}else { 
    window.alert("Error: Please check that you've entered and Confirmed your Password."); 
    password.focus(); 
    return false; 
} 
window.alert("You have entered a valid password: "+password.value); 
return true; 



if(city.value == "") { 
    window.alert("City must not be null."); 
    city.focus(); 
    return false; 
} 

if(state.value == "") { 
    window.alert("State must not be null."); 
    state.focus(); 
    return false; 
} 

if(number.value == "") { 
    window.alert("Phone number must not be null."); 
    number.focus(); 
    return false; 
} 

if(number.length != 10) { 
    window.alert("Phone number must be 10 digits."); 
    number.focus(); 
    return false; 
} 

if (email.value == "") 
{ 
    window.alert("Please enter a valid e-mail address."); 
    email.focus(); 
    return false; 
} 

if (email.value.indexOf("@", 0) < 0) 
{ 
    window.alert("Please enter a valid e-mail address."); 
    email.focus(); 
    return false; 
} 

if (email.value.indexOf(".", 0) < 0) 
{ 
    window.alert("Please enter a valid e-mail address."); 
    email.focus(); 
    return false; 
} 

re = /^\w+$/ 
if(!re.test(address.value)) { 
    window.alert("Error: Address must contain only letters, numbers and underscores."); 
    address.focus(); 
    return false; 
} 

if(zipcode.value == "") { 
    window.alert("Error: Zipcode must not be null."); 
    zipcode.focus(); 
    return false; 
} 

if(zipcode.length > 6) { 
    window.alert("Error: zipcode must not less than 6 digits."); 
    zipcode.focus(); 
    return false; 
} 

} < /스크립트>

내가 잘못된 이메일 주소를 입력하려고 "sapan @ 2"또는 "sapan"와 같은 오류 메시지가 나타나지 않으면 데이터베이스에 저장됩니다.

아무도 나를 고칠 수 있습니다.

감사합니다.

+0

전체 함수 선언을 게시 할 수 있습니까? 그건 내가 너를 돕는 데 도움이 될거야. :) –

+0

죄송합니다, 질문을 완전히 게시 할 수 없습니다. html 코드를 삽입 할 수 없습니다. :-(html 코드를 게시하는 방법을 알려주시겠습니까. 그게 도움이 될 것입니다. 감사합니다 . – sapan

+0

자바 스크립트 코드는 정상적으로 작동합니다. 전체 기능을 게시 할 수 없으면 도움을 드릴 수 없습니다. :) –

답변

0

간단한 테스트 가입 양식을 만들고 jQuery를 사용하여 유효성 확인 처리기를 연결했습니다. 필요에 따라이 테스트 핸들러를 수정할 수 있습니다.

는 SignUp.html에 다음 코드를 넣어이 들어

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <script type="text/javascript" src="jquery.min.js"></script> 
    </head> 
    <body> 
    <form id="myForm" name="myForm" action="" method="post"> 
     Username: <input type="text" id="username" value="" /> 
     <input type="submit" name="submit" /> 
    </form> 

    <script type="text/javascript"> 

     $("#myForm").submit(function(event) { 

      if ($("input#username").val() != "") { 
      alert('Logging you in!'); 
      return; 
      } 

      alert("Please enter the username!"); 
      event.preventDefault();   
     }); 

    </script> 
    </body> 
</html> 

이 작동하려면, 당신은 HTML 파일과 같은 폴더에 jquery.min.js을 배치해야합니다.

0

몇 가지 잘못된 점이있을 수 있습니다.

먼저 'type = "submit"의'input '컨트롤에서'validateForm '함수를 호출하는 경우'type = "button" '으로 변경하십시오.

둘째, 당신의 'validateForm'기능의 끝에서,

document.getElementById("yourformidhere").submit(); 

이 버튼을 클릭하면 제출에서 양식을 중지, 만 양식을 제출 ... 다음 행을 추가 모든 요소 값이 유효성 검사를 통과 한 후에 실제로 달성하고자하는 것입니다.

+0

죄송합니다. 문제가 해결되지 않았습니다. – sapan

+0

자세히 설명해주십시오. 다른 오류가 발생하지 않는 한이 작업이 작동합니다. –

+0

코드를 수정 한 후에도 username을 입력하지 않은 경우 "username이 비어 있어서는 안됩니다."라는 오류가 표시되지 않습니다. 아무 일도하지. 그것은 전혀 오류를 보여주지 않았다. – sapan

관련 문제