使用html5验证表单后输入提交的onclick事件是什么？ 问题：节点邮件程序

Question

我创建了一个 email.js 模块来实例化 nodemailer。 通过运行 node email.js（代码中已经填写了 to、for、subject、文本），我能够正常使用 gmail 发送/接收电子邮件。 目前，我正在尝试使用表单中的提交输入来触发 nodemailer（它现在需要访问在网站上填写的输入值并通过电子邮件发送）。 我不能通过将 onclick="Send()" 分配给表单的提交输入来做到这一点。

HTML：

<section class="sec-form">
            <form name="form_contato" method="post" id="form-block">
                <h1 id="contato">Contato</h1>
                <input type="text" id="nomeid" placeholder="Seu nome" name="nome" required/>
                <input type="email" id="emailid" placeholder="E-mail" name="email" required/>
                <input type="text" id="assuntoid" placeholder="Assunto"/>
                <textarea id="mensagemid" placeholder="Deixe sua mensagem..." rows="6" maxlength="1300" required></textarea>
                <input type="submit" id="enviar" value="Enviar" onclick="Enviar()"/>
            </form>
        </section>

JS：

 const dotenv = require('dotenv').config(); const nodemailer = require("nodemailer"); const express = require('express'); const app = express(); const port = 5500; app.listen(port, () => { console.log(`Listening at http://localhost:${port}`) }); //Input submit onclick function Enviar() { let nome = document.getElementById('nomeid'); let email = document.getElementById('emailid'); let assunto = document.getElementById('assuntoid'); let mensagem = document.getElementById('mensagemid'); let transporter = nodemailer.createTransport({ service: 'gmail', auth: { type: "login", user: process.env.EMAIL_USER, pass: process.env.EMAIL_PASS, }, }); let mailOptions = { from: 'services.mail.sender@gmail.com', to: 'luciano.rocha.dev@gmail.com', subject: 'Static Resp Web - Nodemailer', text: `Nome: ${nome.value}, E-mail: ${email.value}, Assunto: ${assunto.value}, Mensagem: ${mensagem.value}` //attachments: [ { filename: , path: , contentType: , } ] }; transporter.sendMail(mailOptions, function (err, data) { if (err) { console.log("Error " + err); } else { alert(`Obrigado ${nome.value}, sua mensagem foi enviada com sucesso!`) console.log("E-mail enviado com sucesso."); } }); }

我在 VS Code 上使用实时服务器。 在正确填写所有表单（html5 验证）后提交工作时，我没有找到除了 onclick 之外的状态。 我的想法是使用这种状态来触发 nodemailer 功能。 有没有更好的方法来实现这一点？ 谢谢！

Answer 1

您可以使用的事件是表单中的onsubmit HTML 事件属性。 所以在name="form_contato"放置onsubmit="Enviar()" 。

如果您需要，W3 在此处提供更多信息Onsubmit HTML 事件。 然后，您想要的任何验证器都可以放置在 Enviar() 函数中，或者如果您使每个验证成为其自己的函数，则可以单独调用。

还有其他方法，比如监控状态，在窗口中设置全局状态，但我不确定是否涉及其他因素？ 根据您提供的代码，这将适用于您的目的。 我希望这是有帮助的。 如果您有任何问题，请告诉我。 快乐编码！

Answer 2

我通过实现 Express 来为我的页面的静态文件提供服务，并为发布请求路由 Nodemailer（这在 server.js 文件中）解决了我的问题。 在 js 客户端，我获取了表单值，在提交事件中使用了 preventDefault，并将 AJAX 请求发送到 server.js。 收到响应后，我向用户发出了最终警报。 我不需要在表单的 html 中使用函数。

应用程序.js

 //Form Contato const contatoForm = document.querySelector('.form-contato'); let nome = document.getElementById('nome'); let email = document.getElementById('email'); let assunto = document.getElementById('assunto'); let mensagem = document.getElementById('mensagem'); let inputSubmit = document.getElementById('enviar'); contatoForm.addEventListener('submit', (e) => { e.preventDefault(); enviar.disabled = true; let formData = { nome: nome.value, email: email.value, assunto: assunto.value, mensagem: mensagem.value } let xhr = new XMLHttpRequest(); xhr.open('POST', '/'); xhr.setRequestHeader('content-type', 'application/json'); xhr.onload = function() { if(xhr.responseText == 'success') { alert('Mensagem enviada com sucesso!'); nome.value = ''; email.value = ''; assunto.value = ''; mensagem.value = ''; } else { alert('Algo deu errado...\\n Comunique: luciano.rocha.dev2gmail.com') }; enviar.disabled = false; }; xhr.send(JSON.stringify(formData)); });

服务器.js

 nst nodemailer = require('nodemailer'); require('dotenv').config(); const express = require('express'); const app = express(); const PORT = process.env.PORT || 3000; app.use(express.static('build')); app.use(express.json()); app.get('/', (req, res) => { res.sendFile(__dirname + 'index.html') }); app.post('/', (req, res) => { const transporter = nodemailer.createTransport({ service: 'gmail', auth: { type: 'OAuth2', user: process.env.EMAIL_USER, pass: process.env.EMAIL_PASS, clientId: process.env.OAUTH_CLIENTID, clientSecret: process.env.OAUTH_CLIENT_SECRET, refreshToken: process.env.OAUTH_REFRESH_TOKEN } }); const mailOptions = { from: req.body.email, to: process.env.EMAIL_TO, subject: `Static Resp Web - From ${req.body.nome}: ${req.body.assunto}`, text: 'De: ' + req.body.nome + '\\nE-mail: ' + req.body.email + '\\nAssunto: ' + req.body.assunto + '\\nMensagem: ' + req.body.mensagem }; transporter.sendMail(mailOptions, (error, info) => { if (error) { // console.log(error); res.send('error'); } else { // console.log('E-mail enviado: ' + info.response); res.send('success'); } }); }); app.listen(PORT, ()=> { console.log(`Server running on port ${PORT}`) });

谢谢大家！