表单验证提交layer插件闪退

项目场景：

表单提交验证

---

问题描述：

问题：表单提交调用layer.confirm闪退

<div class="main">
                <form method="post" action="controller/topicController.jsp?action=addTopic"  onsubmit="return check()" class="edit">
                    <div>
                        <input type="text" name="tname" class="tname"/>
                    </div>
                    <div>
                        <button type="submit" class="add">提交</button>
                    </div>
                </form>
            </div>

<script>
           function check(){
               var tName = $('.tname').val();
                   layer.confirm('你确定要添加吗？', {
                       btn: ['确定', '取消']
                   }, function(){
                       $.getJSON('controller/topicController.jsp?action=exitsTopic&tname='+tName,function (result) {
                           console.log(result);
                           if(result.flag){
                               layer.msg("添加成功");s
                               return true;
                           }else{
                               layer.msg("该新闻分类已存在，不能添加");
                               return false;
                               }
                       });
                   }, function(index){
                       layer.msg("取消");
					   return false;
                   });
            }
    </script>

---

原因分析：

首先我们要弄清楚表单提交。 点击submit提交事件后才会触发onsubmit事件，通过返回boolean值来判断页面是否跳转。 check方法返回一个boolean值，当点击submit会调用check函数。 check函数里通过弹框验证来确定返回值。这一块逻辑没有问题。为什么layer.confirm弹框出现就直接闪退了呢？ 这里就要考虑到异步请求啦！

<script>
           function check(){
               var tName = $('.tname').val();
                   layer.confirm('你确定要添加吗？', {
                       btn: ['确定', '取消']
                   }, function(){
                       $.getJSON('controller/topicController.jsp?action=exitsTopic&tname='+tName,function (result) {
                       //这是一个异步请求，还没请求完就直接return了，直接跳转页面了，下面这些判断都没有执行。所以check函数调用完了这个请求还没执行。自然layer.confirm还没执行完就直接跳转页面了。
                           if(result.flag){
                               layer.msg("添加成功");s
                               return true;
                           }else{
                               layer.msg("该新闻分类已存在，不能添加");
                               return false;
                               }
                       });
                   }, function(index){
                       layer.msg("取消");
					   return false;
                   });
            }
    </script>

解决方案

这是一个异步请求的问题。我们可以换一种思路。

<div class="main">
                <form method="post" action="controller/topicController.jsp?action=addTopic"  class="edit">
                    <div>
                        <input type="text" name="tname" class="tname"/>
                    </div>
                    <div>
                        <button type="button" class="add">提交</button>
                    </div>
                </form>
    </div>

提交按钮点击事件不为submit，通过点击事件来调用check方法

<script src="js/jquery-3.4.1.min.js"></script>
    <script src="layer-v3.1.1/layer/layer.js"></script>
    <script>
           $(function () {
               $('.add').on('click',function () {
                   check();
               })
           })
           function check(){
               var tName = $('.tname').val();
                   layer.confirm('你确定要添加吗？', {
                       btn: ['确定', '取消']
                   }, function(){
                       $.getJSON('controller/topicController.jsp?action=exitsTopic&tname='+tName,function (result) {
                           console.log(result);
                           if(result.flag){
                               layer.msg("添加成功");
                               $('.edit').submit();
                           }else{
                               layer.msg("该新闻分类已存在，不能添加");

                           }
                       });
                   }, function(index){
                       layer.msg("取消");

                   });
            }
    </script>

异步请求判断添加成功后再调用表单的提交事件 $('.edit').submit()让表单实现页面跳转。此时就不需要onsubmit进行表单验证了。我们是先验证完了后再执行的提交表单事件。而第一种方法是先点击表单提交事件然后验证，但是里面有异步请求。这样先异步请求完再提交表单就不会出现问题了。 也可以采用第一种方法。但是得解决异步请求的问题。第二种相对简单些。