如何在blade中使用jQuery验证?

nuypyhwy  于 2023-04-29  发布在  jQuery
关注(0)|答案(4)|浏览(104)

我在Laravel计划中用刀锋创造形体,
例如,在这个表单中,我在Input标签中使用name="adult[{{ $i }}][first_name]"
我在Form标签中添加.passenger-validation

<form method="" route="" class="passenger-validation"></form>

我在其他项目中使用jQuery验证:

$(".passenger-validation").validate({
  rules: {
    // simple rule, converted to {required:true}
    name: "required",
    // compound rule
    email: {
        required: true,
        email: true
    }
  }
});

现在,如何使用jQuery验证在形式与此名称name="adult[{{ $i }}][first_name]"
我使用这个网站:https://jqueryvalidation.org
谢谢大家。

quhf5bfb

quhf5bfb1#

只需要将jQuery验证器js文件包含在您的刀片临时文件中。然后像以前一样使用它。例如,如果js文件在public/js文件夹中,您可以将其添加到刀片模板中,如

<script src="{{ asset ("/js/validator.js") }}" type="text/javascript"></script>

然后创建一个js函数validateFm

<script>
function validateFm(){
  $(".passenger-validation").validate({
  rules: {
  // simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
    required: true,
    email: true
    }
}
  });

}

最后,在提交时调用函数validateFm。

<input type="submit" onClick="validateFm();">

根据需要更改js文件的名称、文件位置和验证器函数。

sr4lhrrt

sr4lhrrt2#

首先改变这个:

<form method="" route="" class="passenger-validation">

致:

<form method="" route="" class="passenger-validation" name="passenger-validation">

对于JQuery Validation,您可以坚持使用之前的方法。你只需要调用myvalidation。js文件到刀片模板像:

<script src="{{ asset ("/js/myvalidation.js") }}" type="text/javascript"></script>

并将验证规则放在那里:

$(".passenger-validation").validate({
        rules: {
           // simple rule, converted to {required:true}
           name: "required",
           // compound rule
           email: {
                  required: true,
                  email: true
                  }
        }
  });

在Laravel Blade中,您将只使用HTML 5验证规则,如:

{{ Form:: text('title', null, array('class' => 'form-control', 'required' => '')) }}

你可以用“email”或你的表单需要的东西来改变“text”。
查看更多here

rpppsulh

rpppsulh3#

对于验证,您将始终检查相同的字段,因此您应该有一些静态引用,例如,如果您可以添加id,然后仅引用id而不是名称,则会很好。
变更:$(".passenger-validation").validate({
收件人:$("#your_input_id").validate({

hpcdzsge

hpcdzsge4#

jQuery验证是在客户端验证表单输入的强大工具。在Laravel Blade视图中,您可以通过在HTML文件中包含jQuery库和jQuery验证插件来使用jQuery验证,然后将验证规则添加到表单元素中。
以下是在Laravel Blade视图中使用jQuery验证的分步指南:
1.在Blade视图中包含jQuery和jQuery Validation插件。您可以使用CDN或下载文件并将其包含在项目中:

$(document).ready(function(){
        $('#myForm').validate({
          messages: {
            username: "Please enter a valid username."
          }
        });
      });
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

    <form id="myForm">
      <input type="text" name="username" required>
      <input type="submit" value="Submit">
    </form>

1.向表单输入添加验证规则。在这个例子中,我们使用了required规则,这使得输入是必需的:

<form id="myForm">
   <input type="text" name="username" required>
   <input type="submit" value="Submit">
</form>

1.在表单上初始化jQuery Validation插件。在这个例子中,我们使用validate函数来验证表单:

<script>
   $(document).ready(function(){
     $('#myForm').validate();
   });
</script>

1.自定义验证消息。默认情况下,当不满足验证规则时,插件将显示错误消息。您可以通过将消息添加到验证函数来自定义这些消息:

<script>
   $(document).ready(function(){
     $('#myForm').validate({
       messages: {
         username: "Please enter a valid username."
       }
     });
   });
</script>

就是这样!现在,当你提交表单时,jQuery Validation插件将检查输入是否符合你设置的验证规则,如果不符合任何规则,将显示错误消息。您可以通过将验证规则添加到表单输入并相应地更新validate函数来添加更多的验证规则。
更多详情,请访问我的个人博客:https://technicalguide.net/jquery-validation-in-laravel-8/

相关问题