0

javascript で検証を行う html サインアップ ページを作成しました。これが検証コードです。

SignUp.html

< script type="text/javascript" >

function validateForm() { 
var id = document.signup.LoginId;
var password = document.signup.LoginPassword;
var cpassword = document.signup.ConfirmPassword;
var city = document.signup.City;
var state = document.signup.State;
var number = document.signup.PhoneNumber;
var email = document.signup.Email;
var address = document.signup.Address;
var zipcode = document.signup.ZipCode;

if(id.value == "") {
    window.alert("Error: Username should be filled out.");
    id.focus();
    return false;
}
re = /^\w+$/;
if(!re.test(id.value)) {
    window.alert ("Error: Username must contain only letters, numbers and underscores.");
    id.focus();
    return false;
}

if(id.length < 6) {
    window.alert("Error: Username must contain at least 6 charecters.");
    id.focus();
    return false;
}
if(id.length > 12) {
    window.alert("Error: Username must not be greater than 12 charecters.");
    id.focus();
    return false;
}

if(password.value != "" && password.value == cpasswotd.value) {
    if(password.length < 6) {
        window.alert("Error: Password must contain at least 6 charecters.");
        password.focus();
        return false;
    }
    if(password.length > 12) {
        window.alert("Error: Password must not be greater than 12 charecters.");
        password.focus();
        return false;
    }
    if(password.value == id.value) {
        window.alert("Error: Password must be different from UserName.");
        password.focus();
        return false;
    }
    re = /[0-9]/;
    if(!re.test(password.value)) {
        window.alert("Error: Password must contain at least one number.");
        password.focus();
        return false;
    }
    re = /[a-z]/;
    if(!re.test(password.value)) {
        window.alert("Error: Password must contain at least one lowercase letter (a-z).");
        password.focus();
        return false;
    }
    re = /[A-Z]/;
    if(!re.test(password.value)) {
        window.alert("Error: Password must contain at least one uppercase letters (A-Z).");
        password.focus();
        return false;
    }
}else {
    window.alert("Error: Please check that you've entered and Confirmed your Password.");
    password.focus();
    return false;
}
window.alert("You have entered a valid password: "+password.value);
return true;



if(city.value == "") {
    window.alert("City must not be null.");
    city.focus();
    return false;
}

if(state.value == "") {
    window.alert("State must not be null.");
    state.focus();
    return false;
}

if(number.value == "") {
    window.alert("Phone number must not be null.");
    number.focus();
    return false;
}

if(number.length != 10) {
    window.alert("Phone number must be 10 digits.");
    number.focus();
    return false;
}

if (email.value == "")
{
    window.alert("Please enter a valid e-mail address.");
    email.focus();
    return false;
}

if (email.value.indexOf("@", 0) < 0)
{
    window.alert("Please enter a valid e-mail address.");
    email.focus();
    return false;
}

if (email.value.indexOf(".", 0) < 0)
{
    window.alert("Please enter a valid e-mail address.");
    email.focus();
    return false;
}

re = /^\w+$/
if(!re.test(address.value)) {
    window.alert("Error: Address must contain only letters, numbers and underscores.");
    address.focus();
    return false;
}

if(zipcode.value == "") {
    window.alert("Error: Zipcode must not be null.");
    zipcode.focus();
    return false;
}

if(zipcode.length > 6) {
    window.alert("Error: zipcode must not less than 6 digits.");
    zipcode.focus();
    return false;
}

} < /スクリプト>

「sapan@2」や「sapan」などの間違ったメール アドレスを入力しようとしても、エラー メッセージは表示されず、データベースに保存されます。

誰でもこれを修正するのを手伝ってもらえますか?

ありがとうございました。

4

2 に答える 2

0

簡単なテスト サインアップ フォームを作成し、jQuery を使用して検証ハンドラーをアタッチしました。必要に応じて、このテスト ハンドラーを変更できます。

次のコードを SignUp.html に挿入します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript" src="jquery.min.js"></script>
  </head>
  <body>
    <form id="myForm" name="myForm" action="" method="post">
      Username: <input type="text" id="username" value="" />
      <input type="submit" name="submit" />
    </form>

    <script type="text/javascript">

        $( "#myForm" ).submit(function( event ) {

          if ( $( "input#username" ).val() != "" ) {
            alert('Logging you in!');
            return;
          }

          alert( "Please enter the username!" );
          event.preventDefault();         
        });

    </script>
  </body>
</html>

これを機能させるには、jquery.min.js を html ファイルと同じフォルダーに配置する必要があります。

于 2013-09-21T02:24:51.920 に答える
0

間違っている可能性があることがいくつかあります。

まず、'type="submit"' の 'input' コントロールから 'validateForm' 関数を呼び出す場合は、'type="button"' に変更します。

次に、「validateForm」関数の最後に、次の行を追加します...

document.getElementById("yourformidhere").submit();

これにより、ボタンがクリックされたときにフォームが送信されなくなり、すべての要素値が検証に合格した後にのみフォームが送信されます。これは実際に達成したいことです。

于 2013-09-21T04:37:36.823 に答える