ユーザーアカウント用のJavaScriptフォームの検証

私はアカウント作成フォームを作成し、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>

出典

2012-03-03 cosmc

は大きな問題は、あなたの代わりに比較演算子===（または==）の代入演算子=を使用していたということです：あなたはそれはあなたが実際にを変更していた

if(username = "") { 

// should be 

if (username === "") { 

// (and similar for the other fields)

方法usernameを空の文字列にし、ifテストで空文字列が "falsy"なので、対応するアラートが表示されないような式の結果を評価していました。

出典

2012-03-03 03:42:50 nnnnnn

感謝を試してみてください、それは、このような単純なミスだが、私はそれを考えてもみませんでした。決して少なく、ありがとうございます。 – cosmc

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

}

出典

2012-03-03 04:02:59

ありがとう、私は私のスクリプトにこれらの変更を行います。 – cosmc

メッセージを単一のアラートにまとめることができます。これは、 'isFilled'変数を削除し、最後に' return msg === ""; 'だけ短くすることができます。 – nnnnnn

ありがとうと私はあなたの助言に感謝します。 :-)あなたはそれがonclick = "return validateform（）"の形式であるため、true/falseを返すことが重要であるとは思わないでしょうか？ 'validateform'関数の戻り値に応じて、 ; –

ユーザーアカウント用のJavaScriptフォームの検証

答えて

関連する問題