2010-05-23 6 views
0

J'ai essayé de créer un formulaire de connexion en utilisant JavaScript. Mon formulaire de connexion doit effectuer les opérations suivantes en utilisant la validation JavaScriptValidation du formulaire de connexion en utilisant javascript et php

  1. champ de connexion ne contient que des lettres avec un minimum de 4 et un maximum de 6 lettres
  2. mot de passe est au moins 5 caractères et pas plus de 7 caractères et contient uniquement des lettres et chiffres avec au moins 1 lettre et au moins 1 chiffre
  3. si les données sont incorrectes, générer une fenêtre d'alerte avec un message approprié et placer le curseur sur le champ de saisie incorrect et le formulaire doit être soumis à un fichier php qui doit être validé par rapport à un fichier texte

J'ai essayé d'utiliser l'expression régulière pour vérifier les champs de connexion et le mot de passe dans le javascript et j'ai utilisé un login .php mais je n'ai rien fait dans ce moment.Mais mon fichier JavaScript/HTML que j'ai collé ci-dessous ne semble pas fonctionner. Quelqu'un peut-il me dire le problème avec mon dossier?

<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

J'ai fait un peu de nettoyage de votre question, mais ce site a des fonctions de formatage pratiques pour rendre les questions lisibles, et la plupart des navigateurs ont des vérificateurs d'orthographe (ou peuvent les avoir ajoutés avec des plugins). S'il vous plaît apprendre à les utiliser. – Quentin

Répondre

1

Dans votre fonction validatePassword, votre logique est foirée. Vous avez:

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

qui dit en substance que s'il n'y a pas une lettre minuscule, une lettre majuscule et un numéro alors il échoue. Regroupez les chèques supérieurs et lettres minuscules dans un regroupement logique comme ceci:

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

Maintenant que dit aussi longtemps que il y a une lettre (majuscule ou minuscule) et un certain nombre, nous sommes bien sur la validation. Vous pouvez compresser encore que jusqu'à quelque chose comme ceci:

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

Maintenant, si vous voulez obtenir la fonctionnalité de mettre en évidence le champ qui échoue la validation, vous aurez besoin de restructurer votre code. Une façon de le faire serait de faire quelque chose comme ceci:

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; 
} 

Pas la plus jolie approche jamais, mais je pense que vous obtenez le point. Mettez en surbrillance le champ comme vous le souhaitez, et notez que s'il y a des problèmes avec le nom d'utilisateur ET le mot de passe, alors le champ mot de passe est celui qui obtient le focus.

Questions connexes