layui弹出层的表单验证

layui弹出层form表单自带的验证不执行

其实没有执行那个form的那个submit方法没有执行

废话少说放代码

这是官方的弹出层

官方form表单例子

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">单行输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">验证必填项</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">验证手机</label>
      <div class="layui-input-inline">
        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">验证邮箱</label>
      <div class="layui-input-inline">
        <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
</form>

js弹出层的例子

layer.open({
  type: 1,
  title: false,
  closeBtn: 0,
  btn: ['提交', '取消'],
  shadeClose: true,
  skin: 'yourclass',
  content: '#layui-form'
});

接下来如何让弹出层执行form验证规则

因为我们点击弹出层，就要执行弹出层的回调方法，
在回调 success 方法中把 弹出层的 btn 添加submit。 让其点击按钮时 执行form提交功能

layer.open({
  type: 1,
  title: false,
  closeBtn: 0,
  btn: ['提交', '取消'],
  shadeClose: true,
  skin: 'yourclass',
  content: '#layui-form'，
  success: function(layero, index){
       // 添加form标识
       layero.addClass('layui-form');
       // 将保存按钮改变成提交按钮
       layero.find('.layui-layer-btn0').attr({
           'lay-filter': '事件名',
           'lay-submit': ''
       });
       form.render();
  }

});

现在弹出层就有了可以验证表单的功能了

但是这个提交并不完整依旧有问题，只是部分验证有用，表单验证没有验证数据直接提交到后端去，接下如何如何优化呢？

找到btn 确认按钮的回调方法 把form方法直接写在 yse 的回调方法中去

layer.open({
  type: 1,
  title: false,
  closeBtn: 0,
  btn: ['提交', '取消'],
  shadeClose: true,
  skin: 'yourclass',
  content: '#layui-form'，
  success: function(layero, index){
       // 添加form标识
       layero.addClass('layui-form');
       // 将保存按钮改变成提交按钮
       layero.find('.layui-layer-btn0').attr({
           'lay-filter': '事件名',
           'lay-submit': ''
       });
       form.render();
  }，
  yes: function(index, layero){
    form.on('submit(事件名)', function(data){
   
}
  }

});```

这样才算完美的