Login form validation using javascript and php
I have been trying to create a login form using JavaScript. My login form needs to do the following using JavaScript validation
- login field contains only letters with a minimum of 4 and a maximum of 6 letters
- password is at least 5 characters long and not more than 7 characters and contains only letters and digits with at least 1 letter and at least 1 digit
- if the data is incorrect, generate an alert window with an appropriate message and set the cursor to the incorrect input field and the form needs to be submitted to a php file which needs to validate against a text file
I tried to use regular expression to check for the login fields and password in the javascript and i have used a login .php but haven't done anything in that till now.However my JavaScript/HTML file which i have pasted below doesn't seem to work. Can anyone tell me the issue with my file?
<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";
}开发者_如何学Go
}
</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> </td>
<td><input name="Submit" value="Send" type="submit" ></td>
<td> </td>
</tr>
</form>
</table>
</body>
</html>
In your validatePassword function, you're logic is messed up. You have:
else if (!/[a-z]/.test(fld) || !/[A-Z]/.test(fld) || !/[0-9]/.test(fld)){
return "passwords rewuire one of the letters or digitys";
}
Which basically says that if there isn't a lowercase letter, an uppercase letter, and a number then it fails. Group the upper and lower case letter checks into one logical grouping like so:
else if ( ( !/[a-z]/.test(fld) && !/[A-Z]/.test(fld) ) || !/[0-9]/.test(fld)){
return "passwords rewuire one of the letters or digitys";
}
Now that says as long as there is a letter (uppercase or lowercase) AND a number, then we're good on validation. You can further compress that down to something like this:
if ( !/[a-zA-Z]/.test(fld) || !/[0-9]/.test(fld)){
return "passwords rewuire one of the letters or digitys";
}
Now if you want to achieve the functionality of highlighting the field that is failing validation, you'll need to restructure your code. One way of doing that would be to do something like this:
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;
}
Not the prettiest approach ever, but I think you get the point. Highlight the field as you wish, and notice that if there are problems with the username AND the password, then the password field is the one that gets the focus.
加载中,请稍侯......
精彩评论