我事先为不太确定如何在标题中使用这个问题而道歉。
我是拉拉威尔的新手，正在拉拉威尔6中发展。我正在尝试将客户端和服务器端验证合并到我的应用程序中，它基本上是一个CRUD。我将通过表单从用户那里收集一些信息，验证它们，然后将记录存储在MySQL中。我想我知道如何进行服务器端验证，但我在客户端很吃力。几年前，我对jQuery有一点肤浅的了解，现在几乎都忘了，这可能是我目前困惑的原因。
我在Laravel视图中构建了一个原型输入表单。我正在尝试添加客户端验证，并选择了jQuery验证，主要是因为它是我几年前就知道的。(如果有人能提出更好的方法，我肯定会被说服用另一种方式。(我原型中的表单有两个简单的文本字段，一个日期字段、一个时间字段和一个复选框。
我正在使用一个jQuery插件来显示日期和时间选择器。这是该插件的文档。我把javascript放在一个名为sandbox.js的文件中。其余的代码在这个视图中，sandbox.blade.hp:
<!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的话。我对拉拉威尔的世界很陌生，我只是不知道在哪里可以找到这样的东西。
input中查找name属性。尝试添加name属性，然后使用name属性作为rules和messages中的属性。
您可以从这里参考jQuery验证文档