layui的表单提交以及验证和修改弹框的实例

<div class="layui-form">
 <input type="text" class="txt" name="newname" lay-verify="newname" lay-vertype="tips" placeholder="请输入姓名">
 <input type="text" class="txt" name="newcard" lay-verify="newcard" lay-vertype="tips" placeholder="请输入身份证">
 <input type="text" class="txt" name="newphone" lay-verify="newphone" lay-vertype="tips" placeholder="请输入电话号码">
 <input type="text" class="txt" name="newemail" lay-verify="newemail" lay-vertype="tips" placeholder="请输入电子邮箱">
 <button class="btnstyle" lay-submit lay-filter="btn">提交</button>
</div>

<script type="text/javascript">
  layui.use(['jquery','form','layer'],function () {
   var $ = layui.jquery;
   var layer = layui.layer;
   var form = layui.form;
    // 验证
    form.verify({
      newname: [/\s/,'姓名不能为空' ] ,
      newcard: function (value) {
        if(!/\s/.test(value)){
          $("input[name='newcard']").focus();
          return '原身份证不能为空';
        }
        if(!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|x|x)$)/.test(value)){
          $("input[name='newcard']").focus();
          return '原身份证格式有误';
        }
      },
      newphone: function (value) {
        if(!/\s/.test(value)){
          $("input[name='newphone']").focus();
          return '电话号码不能为空';
        }
        if(!/^1[34578]\d{9}$/.test(value)){
          $("input[name='newphone']").focus();
          return '电话号码格式有误';
        }
      },
      newemail: function (value) {
        $("input[name='newemail']").focus();
        if(!/\s/.test(value)){
          $("input[name='newemail']").focus();
          return '电子邮件不能为空';
        }
        if(!/^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/.test(value)){
          $("input[name='newemail']").focus();
          return '电子邮件格式有误';
        }
      },
    });
    // 验证成功后执行操作
    form.on('submit(btn)',function () {
      console.log('验证成功')
    })

  })
</script>