ExpressJS所需的表单元素

发布于 2025-02-11 13:36:59 字数 2394 浏览 0 评论 0原文

我正在为我的网站进行注册页面。看起来像这样

<!DOCTYPE html>
<html lang="en" height="">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MVC | Signup</title>
</head>
<body>
  
  <div>
    <form action="/signup" method="post" target="nothing">
      <h1>Sign up for Post-it</h1>
      <input type="text" name="name" placeholder="Your name">
      <input type="text" name="usr" placeholder="Username" >
      <input type="password" name="psd" placeholder="Password">
      <button type="submit">Sign up for post-it</button>
    </form>
  </div>
  <iframe name="nothing" style="display:none"></iframe>
</body>
</html>

但是现在，您可以创建一个没有用户名或密码的帐户。我尝试了必需的属性。它做了这样的事情。

<!DOCTYPE html>
<html lang="en" height="">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MVC | Signup</title>
</head>
<body>
    <form action="/signup" method="post" class="w-1/2 flex flex-col" target="nothing" onsubmit="alert('form submitted')">
      <h1 class="text-xl text-center mb-5">Sign up for post-it</h1>
      <input type="text" name="name" placeholder="Your name" required>
      <input type="text" name="usr" placeholder="Username" required>
      <input type="password" name="psd" placeholder="Password" required>
      <button type="submit">Sign up for post-it</button>
    <iframe name="nothing" style="display: none"></iframe>
</body>
</html>

这有效，但是“请填写此字段”看起来并不好。而且，如果有人弄清楚如何绕过所需的字段，那将对我的数据库造成很大的损害。因此，是否可以确保 server上的表单不为空？注意：我也在使用EJS，因此您可以发出这样的错误消息：

app.get('/error', (req, res) => {
   res.render('signup', { error: 'enter a username'}); // Could also be "enter your name", or "enter your password".
});

原文

I am making a sign-up page for my site. It looks like this

<!DOCTYPE html>
<html lang="en" height="">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MVC | Signup</title>
</head>
<body>
  
  <div>
    <form action="/signup" method="post" target="nothing">
      <h1>Sign up for Post-it</h1>
      <input type="text" name="name" placeholder="Your name">
      <input type="text" name="usr" placeholder="Username" >
      <input type="password" name="psd" placeholder="Password">
      <button type="submit">Sign up for post-it</button>
    </form>
  </div>
  <iframe name="nothing" style="display:none"></iframe>
</body>
</html>

But right now, you can create an account without a username or password. I tried the required attribute. It made something like this.

<!DOCTYPE html>
<html lang="en" height="">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MVC | Signup</title>
</head>
<body>
    <form action="/signup" method="post" class="w-1/2 flex flex-col" target="nothing" onsubmit="alert('form submitted')">
      <h1 class="text-xl text-center mb-5">Sign up for post-it</h1>
      <input type="text" name="name" placeholder="Your name" required>
      <input type="text" name="usr" placeholder="Username" required>
      <input type="password" name="psd" placeholder="Password" required>
      <button type="submit">Sign up for post-it</button>
    <iframe name="nothing" style="display: none"></iframe>
</body>
</html>

This works, but the "please fill out this field" doesn't look that great. And if someone figures out how to bypass the required fields, that will do a lot of damage to my database. So is there a way to make sure the form isn't empty on the server side? Note: I'm also using ejs, so you can make error messages like this:

app.get('/error', (req, res) => {
   res.render('signup', { error: 'enter a username'}); // Could also be "enter your name", or "enter your password".
});

分享到QQ

分享到微博