2010-05-23 3 views
0

JavaScript를 사용하여 로그인 폼을 만들려고했습니다. 내 로그인 폼은 다음과 같은 사용하여 자바 스크립트 검증을javascript 및 php를 사용하여 로그인 폼 유효성 검사

  1. 로그인 필드를 할 필요가 4의 최소
  2. 비밀번호는 6 개 문자의 최대 문자 만 포함 길이 없습니다 적어도 5 자 7 자 이상 및 데이터가 올바르지 않으면 문자 1 자 이상 1 자리 이상인
  3. 만 포함하고 적절한 메시지가있는 경고 창을 생성하고 커서를 잘못된 입력 필드에 설정하고 양식을 제출해야합니다 텍스트 파일에 대해 유효성을 검사해야하는 PHP 파일

자바 스크립트에서 로그인 필드와 비밀번호를 확인하기 위해 정규 표현식을 사용하려고 시도했지만 로그인 .php를 사용했지만 지금까지는 아무 것도하지 않았습니다. 내 JavaScript/HTML 파일은 아래에 붙여 넣었습니다. 작동하지 않는 것 같습니다. 누구든지 내 파일에 문제가 있다고 말할 수 있습니까?

<html> 
<head> 
<script> 
function validateFormOnSubmit(theForm) { 

    reason += validateUsername(theForm.username.value) 
    reason += validatePassword (theForm.pwd.value) 
    if (reason == "") return true 
else { alert(reason); return false } 

} 

function validateUsername(fld) { 
    if (fld == "") 
     return "No username entered" 

    else if((fld.length > 6) || (fld.length < 4)) 
     return "value must be between 4 and 6 characters" 

    else if (/[^a-zA-z]/.test(fld)) 
     return "only letters allowed" 

} 
function validatePassword (fld){ 
if (fld == ""){ 
    return "No password entered"; 
} 
else if (fld.length<5 ||fld.length>7) { 
return "length shoild be b/w 4 and 7"; 
} 
else if (!/[a-z]/.test(fld) || !/[A-Z]/.test(fld) || !/[0-9]/.test(fld)){ 
    return "passwords rewuire one of the letters or digitys"; 
} 
} 
</script> 
</head> 
<body> 
<table class ="signup" border ="o" cellpadding ="2" 
cellspacing ="5" bgcolor ="eeeeee"> 
<th colspan="2" align="center">SignupForm</th> 
<form method = "post" action ="login.php" onSubmit="return validateFormOnSubmit(this)"> 
<tr> 
<td>Your user name:</td> 
<td><input name = "username" size="35" maxlength="50" type="text"></td> 
</tr> 
<tr> 
<td>Your Password:</td> 
<td><input name="pwd" size="35" maxlength="25" type="password"></td> 
</tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td><input name="Submit" value="Send" type="submit" ></td> 
    <td>&nbsp;</td> 
    </tr> 
</form> 
</table> 
</body> 
</html> 
+1

질문을 정리해 봤지만이 사이트에는 질문을 읽을 수있게 해주는 편리한 서식 기능이 있으며 대부분의 브라우저에는 맞춤법 검사기가 있습니다 (또는 플러그인을 추가 할 수 있습니다). 이들을 사용하는 방법을 배우십시오. – Quentin

답변

1

validatePassword 함수에서 논리가 엉망입니다. 당신은 :

else if (!/[a-z]/.test(fld) || !/[A-Z]/.test(fld) || !/[0-9]/.test(fld)){ 
    return "passwords rewuire one of the letters or digitys"; 
} 

기본적으로 소문자, 대문자 및 숫자가 없으면 실패합니다. 그래서 같은 하나 개의 논리적 그룹에 대소 문자를 확인 그룹 :

else if ((!/[a-z]/.test(fld) && !/[A-Z]/.test(fld)) || !/[0-9]/.test(fld)){ 
    return "passwords rewuire one of the letters or digitys"; 
} 

지금 그만큼 (대문자 또는 소문자) 문자와 숫자가 같이 말한다는, 우리는 검증에 좋은입니다. 당신은 더 이런 식으로 저를 아래로 압축 할 수 있습니다 :

if (!/[a-zA-Z]/.test(fld) || !/[0-9]/.test(fld)){ 
    return "passwords rewuire one of the letters or digitys"; 
} 

을 이제 유효성 검사를 실패 필드 강조의 기능을 달성하려는 경우, 당신은 당신의 코드를 재구성해야합니다. 그 일을하는 한 가지 방법은 다음과 같이하는 것입니다.

function validateFormOnSubmit(theForm) { 
    var alertMsg = false, 
     errMsg = validateUsername(theForm.username.value); 
    if (errMsg !== true) { 
     // highlight theForm.username by changing style or class 
     // set focus to this field 
     theForm.username.focus(); 
     alertMsg = errMsg; 
    } 
    errMsg = validatePassword(theForm.pwd.value); 
    if (errMsg !== true) { 
     // highlight theForm.username by changing style or class 
     // set focus to this field 
     theForm.username.focus(); 
     alertMsg += errMsg; 
    } 
    if (alertMsg !== false) return true 
    else { 
     alert(alertMsg); 
     return false; 
    } 
} 

function validateUsername(fld) { 
    if (fld == "") return "No username entered" 
    else if ((fld.length > 6) || (fld.length < 4)) return "value must be between 4 and 6 characters" 
    else if (/[^a-zA-z]/.test(fld)) return "only letters allowed" 
    return true; 
} 

function validatePassword(fld) { 
    if (fld == "") { 
     return "No password entered"; 
    } else if (fld.length < 5 || fld.length > 7) { 
     return "length shoild be b/w 4 and 7"; 
    } else if (!/[a-zA-z]/.test(fld) || !/[0-9]/.test(fld)) { 
     return "passwords rewuire one of the letters or digitys"; 
    } 
    return true; 
} 

가장 좋은 방법은 아니지만, 요점을 얻은 것 같습니다. 원하는대로 필드를 강조 표시하고 사용자 이름과 암호에 문제가 있으면 암호 필드가 포커스를 얻는 필드인지 확인하십시오.