Javascript 在EJS中单击“提交”按钮时无法提交表单
大家好,我遇到了一个问题,我不明白为什么,这是非常奇怪的,或者我写的代码错误,所以我希望你们能指出错误或启发我 因此,我试图将表单提交到数据库,在提交表单之前,validate函数将验证数据,如果出现错误,它将通知用户 当我单击“提交”按钮时,表单无法提交,并且没有发生任何事情,终端没有错误,控制台没有错误,看起来您在表单内部单击了什么,而表单希望提交表单> 这是完整的代码 我觉得这里没什么问题Javascript 在EJS中单击“提交”按钮时无法提交表单,javascript,forms,node.js,express,ejs,Javascript,Forms,Node.js,Express,Ejs,大家好,我遇到了一个问题,我不明白为什么,这是非常奇怪的,或者我写的代码错误,所以我希望你们能指出错误或启发我 因此,我试图将表单提交到数据库,在提交表单之前,validate函数将验证数据,如果出现错误,它将通知用户 当我单击“提交”按钮时,表单无法提交,并且没有发生任何事情,终端没有错误,控制台没有错误,看起来您在表单内部单击了什么,而表单希望提交表单> 这是完整的代码 我觉得这里没什么问题 var express = require('express'), app =
var express = require('express'),
app = express(),
http = require('http'),
path = require('path'),
MongoClient = require('mongodb').MongoClient,
routes = require('./routes'),
passport = require('passport');
MongoClient.connect('mongodb://localhost:27017/test', function(err, db) {
"use strict";
if(err) throw err;
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/public/views');
app.set('view engine', 'ejs');
app.use('/static', express.static(path.join(__dirname, 'public')));
app.use(express.cookieParser());
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.session({ secret: 'Super Duper Awesome Duck' }));
app.use(passport.initialize());
app.use(passport.session());
app.use(app.router);
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
routes(app, db);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
});
routes/index.js
路由/session.js
register.ejs
我认为这可能是一个愚蠢的错误。我希望我的HTML标记LOL没有问题。我相信您需要一个空间,以便type='submit'类变成:type='submit'类。好的,在短暂的调试会话之后: 取自Angular的 由于表单在客户端应用程序中的作用是 与经典的往返应用程序不同,它适合 浏览器不将表单提交转换为整页重新加载 它将数据发送到服务器。取而代之的是一些javascript逻辑 应触发以在 特定于应用程序的方式 因此,Angular会阻止默认操作表单提交 除非元素具有action属性,否则不能将其复制到服务器 指定的 因此,您似乎没有为表单提交提供适当的处理:- 因此,要么提供一个,要么将“action”属性添加到表单中——这将修复它 如果这对你有意义,请告诉我 register.ejs中的表单标记中缺少action属性 应该是这样的
您可以通过单击处理程序从按钮提交表单,方法是查找表单并调用表单对象的提交方法。这不是一个EJS的东西,更只是一个简单的HTML的东西。请看:Nono我正在解释当我点击按钮时的感受确保你有一个动作=/在你的表单中注册;我完全误读了你最初的帖子。Hector很可能是正确的,没有定义任何操作,表单就不会去任何地方。@Hector Correa我可以在没有操作的情况下提交表单=/register,当然是在出现问题之前谢谢你回答我的问题,但它仍然保持不变,但在出现此问题之前,它工作得非常好。即使没有操作属性,也请在之前定义
var SessionHandler = require('./session');
module.exports = exports = function(app, db) {
var sessionHandler = new SessionHandler(db);
app.use(sessionHandler.isLoggedInMiddleware);
// Signup form
app.post('/register', sessionHandler.handleSignup);
app.use(function (req,res) {
res.status(404).render('error', {
url: req.originalUrl
});
});
app.get('*',function(req, res){
res.render('master', { title: 'form' });
});
}
var UsersDAO = require('../users').UsersDAO
, SessionsDAO = require('../sessions').SessionsDAO;
/* The SessionHandler must be constructed with a connected db */
function SessionHandler (db) {
"use strict";
var users = new UsersDAO(db);
var sessions = new SessionsDAO(db);
function validateSignup(publicUsername, password, confirmPassword, email, confirmEmail, errors) {
"use strict";
var USER_RE = /^[a-zA-Z0-9_-]{2,25}$/;
var PASS_RE = /^.{6,100}$/;
var EMAIL_RE = /^[\S]+@[\S]+\.[\S]+$/;
errors['publicUsername_error'] = "";
errors['password_error'] = "";
errors['confirmPassword_error'] = "";
errors['email_error'] = "";
errors['confirmEmail_error'] = "";
if (!USER_RE.test(publicUsername)) {
errors['publicUsername_error'] = "Try just letters and numbers, e.g: Ed, 69, Kelvin and etc";
return false;
}
if (!PASS_RE.test(password)) {
errors['password_error'] = "Password must be at least 6 characters long";
return false;
}
if (password != confirmPassword) {
errors['confirmPassword_error'] = "Password must match";
return false;
}
if (!EMAIL_RE.test(email)) {
errors['email_error'] = "Invalid email address";
return false;
}
if (email != confirmEmail) {
errors['confirmEmail_error'] = "Email must match";
return false;
}
return true;
}
this.handleSignup = function(req, res, next) {
"use strict";
var email = req.body.email,
confirmEmail = req.body.confirmEmail,
password = req.body.password,
confirmPassword = req.body.confirmPassword,
firstName = req.body.firstName,
lastName = req.body.lastName,
penName = req.body.penName,
publicUsername = req.body.publicUsername;
// set these up in case we have an error case
var errors = {'email': email,'publicUsername': publicUsername,'firstName': firstName,'lastName': lastName,'penName': penName}
if (validateSignup(publicUsername, password, confirmPassword, email, confirmEmail, errors)) {
users.addUser(email, password, firstName, lastName, penName, publicUsername, function(err, user) {
"use strict";
if (err) {
// this was a duplicate
if (err.code == '11000') {
errors['email_error'] = "Email already in use. Please choose another";
return res.render("register", errors);
}
// this was a different error
else {
return next(err);
}
}
sessions.startSession(user['_id'], function(err, session_id) {
"use strict";
if (err) return next(err);
res.cookie('session', session_id);
return res.redirect('/');
});
});
} else {
console.log("user did not validate");
return res.render("register", errors);
}
}
}
<div class="pure-u-1 text-center">
<form method="post" class="pure-form pure-form-aligned">
<fieldset>
<legend><h1 class="pure-splash-subhead midnightblue"><span class='lightblue'>Join</span> us today and start write things that <span class='maroon'>matter</span></h1>
</legend>
<p class="text-center red">{{email_error}}</p>
<div class="pure-control-group">
<label for="email">Email Address</label>
<input required name="email" class="pure-u-1-3" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<p class="text-center red">{{confirmEmail_error}}</p>
<label for="confirmEmail">Confirm Email Address</label>
<input required name="confirmEmail" class="pure-u-1-3" type="email" placeholder="Confirm Email Address">
</div>
<div class="pure-control-group">
<p class="text-center red">{{password_error}}</p>
<label for="password">Password</label>
<input required name="password" class="pure-u-1-3" type="password" placeholder="Password">
</div>
<div class="pure-control-group">
<p class="text-center red">{{confirmPassword_error}}</p>
<label for="confirmPassword">Confirm Password</label>
<input required name="confirmPassword" class="pure-u-1-3" type="password" placeholder="Confirm Password">
</div>
<br/>
<br/>
<div class="pure-control-group">
<label for="firstName">First Name</label>
<input required name="firstName" class="pure-u-1-3" type="text" placeholder="Your first name">
</div>
<div class="pure-control-group">
<label for="lastName">Last Name</label>
<input required name="lastName" class="pure-u-1-3" type="text" placeholder="and your last name">
</div>
<div class="pure-control-group">
<label for="penName"><abbr title="A pen name, nom de plume, or literary double, is a pseudonym adopted by an author. The author's real name may be known to only the publisher, or may come to be common knowledge.">Nom de plume</abbr></label>
<input required name="penName" class="pure-u-1-3" type="text" placeholder="Pen Name eg:J.R.R. Tolkien">
</div>
<div class="pure-control-group">
<label for="publicUsername">Public Username</label>
<input required name="publicUsername" class="pure-u-1-3" type="text">
<p class="text-center red">{{publicUsername_error}}</p>
</div>
<div class="pure-u-1 ">
<label for="conAndTerm" class="pure-checkbox">
<input id="conAndTerm" type="checkbox"> I've read the <a class='link blue'href="#">terms and conditions</a>
</label>
<br/>
<input type='submit'class="pure-button pure-button-secondary pure-u-1-3" value="Register">
<br/>
</div>
</fieldset>
</form>
</div>