时间戳

首页 > 解决方案 > 如何在 jQuery 中组合各种独立的验证？

javascript - 如何在 jQuery 中组合各种独立的验证？

问题描述

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

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

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

我正在使用 jQuery 插件来显示日期和时间选择器。这是该插件的文档。我将 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 文件只包含显示 datepicker 和 timepicker 的代码时，两者都显示得很好。下面是 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 世界很陌生，我只是不知道在哪里可以找到这样的东西。

标签： javascriptjqueryjquery-validate

解决方案

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

您可以从这里参考 jQuery Validation 文档

推荐阅读