Question

我正在处理我在节点中的第一个项目，并且我尝试使用jQuery验证验证表单http://jqueryvalidation.org

我让它在jsfiddle http://jsfiddle.net/o16u2fLq/上工作，但在我的项目中，我的表单是在没有验证的情况下提交的。我认为这与我如何路由表单有关，但我不确定问题是什么。

以下是我的路线：

var express = require('express');
var router = express.Router();
var Greeting = require('../models/greetings');


router.get('/', function(req, res) {
    Greeting.getGreetings(req).then(function (greetings) {
    res.render('index', { greetings: greetings });
    res.redirect('/');
    });
});

router.post('/greeting', function(req, res){
     console.log(req.body);
     Greeting.createGreeting(req, res);
     res.redirect('/');
     Greeting.getGreetings(req).then(function (greetings) {
        res.render('index', { greetings: greetings });
     });
});

module.exports = router;

我试过玩这些路线，但没有任何工作。如何在发布提交文件之前验证表单？

编辑：

按要求提供的HTML

<!DOCTYPE html>
<html>
  <head>
    <link href="./bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
   <link rel="stylesheet" href="./bower_components/jquery-ui/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="./css/custom.css">
  </head>
  <body>
    <div class="container-fluid" style="padding-top:20px">
      <form action="/greeting" method="Post" enctype="application/x-www-form-urlencoded" class="form-horizontal col-lg-4" id="welcome">
        <div class="form-group">
          <label for="guest" class="col-lg-3 control-label">Guest Name: </label>
          <div class="col-lg-9">
            <input type="text"  class="form-control" id="guest" name="guest">
          </div>
        </div>
        <div class="form-group">
          <label for="message" class="col-lg-3 control-label">Message: </label>
          <div class="col-lg-9">
            <textarea  class="form-control" id="message" name="message" rows="3"></textarea>
          </div>
        </div>
        <div class="form-group">
          <label for="datepicker" class="col-lg-3 control-label">Date: </label>
          <div class="col-lg-9">
            <input type="text"  class="form-control" name="display_date" id="datepicker">
          </div>
        </div>
        <div class="form-group">
          <div class="col-lg-offset-3 col-lg-9">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </div>
      </form>
      <div class="col-lg-offset-2 col-lg-5">
        <table class="table">
          <thead>
            <th>
              Guest
            </th>
            <th>
              Message
            </th>
          </thead>
          <tbody>          
            <% for(var i=0; i < greetings.length; i++) { %>
              <tr>
                <td><%= greetings[i].guest %></td>
                <td><%= greetings[i].message %></td>
              </tr>
            <% } %>
          </tbody>
        </table>
      </div>
    </div>
  </body>
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="./bower_components/jquery-ui/jquery-ui.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script src="./scripts/custom.js"></script>
  <script>
    $(function() {
      $( "#datepicker" ).datepicker();
    });
  </script>
</html>

Answer 1

在我的公开场合

创建validator.js文件
添加所有验证

首先指向valdator，然后转到路由器文件夹

路由如何影响表单验证

1 个答案: