时间戳

首页 > 解决方案 > 验证输入字段中的值是否是 Blade.php 中的 Instagram URL

php - 验证输入字段中的值是否是 Blade.php 中的 Instagram URL

问题描述

我blade.php在我的开发中使用，我担心输入是否是有效的 instagram url。我试过这样做：

<form class="search_form" id="apply" action=" method="post">
    @csrf
    <label>
         <input type="url" pattern="https?://.+" required id="instagram" value="" placeholder="Instagram Post URL (Paste Here)">
    </label>
    <div class="flex_box">
         <button class="btn pink applyfnsh_btn" type="button" id="save">Confirm</button>
    </div>
</form>

更新此模式在验证后显示

<div class="applyfnsh_modal">
    <div class="applyfnsh_box">
      <div class="modal_close">
         <img src="../../assets/images/close.png" alt="close">
       </div>
          <p>Success</p>
    </div>
</div>

modal.js

$(".applyfnsh_btn").on("click", function(){
    $(".apply_modal").toggleClass("open");
    $(".applyfnsh_modal").toggleClass("open");
});
$(".applyfnsh_modal").on('click touchend', function(event) {
    if (!$(event.target).closest('.applyfnsh_box').length) {
    $(".applyfnsh_modal").toggleClass("open");
    $("body").toggleClass("open");
    }
});

位置在这里

<script src="{{ url('/assets/js/modal.js') }}"></script>

顺便说一句，我正在使用 ajax 将数据保存到 db，这样该页面就不会刷新。

<script>
    $(document).on("click", "#save", function() {
        $.ajaxSetup({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
        });
        $.ajax({
            type: "post",
            url: '/contest/apply/{{ $contest->id }}',
            data: {url : $("#instagram").val(), user_id: 1, contest_id: {{ $contest->id }} },
            success: function(store) {

            },
            error: function() {

            }
        });
    });
  </script>

这不起作用，甚至在单击按钮时处理数据，即使输入不是 url 或空的也是如此。有没有办法在不创建函数的情况下做到这一点？

标签： phpvalidationlaravel-blade

解决方案

这里是 ：

$(document).on("click", "#save", function() {
    
         var instagramLink = $('#instagramLink').val();
    var pattern = new RegExp('https://www.instagram.com/p/(.+?)', 'g');
    if((instagramLink != undefined || instagramLink != '') &&  instagramLink.match(pattern)){
    
       alert(instagramLink + 'is valid');
        /*
        $.ajax({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "post",
            url: '/contest/apply/{{ $contest->id }}',
            data: {url :instagramLink, user_id: 1, contest_id: {{ $contest->id }} },
            success: function(store) {

            },
            error: function() {

            }
        });
        */
    }else{
       alert('Please Enter Valid Instagram Link');
       $('#instagramLink').val('');
        // show modal
       $('.applyfnsh_modal').modal('open');

    }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    
<form class="search_form" id="apply" action="" method="post">
   
    <label>
         <input type="url" required id="instagramLink" value="" placeholder="Instagram Post URL (Paste Here)" class="form-control"/>
    </label>
  
    <div class="flex_box">
         <button class="btn btn-primary" type="button" id="save">Confirm</button>
    </div>
    
</form>

</body>
</html>

update-2 ：删除现有脚本：

$(".applyfnsh_btn").on("click", function(){
    $(".apply_modal").toggleClass("open");
    $(".applyfnsh_modal").toggleClass("open");
});
$(".applyfnsh_modal").on('click touchend', function(event) {
    if (!$(event.target).closest('.applyfnsh_box').length) {
    $(".applyfnsh_modal").toggleClass("open");
    $("body").toggleClass("open");
    }
});

当需要显示时使用这种方式显示模态：

打开模式： $('.applyfnsh_modal').addClass('open');

关闭模式： $('.applyfnsh_modal').removeClass('open');

所以

 if (validation successfull){
      // submit form using AJAX
   }else{
      $('.applyfnsh_modal').addClass('open');
   }

还创建一个函数来关闭模式：

$(document).on('click','.modal_close',function(){
     $('.applyfnsh_modal').removeClass('open');
});

推荐阅读