如何在 jQuery 中组合各种独立的验证？答案

【问题标题】：How do I combine various independent validations in jQuery?如何在 jQuery 中组合各种独立的验证？
【发布时间】：2020-02-27 02:38:56
【问题描述】：

对于不太清楚如何在标题中表达这个问题，我提前道歉。

我是 Laravel 新手，正在使用 Laravel 6 进行开发。我正在尝试在我的应用程序中合并客户端和服务器端验证，这基本上是一个 CRUD。我将通过表单从用户那里收集一些信息，对其进行验证，然后将记录存储在 MySQL 中。我想我了解如何进行服务器端验证，但我在客户端苦苦挣扎。几年前我对 jQuery 的了解很肤浅，现在几乎都忘记了，这可能是我目前困惑的原因。

我在 Laravel 视图中拼凑了一个原型输入表单。我正在尝试添加客户端验证并选择了 jQuery 验证，主要是因为它是我几年前所知道的。（如果有人能提出更好的方法，我肯定会被说服以另一种方式来做。）我原型中的表单有两个简单的文本字段，一个日期字段，一个时间字段和一个复选框。

我正在使用 jQuery 插件来显示日期和时间选择器。这里是the documentation for that plugin。我将 javascript 放在一个名为 sandbox.js 的文件中。其余代码都在这个视图中，sandbox.blade.php：

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="/lib/jquery.datetimepicker.min.css" rel="stylesheet">

<title>Sandbox</title>
</head>
<body>
<div class="container-fluid bg">
<div class="col-sm-12">
<h1>Sleep Form</h1>
<form id="registration-form">
  <div class="form-group row">
    <label for="name" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input type="text" id="name" class="form-control">
    </div>
  </div>
  <div class="form-group row">
      <label for="sleepDate" class="col-4 col-form-label">Sleep Date</label>
    <div class="col-2">
      <input type="text" id="sleepDate" class="form-control" placeholder="Click to choose date">   
    </div>   
  </div>
  <div class="form-group row">
    <label for="sleepTime" class="col-4 col-form-label">Sleep Time</label>
  <div class="col-2">
    <input type="text" id="sleepTime" class="form-control" placeholder="Click to choose time">   
  </div>   
</div>
<div class="form-group row">
    <label for="minutesAerobic" class="col-4 col-form-label">Minutes of aerobic exercise you took on this day</label>
    <div class="col-8">
      <input type="text" id="minutesAerobic" class="form-control">
    </div>
  </div>       
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="sunlight">
    <label class="form-check-label" for="sunlight">
      I got at least two hours of sunlight on this day
    </label>
  </div> 
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>  -->
<script src="https://unpkg.com/@popperjs/core@2.0.0-rc.3"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="lib/jquery.datetimepicker.full.min.js"></script>
<script src="/js/sandbox.js"></script>
</body>
</html>

当 sandbox.js 文件只包含显示日期选择器和时间选择器的代码时，两者都显示得很好。下面是 sandbox.js 文件的样子：

$('#sleepDate').datetimepicker({
timepicker: false,
datepicker: true,
format: 'Y-m-d',
defaultDate: new Date(),
weeks: false
})

$('#sleepTime').datetimepicker({
timepicker: true,
datepicker: false,
format: 'H:i',
hours12: false,
step: 15
})

现在我正在尝试为文本字段添加验证。我还想在文本字段下方的行上显示任何错误消息。这是我修改后的代码：

$('#sleepDate').datetimepicker({
timepicker: false,
datepicker: true,
format: 'Y-m-d',
defaultDate: new Date(),
weeks: false
})

$('#sleepTime').datetimepicker({
timepicker: true,
datepicker: false,
format: 'H:i',
hours12: false,
step: 15
})
$("#registration-form").validate({
rules: {
    name: {
        required: true
    },
    minutesAerobic: {
        required: true
    }
},
messages: {
    name: {
        required: '[JQV] Please supply your name'
    },
    minutesAerobic: {
        required: '[JQV] Please enter the number of minutes of aerobic exercise you did during this day'
    }       
  }
})

$.validator.setDefaults({
errorClass: 'help-block',
highlight: function(element) {
    $(element)
        .closest('.form-control')
        .addClass('has-error');
},
unhighlight: function(element) {
    $(element)
        .closest('.form-control')
        .removeClass('has-error');
}
})

当我尝试测试这段代码时，我没有看到新编辑工作的迹象，但日期和时间仍然显示得很好，所以至少我没有破坏它。当我保持所有字段不变并单击提交时，我不会收到任何类型的错误消息。我不知道我的注册表单验证是否在做任何事情。我不确定它是否发现错误但无法显示它们，或者它是否甚至没有看到错误，因为它没有正确编码。我也对四个单独的代码块都放在 sandbox.js 文件中感到不安；我想知道每个块（除了最后一个）是否应该以分号结尾，是否所有 4 个块都应该用

$(function() {
});

两种方法我都试过了，但代码的行为没有改变；它似乎是双向的。

我花了好几个小时寻找一个将常规 jQuery 验证内容与使用此插件的日期/时间选择器示例相结合的示例，但还没有看到类似的东西，所以我真的不清楚 sandbox.js 的正确结构.

我也欢迎就如何判断注册表单的验证是否真的有效提供建议。我正在用 VSCode 编写代码，知道如何在 VSCode 中调试 Laravel 会很有帮助，但我已经准备好接受更基本的技术来了解实际执行的代码。

如果有人能指出一个 Laravel 视图在客户端编辑“创建”表单的实际示例，我认为这将非常有帮助，特别是如果它使用 Bootstrap4 和 jQuery。我对 Laravel 世界很陌生，我只是不知道在哪里可以找到这样的东西。

【问题讨论】：

由于您完全在谈论客户端验证，因此 Laravel 与您的问题无关。请记住，服务器端是进行重要验证的地方，因此如果您想避免重复自己，则客户端验证应该是最少的。
@miken32 - 是的，我想你对 Laravel 不相关是正确的。我提到 Laravel 是因为它对我应该如何处理事情有任何影响。不过，我仍然对重复自己感到困惑。我不应该在服务器端进行所有可能的验证，以防用户关闭 Javascript，然后在客户端进行完全相同的验证，以防用户打开 Javascript？
服务器端始终完成并保护您的数据完整性。仅当您希望对用户来说看起来更漂亮时，客户端才会出现。
A name attribute is mandatary for this plugin 并且任何没有名称属性的输入都将被忽略。你至少应该先解决这个问题。

标签： javascript jquery jquery-validate

【解决方案1】：

jQuery 验证在 input 中查找 name 属性尝试添加 name 属性，然后将 name 属性用作 rules 和 messages 中的属性。

你可以参考here的jQuery Validation文档

【讨论】：

谢谢，Ronak，但我已经有了；虽然它没有回答我的问题。我不确定如何将常规 jQuery 验证与此 datepicker/timepicker 插件的参数混合和匹配，或者如何确定它们是否正在执行。这是我最大的担忧。似乎没有发生任何事情，但也许我只是不允许它向我显示错误。我应该在两个文本字段上得到必需的错误，但我没有。你明白为什么吗？
@Henry，然后编辑您的问题。 A name attribute is mandatary for this plugin 和任何没有 name 属性的输入都将被忽略。