register.html:127未捕获引用错误：在register.html:127(匿名)@register.html:127未定义用户名

我正在尝试创建一个注册/登录表单。在注册方面，我对ajax有一些问题：用户名、通行证、电子邮件未定义。有人能帮我吗？这里是整个代码！。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

<script src= "jquery/jquery.js"> </script>
<script>
        $('#switch_login').click(function(){
        location.href = "http://localhost/Manage/dujic/login_3.html?#";
    });

    $('#register').click(function()
    {$debug = false;

        username = $('#signUp_username').val();console.log( username );

        email = $('#signUp_email').val(); console.log( email );

        password = $('#signUp_pass').val();console.log( password );

        repeat_password = $('#pass_again').val();console.log( repeat_password);

        //1  
        if( !isUsername(username) ){

if($debug) displayMessageBox('#message', 'Bitte gültige Username eintragen!');

$('#signUp_username').focus();
$('#signUp_username').css('background-color:red');
return;
}

//2

if( !isEmail(email) ){

if($debug) displayMessageBox('#message', 'Bitte gültige E-Mail eintragen!');

$('#signUp_email').focus();
$('#signUp_email').css('background-color:red');
return;
}

//3

    if( !isPassword(password) ){

    if($debug) displayMessageBox('#message', 'Bitte gültiges Kennwort eintragen!');

              $('#signUp_pass').focus();
              $('#signUp_pass').css('background-color:red'); 
              return;
}

//4

    if( !isPassword_proof(password_proof) )
{

             if($debug) displayMessageBox('#message', 'Bitte gültiges Kennwort eintragen!');

               $('#pass_again').focus();
               $('#pass_again').css('background-color:red');
               return;
}
if(isUsername(username) && isEmail(email) && isPassword(password) && isPassword_proof(repeat_password) ){ 
    if($debug) displayMessageBox('#message', '');

    $('#signUp_username').css('background-color', 'white');
    $('#signUp_email').css('background-color', 'white');
    $('#signUp_pass').css('background-color', 'white');
    $('#pass_again').css('background-color', 'white');
    if( $('#message').is(":visible") ){
        $('#message').toggle();
    }
}

})
$.ajax({
    method: "POST",
    url: "p.php",

  data: {signUp_username:username, signUp_email:email, signUp_pass:password, pass_again:password_proof }

})

 .done(function( msg ) {

if($debug) displayMessageBox('#message', msg);
if(msg == true){

location.href='http://localhost/Manage/login_3.html?#';
}else{
    displayMessageBox('#message', 'Sign In failed');
}

});

function isUsername(username)
{
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(username);
}

function isEmail(email)
{
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(email);
}

function isPassword(password)
{
    if (password == "" || password.length < 4)
    {
        return false; 
    }
    else 
    {
        var regex = /[A-Za-z0-9_]/;
        return regex.test(password);
    }
}    

function isPassword_proof(password_proof)
{
    if (password == "" || password.length < 4)
    {
        return false; 
    }
    else 
    {
        var regex = /[A-Za-z0-9_]/;
        return regex.test(password);
    }
}    

function displayMessageBox(boxName, BoxContent)
{
    if ($(boxName).is (':hidden'))
    {
    $(boxName).toggle();
    }
    $(boxName).text(BoxContent);
}

</script>

    </script>

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

* {

    box-sizing: border-box;
    text-decoration: none;
}
body{
    background: #f3e0e2;
    display:flex ;
    justify-content: center;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    height: 100vh;
    margin: -20px 0 50px;

}
h1{font-weight: bold;
margin:0}

p{
    font-size: 14px;
    font-weight:100 ;
    line-height: 20;
    letter-spacing: 0.5;
    margin:20px 0 30px;
}

span{
    font-size: 12px;
}

a{color: #333;
font-size: 14;
text-decoration: none;
margin: 15px 0;
}
button{
    border-radius: 50px;
    border:1px solid #49F477;
background-color:black ;
    color: #FFFFFF;
    font-size: 12px 45px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform, 80ms ease-in;
}
form{
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction:column ;
    padding:0 50;
    height: 100%;
    text-align: center;

}
input{background-color: #eee;
      border:none;
      padding: 12px 15px;
      margin: 8px 0;
      width: 100%;
      text-align: right;

}
.container{background: #ff416c;
    background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
    background: linear-gradient(to right, #FF4B2B, #FF416C);
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    position: relative;
    overflow: hidden;
    width: 768px;
    max-width: 100%;
    min-height: 480px;

}
.form-container{position: absolute;
top: 0;
height: 100%;}

.register-container{
    left: 0;
    width: 50%;
    z-index: 2;
}
.overlay{
    background: #ff416c;
    background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
    background: linear-gradient(to right, #FF4B2B, #FF416C);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    color: #FFFFFF;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;

}
.overlay-panel{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;

}
.overlay-right{
    right: 0;
}

.cocial-container{
    margin: 50px 0;
}

.social-container a{
    border: 1px solid #DDDDDD;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin:0 5px;
    height: 40px;
    width: 40px;

}
button{
    text-decoration: none;

}
a{text-decoration: none;}

<meta charset="utf-8" />

<head>
    <link rel="stylesheet" href="register.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Login Form Using HTML And CSS Only</title>
</head>
<body>

    <div class="container" id="container">

        <div class="form-container register-container">

<form id="registerForm" action="#">
    <h1>Register <a href="#" id="switch_login">or Login </a></h1>
    <div id="message"></div>
    <div class="social-container">
        <a href="#" class="social"><i class="fa fa-facebook fa-2x"></i></a>
        <a href="#" class="social"><i class="fab fa fa-twitter fa-2x"></i></a>
    </div>
    <span>Register with your account</span>

    <input type ="username" placeholder="Username" id="signUp_username" />
    <input type ="email" placeholder="Email" id="signUp_email" />
    <input type="password" placeholder="Password" id="signUp_pass" /> 
    <input type="repeat_password" placeholder="Password_proof" id="pass_again" /> 

    <a href="#"></a>insert valid Password</a>
    <button id="register">sign In</button><br>

    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay right">
                <h1>HTML CSS Login form</h1>
                <p>Register and enjoy your time with us!</p>
            </div>
        </div>
    </div>
</form>

register.html:127未捕获引用错误：在register.html:127(匿名)@register.html:127未定义用户名

暂无答案！

相关问题

热门标签

最新问答