layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)

“layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)”主要是在弹出框中进行数据验证，如果数据不合法，则需要弹出提示框提醒用户，让用户重新输入正确的数据。

以下是这个攻略的完整步骤：

Step 1：创建一个弹出框

首先需要引入Layer插件，并创建一个弹出框。具体代码如下：

// 引入Layer
<script src="http://cdn.bootcss.com/layer/2.3/layer.js"></script>

// 创建一个弹出框
layer.open({
  type: 1,
  title: '请输入信息',
  content: '<div>姓名：<input type="text" id="name"></div>' +
           '<div>年龄：<input type="text" id="age"></div>' +
           '<div>地址：<input type="text" id="address"></div>' +
           '<button id="submit">提交</button>',
  area: ['500px', '300px']
});

Step 2：数据验证

接着需要在“提交”按钮中添加点击事件，获取用户输入的数据并进行验证。如果数据不合法，则需要弹出提示框提醒用户，让用户重新输入正确的数据。具体代码如下：

$('#submit').click(function () {
  var name = $('#name').val();
  var age = $('#age').val();
  var address = $('#address').val();

  // 对数据进行验证
  var isError = false;
  if (!name) {
    layer.msg('姓名不能为空');
    isError = true;
  }
  if (!age) {
    layer.msg('年龄不能为空');
    isError = true;
  }
  if (!address) {
    layer.msg('地址不能为空');
    isError = true;
  }

  if (isError) {
    return false;
  }
});

在这段代码中，我们获取了用户输入的姓名、年龄和地址，并分别进行了非空验证。如果输入的数据不合法，则会弹出提示框提醒用户。这里使用了Layer提供的layer.msg方法来弹出提示框。

Step 3：弹出第二个提示框

如果用户输入的数据都合法，则可以进行提交操作。但在提交之前，我们还可以添加一个确认框，让用户确认是否真的要提交数据。如果用户点击了确定，则提交数据；如果点击了取消，则不提交数据。具体代码如下：

$('#submit').click(function () {
  var name = $('#name').val();
  var age = $('#age').val();
  var address = $('#address').val();

  // 对数据进行验证
  var isError = false;
  if (!name) {
    layer.msg('姓名不能为空');
    isError = true;
  }
  if (!age) {
    layer.msg('年龄不能为空');
    isError = true;
  }
  if (!address) {
    layer.msg('地址不能为空');
    isError = true;
  }

  if (isError) {
    return false;
  }

  // 弹出确认框
  layer.confirm('确定要提交数据吗？', { icon: 3, title: '提示' }, function (index) {
    // 提交数据
    layer.msg('提交成功');
    layer.closeAll();
  }, function () {
    // 取消操作
    layer.msg('已取消操作');
  });
});

这段代码中，我们使用了Layer提供的layer.confirm方法来创建一个确认框。如果用户点击了确定，则提交数据，并提示提交成功；如果点击了取消，则只弹出一个消息框提示已取消操作。

示例1：使用Layer的form组件进行表单验证

另外，为了方便进行表单验证和提交操作，我们还可以使用Layer提供的form组件来简化代码。具体代码如下：

layer.open({
  type: 1,
  title: '请输入信息',
  content: '<form class="layui-form">' +
             '<div class="layui-form-item">' +
               '<label class="layui-form-label">姓名</label>' +
               '<div class="layui-input-block">' +
                 '<input type="text" name="name" lay-verify="required" 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="age" lay-verify="required" 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="address" lay-verify="required" autocomplete="off" placeholder="请输入地址" class="layui-input">' +
               '</div>' +
             '</div>' +
           '</form>',
  area: ['500px', '300px'],
  btn: ['提交', '取消'],
  yes: function (index, layero) {
    var name = $('input[name="name"]').val();
    var age = $('input[name="age"]').val();
    var address = $('input[name="address"]').val();

    // 表单验证
    var form = layui.form;
    form.verify({
      required: function (value, item) {
        if (!value) {
          return '必填项不能为空';
        }
      }
    });

    var isFormValid = form.verify();

    if (isFormValid) {
      // 弹出确认框
      layer.confirm('确定要提交数据吗？', { icon: 3, title: '提示' }, function (index) {
        // 提交数据
        layer.msg('提交成功');
        layer.closeAll();
      }, function () {
        // 取消操作
        layer.msg('已取消操作');
      });
    }
  },
  btn2: function (index, layero) {
    // 取消操作
    layer.msg('已取消操作');
  }
});

在这个示例中，我们使用了Layer提供的form组件来简化表单验证和布局。lay-verify属性用于指定表单项的验证规则，form.verify方法用于定义验证规则。如果表单验证通过，则弹出确认框；否则弹出提示框提示用户输入不合法。

示例2：使用Layer的msg组件进行消息提示

除了在确认框中使用layer.msg方法进行消息提示外，我们还可以在其他地方使用layer.msg方法来进行消息提示。具体代码如下：

// 对数据进行验证
var isError = false;
if (!name) {
  layer.msg('姓名不能为空');
  isError = true;
}
if (!age) {
  layer.msg('年龄不能为空');
  isError = true;
}
if (!address) {
  layer.msg('地址不能为空');
  isError = true;
}

if (isError) {
  return false;
}

// 提交数据
layer.msg('提交成功', { icon: 1, time: 2000 }, function () {
  layer.closeAll();
});

这个示例中，我们在两个地方使用了layer.msg方法。第一个是在数据验证失败时进行提示，第二个是在提交数据成功时进行提示。可以看到，layer.msg方法很方便地就可以进行消息提示，而且还可以添加图标和自动关闭功能。