验证输入字段中的值是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>

update 验证后显示此模式

<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或空的，即使单击按钮，也可以处理数据。有没有办法而不发挥功能的方法？

这里是：

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

相关内容

最新更新

热门标签：