使用layui表单通过ajax验证不通过form表单依然会提交的问题的解决

使用layui表单通过ajax验证不通过form表单依然会提交的问题的解决

功能是新增一个数据,需要验证该数据是否已经存在.通过ajax查询后台,返回验证结果.
使用layui form.verify 自定义验证规则.出现的问题是后台返回结果正常,但即使是验证不通过,表单依然会提交.
解决方法如下:

---

HTML代码

表单其他元素使用layui预置验证规则,提交按钮使用自定义验证规则errorcodeverify

<div class="layui-form-item">
    <label class="layui-form-label">编写数据</label>
    <div class="layui-input-inline">
      <input type="text" name="errorcode" id="errorcode" onblur="verifyErrorcode()" lay-verify="required" placeholder="请输入至少5个字符" autocomplete="off"  class="layui-input">
    </div>
</div>
<div class="layui-form-item">
    <button class="layui-btn" lay-submit="" lay-verify="errorcodeverify">提交</button>
  </div>

js代码

layui.use('form', function(){
        var form = layui.form;

     //自定义验证规则
      form.verify({
          errorcodeverify: function(value){
              value=$('#errorcode').val();
              if(value.length<5){
                  return '数据至少5个字符!';
              }
              if(!verifyErrorcode()){
                  return '此数据已存在,请重新编写输入!';
              }
        },
      });

    });

    function verifyErrorcode(){
        var selectProduct=$('#productNameid').val();
        var errorCode=$('#errorcode').val();

        if(errorCode.length<5){
            layer.msg('错误码至少5个字符!');
            return false;
        }else{
            var resCode=true;
            $.ajax({
                url:'输入URL',
                type:'POST',
                dataType:'json',
                async:false,//必须是同步提交的
                data:{'productid':selectProduct,'errorcode':errorCode},
                success:function(data){
                    if(!data){
                        resCode=data;//为了防止验证不通过依然提交,要这样写
                        //return false; 不能直接return false 依然会提交

                    }
                },
                error:function(){
                    return false;
                }
            });

            if(!resCode){
                layer.msg('此数据已存在,请重新编写输入!');
                return false;
            }
        }

        return true;
    }

才开始学习使用layui,这个问题搞了半天.其实不难解决.
还发现layui信息提示中,表单验证的提示信息弹框优先级是最高的,或者说是最后弹出来的.如果把自定义验证规则errorcodeverify放在元素的input text标签里(lay-verify=”required|errorcodeverify”),在点下提交按钮后会出现layer.msg的提示信息,松开按钮后才会出现表单验证的提示信息框.
以上,记录.