Nodejs jade 怎样进行表单验证？

Nodejs jade 怎样进行表单验证？

举个js验证表单的例子，方便大家对比。

form(achtion="", method=“post”)

<input type=“text” name=“username”> <input type=“submit” value=“submit” onclick=“check()”>

function check():void{

if(document.getElementByName(“username”).value==""){} }

在客户端就可以验证，然后再提交到客户端。

现在我同样在某个jade文件中实现了一下表单：

form(action="", method=“post”)

<input type=“text” name=“username”>

<input type=“submit” value=“submit”>.

在app.js中处理表单： app.post("/:room", function(req, res){ if(req.body.username == “”){…} });

通过表单提交可以调到另一个动态生成的网页中。

但是现在我只想要验证表单，就是在jade文件中实现onclick函数， 而不是表单的提交。

具体代码该怎么写？求助大家啊，都困扰我好几天了，一定要帮帮我啊。

格式不知道怎么弄，大家将就看吧。


2 回复

好的，让我们来解决这个问题。你希望在客户端使用Jade模板引擎编写一个表单，并在提交之前进行验证。以下是一个详细的解决方案，包括Jade模板代码、JavaScript验证函数以及服务器端的处理逻辑。

Jade 模板代码

首先，我们定义一个简单的HTML表单，其中包含一个文本输入框和一个提交按钮。在Jade模板中，我们可以这样写：

doctype html
html
  head
    title 表单验证示例
    script.
      function validateForm() {
        var username = document.forms["myForm"]["username"].value;
        if (username == "") {
          alert("用户名不能为空");
          return false;
        }
        return true;
      }
  body
    form(name="myForm" action="/submit" method="post" onsubmit="return validateForm()")
      input(type="text" name="username")
      input(type="submit" value="提交")

解释

  1. Jade 模板:

    • 使用doctype html定义文档类型。
    • 定义了一个HTML表单，其name属性为myForm，action属性指向/submit（这将在服务器端处理），method属性设置为post。
    • 在表单中添加一个文本输入框，其name属性为username。
    • 添加一个提交按钮，并绑定onsubmit事件到validateForm()函数。

  2. JavaScript 验证函数:

    • validateForm()函数获取用户名输入框的值，并检查其是否为空。
    • 如果用户名为空，则弹出警告并返回false，阻止表单提交。
    • 如果用户名不为空，则返回true，允许表单提交。

服务器端处理

在你的app.js文件中，你可以这样处理表单提交：

const express = require('express');
const app = express();
app.use(express.urlencoded({ extended: true }));

app.post('/submit', function(req, res) {
  const username = req.body.username;
  if (!username) {
    res.send('用户名不能为空');
  } else {
    res.send(`欢迎 ${username}`);
  }
});

app.listen(3000, () => console.log('App listening on port 3000'));

解释

  1. Express 中间件:

    • 使用express.urlencoded({ extended: true })中间件解析请求体中的URL编码数据。

  2. 路由处理:

    • 当接收到POST请求时，从请求体中获取username字段。
    • 如果username为空，则返回错误消息。
    • 否则，返回欢迎信息。

这样，你就可以在客户端进行表单验证，并在服务器端处理表单提交。希望这能解决你的问题！


要在Jade模板中实现表单验证，并且不直接提交表单，你可以使用JavaScript来实现。这里提供一个简单的示例，展示如何在客户端进行表单验证。

Jade模板示例

form(action="", method="post")
    input(type="text", name="username", id="username")
    input(type="submit", value="submit", onclick="return validateForm()")

JavaScript验证逻辑

在你的Jade模板中，可以添加一个内联脚本或者引入外部的JavaScript文件，包含validateForm函数：

script.
    function validateForm() {
        var username = document.getElementById('username');
        if (username.value.trim() === "") {
            alert("用户名不能为空！");
            return false;
        }
        // 如果你想在提交前做更多的验证，可以在这里添加更多逻辑
        return true;
    }

解释

  1. Jade模板:

    • 创建了一个表单，其中包含一个文本输入框（username）和一个提交按钮。
    • 提交按钮绑定了一个onclick事件，该事件触发validateForm()函数。注意，这里的onclick函数需要返回true或false来决定是否允许表单提交。

  2. JavaScript:

    • validateForm函数首先获取用户名输入框的值。
    • 使用.trim()方法去除首尾空白字符，然后检查用户名是否为空。
    • 如果用户名为空，则弹出警告框并返回false阻止表单提交。
    • 如果所有验证通过，返回true允许表单提交。

这样你可以在客户端验证表单数据，而不直接提交到服务器。如果验证失败，用户会被阻止继续操作，直到表单数据正确为止。

回到顶部