layui 表单ajax验证无效的解决方案

Posted 2023-05-14 djiz

/*
         检查手机号格式，手机号已存在则不合法
         param：mobile-手机号
         return：true-手机号合法，string-不合法返提示
         error：layer.alert()
         */
        chkMobile: function(mobile) 
            var _this = this;
            $res = _this.chkMobFormat(mobile);
            if ($res !== true) return $res;
            $restr="";
            $.ajax(
                type: \'POST\',
                url: _this.check_url,
                data: 
                    mobile: mobile
                ,
                async: false, //改为同步请求
                dataType: "json",
                success: function(res) 
                    if (res.code === 1) 
                        //return true;
                     else 
                        $restr="手机号已经存在";
                    
                ,
                error: function(XMLHttpRequest, textStatus, errorThrown) 
                    _this.showMsg(\'操作失败！！！\' + XMLHttpRequest.status + "|" + XMLHttpRequest.readyState + "|" + textStatus)
                
            );
            return $restr; //ajax验证，需要async: false ，并且把return翻到ajax外。
        ,

 

layui弹出表单提交后，界面model验证部分起作用

情况1----input属性中type=submit时验证都可以起作用，但是弹出层表单的返回值不能获取，所以用ajax二次提交后会出现重复添加数据的问题

情况2----input属性中type=button时验证部分起作用，其他正常，暂时看到的不起作用是required属性不起作用，正则表达式可以完美提醒

初步判断原因可能是用ajax+button表单并未完成提交，model的required属性验证必须在提交后台控制器后刷新提交页面才会出现，但是button方式并刷新界面，正则表达式的就算不刷新界面，input失去焦点时也会判断

问题找到了那就开始解决，既然没有提交导致的验证失效那就提交一次

如下代码，控制器设置为返回ActionResult，如果验证通过则直接添加返回Json对象执行success命令。如果后台验证ModelState.IsValid未通过则返回View对象执行error命令。在error命令中提交表单，则有返回命令，完美解决问题。

 $("#mysubmit").click(function () {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            $.ajax({
                url: "/scjhtj/GC_info/",
                type: "post",
                dataType: "json",
                data: $("#form1").serialize(),
                success: function (data) {
                    if (data.Code == 0) {
                        parent.layer.close(index); //再执行关闭
                        parent.refreshProj(0, null);//0添加，1编辑，2查询
                        parent.layer.msg(data.Msg), { time: 500 };
                    } 
                },
                error: function (data) {
                    $("#form1").submit();
                }
            })