我正在尝试使用vuejs使用ajax提交表单，效果很好，但是当我在字段输入字段上单击Enter时，表单提交的方式就像是提交给自己一样。我正在使用角色=表单和按钮类型=按钮的表单，并且按钮甚至不在表单本身之外，但是我有这个问题。它还将值放置在get字符串中，例如codernoob.com?userName=testUser1。 表单并不是那么复杂，唯一让我疯狂的是隐藏并显示两种表单，具体取决于它们单击的内容。
注意：仅在“重置密码”表单上这样做
<?php session_start();
ob_start();
if (isset($_SESSION['activated'])) {
$activated = $_SESSION['activated'];
}
?>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<!--vuejs-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700,800" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="custom.js"></script>
<link rel="stylesheet" href="custom.css">
</head>
<body>
<div id="logInApp" v-cloak>
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<?php if(basename($_SERVER['PHP_SELF']) != 'templates.php') {
echo ' <a class="navbar-brand" href="index.php"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 171 171" style="enable-background:new 0 0 171 171;" xml:space="preserve">
<path class="st0" d="M153.4,91l-30.2,8c-4.2,11.5-13.5,20.6-26.1,24.1c-20.7,5.7-42.2-6.5-48-27.2c-5.7-20.7,6.5-42.2,27.2-48
c15.9-4.4,32.5,0.9,41.9,15.1l-19.5,5.3c-3.4-2.4-7.6-3.8-12-3.8c-11.6,0-20.9,9.4-20.9,20.9s9.4,20.9,20.9,20.9
c8.5,0,15.8-5.1,19.1-12.3L153.5,81l0.7,0l11.4-6.7L163,62.6l-13.1-1.3l-4.3-9.1l7.3-11l-7.4-9.4l-12.4,4.5l-7.9-6.4l1.8-13.1
l-10.7-5.2l-9.2,9.5l-9.8-2.3l-4-12.6L81.3,6.1l-4.2,12.5l-9.9,2.2l-9.1-9.6l-10.8,5.1L49,29.4l-7.9,6.2L28.7,31l-5.2,6.4l-2.3,2.9
v0l7.2,11.1l-0.9,1.8l-3.6,7.3l-13.2,1.1L8,73.1L19.3,80l-0.1,10.1L7.9,96.9l2.6,11.6l13.1,1.3l4.3,9.1l-7.3,11v0l3.7,4.7l3.7,4.7
l12.4-4.5l0.2,0.1l0,0l5.8,4.7l1.9,1.5l-1.8,13.1l10.7,5.2l9.2-9.5l9.8,2.3l4,12.6l11.9,0.1l4.2-12.5l9.9-2.2l9.1,9.6l10.8-5.1
l-1.6-13.1l7.9-6.2l12.4,4.7l7.5-9.3l-7.2-11.1l4.4-9.1l13.2-1.1l2.7-11.6L154.1,91L153.4,91z"/>
<text transform="matrix(1 0 0 1 145.3561 17.4842)">TM</text>
</svg><span class="logo-text">CreativeEngine</span></a>';
} else {echo '<a class="navbar-brand" href="index.php"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 171 171" style="enable-background:new 0 0 171 171;" xml:space="preserve">
<path class="st0" d="M153.4,91l-30.2,8c-4.2,11.5-13.5,20.6-26.1,24.1c-20.7,5.7-42.2-6.5-48-27.2c-5.7-20.7,6.5-42.2,27.2-48
c15.9-4.4,32.5,0.9,41.9,15.1l-19.5,5.3c-3.4-2.4-7.6-3.8-12-3.8c-11.6,0-20.9,9.4-20.9,20.9s9.4,20.9,20.9,20.9
c8.5,0,15.8-5.1,19.1-12.3L153.5,81l0.7,0l11.4-6.7L163,62.6l-13.1-1.3l-4.3-9.1l7.3-11l-7.4-9.4l-12.4,4.5l-7.9-6.4l1.8-13.1
l-10.7-5.2l-9.2,9.5l-9.8-2.3l-4-12.6L81.3,6.1l-4.2,12.5l-9.9,2.2l-9.1-9.6l-10.8,5.1L49,29.4l-7.9,6.2L28.7,31l-5.2,6.4l-2.3,2.9
v0l7.2,11.1l-0.9,1.8l-3.6,7.3l-13.2,1.1L8,73.1L19.3,80l-0.1,10.1L7.9,96.9l2.6,11.6l13.1,1.3l4.3,9.1l-7.3,11v0l3.7,4.7l3.7,4.7
l12.4-4.5l0.2,0.1l0,0l5.8,4.7l1.9,1.5l-1.8,13.1l10.7,5.2l9.2-9.5l9.8,2.3l4,12.6l11.9,0.1l4.2-12.5l9.9-2.2l9.1,9.6l10.8-5.1
l-1.6-13.1l7.9-6.2l12.4,4.7l7.5-9.3l-7.2-11.1l4.4-9.1l13.2-1.1l2.7-11.6L154.1,91L153.4,91z"/>
<text transform="matrix(1 0 0 1 145.3561 17.4842)">TM</text>
</svg><span class="logo-text">CreativeEngine</span></a><ul class="hidden-lg hidden-md hidden-sm visible-xs"><li class="fa fa-search" data-target="#searchTemplatesModal" data-toggle="modal" id="templateSearchIcon"></li><ul>';}
?>
</div><!--end .navbar-header-->
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li v-show="admin==true"><a href="adminMenu.php">Admin</a></li>
<?php if(basename($_SERVER['PHP_SELF']) == 'templates.php'){echo '<li class="hidden-lg visible-md visible-sm hidden-xs"
data-target="#searchTemplatesModal" data-toggle="modal"><a href="#"><span class="fa fa-search"></span> Search</a></li>
<li class="visible-lg hidden-md hidden-sm visible-xs"><a href="templates.php">Templates</a></li>';}
else{ echo '<li><a href="templates.php">Templates</a></li>';};?>
<li><a href="#">Stock</a></li>
<li><a href="#">Subscriptions</a></li>
<li v-show="sessionLoggedIn==true"><a href="profile.php">Profile</a></li>
<li v-show="sessionLoggedIn==false"><a v-on:click="showLoginForm();" href="#" data-toggle="modal" data-target="#loginModal">Login</a></li>
<li v-show="sessionLoggedIn==true"><a href="logout.php">Logout</a></li>
<li><a href="signup.php">Signup</a></li>
</ul>
</div><!--end #navbar-->
</div><!--end container-->
</nav>
<div class="container">
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!--Login -->
<div v-show="showLoginContent==true" class="modal-content">
<div class="modal-header">
<button v-on:click="resetLoginFormFields()" type="button" class="close" data-dismiss="modal">X</button>
<h2 class="modal-title">Login</h2><!--end modal-title-->
</div>
<!--end modal-header-->
<div class="modal-body">
<form role="form">
<!--Username-->
<div class="form-group">
<label for="username">Username/Email</label>
<input v-on:click="error=false; loginSub=false;" v-model="userName" type="text" class="form-control" placeholder="Username/Email" id="username" name="userName" v-on:keyup.enter="submit">
<a href="#">Forgot Username</a>
</div><!--end username-->
<!--Password-->
<div class="form-group">
<label for="password">Password</label>
<input v-on:click="error=false; loginSub=false;" v-model="password" type="password" v-on:keyup.enter="submit" class="form-control" placeholder="Password" name="password" id="password">
<a href="#" v-on:click="showResetPasswordForm();">Forgot Password</a>
</div><!--end password-->
</form>
<div v-show="error==true || userName.length<=7 && loginSub==true || password.length<=7 && loginSub==true"><small class="error">Username/Email or password was incorrect...Try again</small>
</div><!--end incorrect password message-->
</div><!--end modal-body-->
<div class="modal-footer">
<button type="button" v-on:click="submit" class="btn btn-primary btn-block">Login</button>
</div><!--end modal-footer-->
</div><!--end modal-content-->
<!--end Login-->
<!--Reset Password -->
<div v-show="showResetPasswordContent==true" class="modal-content">
<div class="modal-header">
<button v-on:click="resetLoginFormFields()" type="button" class="close">Back</button>
<h2>Reset Password</h2>
</div><!--end modal-header-->
<div class="modal-body">
<form role="form">
<!--Username/Email-->
<div class="form-group">
<label>Username/Email</label>
<input v-on:focus="error=false; loginSub=false;" name="userName" v-model="userName" class="form-control" v-on:keyup.enter="resetPassword" v-on:keyup.delete="error=false; loginSub=false;">
<ul v-show="error==true || userFound==false">
<li v-show="error==true" class="error">Error reseting password. Please try again. If error prosists please contact the Creative Group.</li>
<li v-show="userFound==false" class="error">That username or email could not be found</li>
</ul>
<ul v-show="passwordResetSuccess==true">
<li class="success">Your password was successfully reset. Please check your email to obtain your new password.</li>
</ul>
<ul v-show="userName=='' && loginSub==true">
<li class="error">Please enter a username or email</li>
</ul>
</div><!--UserName/Email-->
</form>
</div><!--end modal-body-->
<div class="modal-footer">
<button type="button" v-on:click="resetPassword" class="btn btn-primary btn-block">Reset Password</button>
</div><!--end modal-footer-->
</div><!--end modal-content-->
<!--end Reset Password-->
</div><!--End modal-dialog-->
</div><!-- End #loginModal -->
<div class="modal fade" id="notActivatedModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<a href="logout.php" role="button" class="close" data-dismiss="modal">X</a>
<h2 class="modal-title">Please Activate your account</h2>
</div>
<div class="modal-body">
<p>Please check your email and click on the activation link before signing in.</p>
</div>
<div class="modal-footer">
<a href="logout.php" role="button" class="btn btn-primary btn-block">Ok</a>
</div><!--end .modal-footer-->
</div><!--end .modal-header-->
</div><!--end modal-dialog-->
</div><!-- end #notActivatedModal-->
</div><!-- End .container-->
</div><!-- End #loginApp-->
<?php //Make the activation modal work so that they cant click off of it and forces them to activate their account.
if (isset($activated) && $activated == 0) {
echo "<script>
$('#notActivatedModal').modal('show');
$('#notActivatedModal').modal({backdrop: 'static', keyboard: false});</script>";
}
?>
<script>
var app = new Vue({
el: '#logInApp',
data: {
userName: '',
password: '',
error: '',
loginSub: '',
showLoginContent: true,
showResetPasswordContent: false,
userFound:true,
passwordResetSuccess:false,
response: [],
sessionUserName: '<?php if (isset($_SESSION['userName'])) {echo $_SESSION['userName'];}?>',
sessionEmail: '<?php if (isset($_SESSION['email'])) { echo $_SESSION['email'];}?>',
sessionLoggedIn: '<?php if (isset($_SESSION['loggedIn'])) {echo $_SESSION['loggedIn'];}?>',
sessionFirstName: '<?php if (isset($_SESSION['firstName'])) {echo $_SESSION['firstName'];}?>',
sessionLastName: '<?php if (isset($_SESSION['lastName'])) {echo $_SESSION['lastName'];}?>',
sessionPhoneNumber: '<?php if (isset($_SESSION['phoneNumber'])) {echo $_SESSION['phoneNumber'];}?>',
sessionCompanyName: '<?php if (isset($_SESSION['companyName'])) {echo $_SESSION['companyName'];}?>',
admin: '<?php if (isset($_SESSION['admin'])) {echo $_SESSION['admin'];}?>'
},
created: function() {
this.loginSub = false;
},
methods: {
submit: function() {
this.loginSub = true;
if (this.userName.length >= 8 && this.password.length >= 8) {
var jsonString = JSON.stringify({
userName: this.userName,
password: this.password
});
$.ajax({
url: "login.php",
method: "POST",
dataType: "JSON",
data: jsonString,
success: function(data) {
var vueapp = this;
vueapp.response = data;
vueapp.error = data.error;
if(data.success==true){location.reload();}
console.log(data);
}.bind(this)
});
}
},
showResetPasswordForm: function(){
this.error=false;
this.userName='';
this.password='';
this.showLoginContent=false;
this.showResetPasswordContent=true;
this.userFound=true;
this.passwordResetSuccess=false;
this.loginSub=false;
},
showLoginForm: function(){
this.error=false;
this.userName='';
this.password='';
this.showResetPasswordContent=false;
this.showLoginContent=true;
this.userFound=true;
this.passwordResetSuccess=false;
this.loginSub=false;
},
resetLoginFormFields: function(){
this.error=false;
this.userName='';
this.password='';
this.showLoginContent=true;
this.showResetPasswordContent=false;
this.userFound=true;
this.passwordResetSuccess=false;
this.loginSub=false;
},
resetPassword: function(){
console.log('ranResetPassword');
this.loginSub = true;
if (this.userName.length >= 1) {
var jsonString = JSON.stringify({
userName: this.userName
});
$.ajax({
url: "passwordReset.php",
method: "POST",
dataType: "JSON",
data: jsonString,
success: function(data) {
var vueapp = this;
vueapp.error = data.error;
vueapp.userFound=data.userFound;
if(data.success==true){this.passwordResetSuccess=true;}
console.log(data);
}.bind(this)
});
}
}
}
});
</script>
答案 0 :(得分：-1)
<form role="form" onsubmit="return false">似乎有效。但是我仍然不知道为什么要提交。有什么想法吗？