2012-03-03 129 views
0

我创建一个帐户的创建形式和使用JavaScript来验证它。我希望能得到一些帮助来解决和优化它。它返回不正确的警报并有其他一些问题。欢迎任何改进,我很欣赏我得到的任何建议。由于JavaScript表单验证的用户帐户

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Create an Accoount</title> 
<script type="text/javascript"> 
function validateform() { 
    //vars 
    var username = document.forms["usercreate"]["username"].value; 
    var email = document.forms["usercreate"]["email"].value; 
    var pass1 = document.forms["usercreate"]["pass1"].value; 
    var pass2 = document.forms["usercreate"]["pass2"].value; 

    //null check 
    if(username = "") { 
     alert ("You forgot the user name"); 
     return false; 
    } 
    if(email = "") { 
     alert ("You forgot the email address"); 
     return false; 
    } 
    if(pass1 = "") { 
     alert ("You forgot a password address"); 
     return false; 
    } 
    if(pass2 = "") { 
     alert ("You forgot a password address"); 
     return false; 
    } 

    if (username.length < 3 || username.length > 15) { 
     alert("User name is too short (under 3) or too big (over 15)"); 
     return false; 
    } 
    if (pass1 != pass2) { 
     alert ("Passwords don't match"); 
     return false; 
    } 
    if (pass1.length < 4) { 
     alert ("Your is password is too short (under 4)"); 
     return false; 
    } 
    //email check 
    var atpos=email.indexOf("@"); 
    var dotpos=email.lastIndexOf("."); 
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) { 
     alert("Not a valid e-mail address"); 
     return false; 
    } 
} 
</script> 
</head> 

<body> 
<h1>Account Creation</h1> 
<form name="usercreate" action="usercreate.php" method="post" onsubmit="return validateform();"> 
<p><label for="username">Pick a user name (must be at least three letters characters)<br /> 
<input type="text" name="username" value="username"/><br /> 
<label for="email">Enter your email address:<br /> 
<input type="text" name="email" value="email"/><br /> <!-- check this --> 
<label for="pass1">Create a password: <br /> 
<input type="password" name="pass1" /><br /> 
<label for="pass2">Retype the password:<br /> 
<input type="password" name="pass2" /><br /> 
<input type="submit" value="Create Account"/><br /> 
</form> 
</p></body> 
</html> 

回答

1

最大的问题是,你已经使用了赋值运算符=而不是比较操作===(或==)的:

if(username = "") { 

// should be 

if (username === "") { 

// (and similar for the other fields) 

你有它的方式,你实际上是改变username是一个空字符串,然后,如果试验评估其表达其作为空字符串是“falsy”,因此永远不会被示出的相应的警报的结果。

+0

感谢,这是这样一个简单的错误,但我从来没有想到这一点。永远不要少,非常感谢。 – cosmc 2012-03-03 06:42:10

0

尝试this

function validateform() { 
//vars 
var username = document.forms["usercreate"]["username"].value; 
var email = document.forms["usercreate"]["email"].value; 
var pass1 = document.forms["usercreate"]["pass1"].value; 
var pass2 = document.forms["usercreate"]["pass2"].value; 
var isFilled=true; 
var msg=""; 
//null check 
if(username == "") { 
    msg+="You forgot the user name\n"; 
    isFilled=false; 
} 
if(email == "") { 
    msg+="You forgot the email address\n"; 
    isFilled=false; 
} 
if(pass1 == "") { 
    msg+="You forgot a password address\n"; 
    isFilled=false; 
} 
//if(pass2 == "") { 
    //msg+="You forgot a password address\n"; 
    //isFilled=false; 
//} 

if (username.length < 3 || username.length > 15) { 
    msg+="User name is too short (under 3) or too big (over 15)\n"; 
    isFilled=false; 
} 
if (pass1 != pass2) { 
    msg+="Passwords don't match\n"; 
    isFilled=false; 
} 
if (pass1.length < 4) { 
    msg+="Your is password is too short (under 4)\n"; 
    isFilled=false; 
} 
//email check 
var atpos=email.indexOf("@"); 
var dotpos=email.lastIndexOf("."); 
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) { 
    msg+="Not a valid e-mail address\n"; 
    isFilled=false; 
} 
if(!isFilled) { 
    alert(msg); 
} 
return isFilled; 

}​ 
+0

谢谢,我会对我的脚本进行这些更改。 – cosmc 2012-03-03 06:46:43

+0

尼斯邮件合并成一个单一的警报 - 你可以通过删除'isFilled'变量,并在刚刚结束'回报味精使这个稍短===“”;'。 – nnnnnn 2012-03-03 09:26:22

+0

谢谢,我感谢您的建议。 :-)你不觉得返回真/假以确保它是否应根据“validateform”函数的返回值所需提交或者不作为,因为在形式,它的onclick =是很重要的“回归validateform()” ; – 2012-03-03 10:56:37