Javascript 如何在jQuery中组合各种独立的验证？_Javascript_Jquery_Jquery Validate

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

javascript jquery

Javascript 如何在jQuery中组合各种独立的验证？,javascript,jquery,jquery-validate,Javascript,Jquery,Jquery Validate,我事先道歉，因为我不太确定如何在标题中表达这个问题我是拉雷维尔的新手，在拉雷维尔6号开发。我正在尝试将客户端和服务器端验证合并到我的应用程序中，这基本上是一个CRUD。我将通过表单从用户那里收集一些信息，验证它们，然后将记录存储在MySQL中。我想我了解如何进行服务器端验证，但我正在与客户端进行斗争。几年前，我对jQuery的了解还很肤浅，几乎忘记了它的全部内容，这可能是我目前感到困惑的原因我在Laravel视图中拼凑了一个原型输入表单。我正在尝试添加客户端验证，并选择了jQuery验证，主

我事先道歉，因为我不太确定如何在标题中表达这个问题

我是拉雷维尔的新手，在拉雷维尔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>

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

$('#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');
}
})

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

$(function() {
});

我尝试了两种方法，但代码的行为没有改变；这似乎是两败俱伤

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

我也欢迎大家就如何判断登记表的有效性提出建议。我正在用VSCode编写代码，知道如何用VSCode调试Laravel真的很有帮助，但我已经准备好接受更基本的技术，即告诉代码实际执行的是什么

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

jQuery验证在

输入中查找名称
属性

尝试添加

名称

属性，然后将名称属性用作

规则

和

消息

中的属性

您可以参考

中的jQuery验证文档，因为您谈论的完全是客户端验证，所以Laravel与您的问题无关。请记住，服务器端是进行重要验证的地方，因此如果您想避免重复自己的操作，客户端验证应该是最小的。@miken32-是的，我认为您关于Laravel不相关的说法是正确的。我提到拉威尔的时候，很有可能这对我处理事情的方式有任何影响。不过我还是不知道该怎么重复我自己。我是否应该在服务器端执行所有可能的验证，以防用户关闭Javascript，然后在客户端执行完全相同的验证，以防用户打开Javascript？服务器端总是这样做的，这是保护数据完整性的原因。只有当你想让用户看起来更漂亮时，客户端才会出现。任何没有name属性的输入都将被忽略。你至少应该先把它修好。谢谢你，罗纳克，但我已经修好了；但它不能回答我的问题。我不知道如何将常规jQuery验证与此datepicker/timepicker插件的参数混合匹配，或者如何确定它们是否正在执行。这是我最担心的。似乎什么都没有发生，但也许我只是不让它告诉我错误。我应该在这两个文本字段上得到必需的错误，但我没有。“你知道为什么吗？”亨利，那么就把你的问题编辑成这样吧。任何没有

名称

属性的输入都将被忽略。

$(function() {
});