layer的使用官方演示与讲解(jQuery弹出层插件) ||表单验证错误提示

概要

layer是一款近年来备受青睐的web弹层组件，这完全得益于她全方位的解决方案。她致力于服务各个水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer。layer兼容了包括IE6在内的所有主流浏览器。 她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，皆广受欢迎。当然，这种“王婆卖瓜”的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。

文档与演示 （所有效果都在这里）

愿景

layer致力于打造国内最盛行的弹层组件，为web开发提供强劲动力。

现状

因着数年的坚持维护，截至到2017年03月21日，已运用在超过30万家Web平台，其中不乏众多知名大型网站。目前layer已经成为国内乃至全世界最多人使用的Web弹层解决方案，并且她仍在与Layui一并高速发展。

相关

官网、社区

也支持手机版

https://layer.layui.com/mobile/

如何使用

先下载下来源码

下载地址

https://github.com/sentsin/layer

放入到自己的js中

D:\devlop\phpStudy\PHPTutorial\WWW\mall\static\js

导入一次 便可永久在js中使用

<script src="./static/js/jquery-1.10.2.min.js"></script>
<script src="./static/js/layer/layer.js"></script>

 

<script>
    $(function () {
        $('#test').click(function () {
            //配置一个透明的询问框
            layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
                time: 20000, //20s后自动关闭
                btn: ['明白了', '知道了', '哦']
            });


        });
</script>

表单验证错误提示

简写

layer.tips("商品名称应该再1-500字符之间",'#name',{time:2000,tips:2});

以下是项目中使用到的地方 

 <form action="publish.php" method="post" name="publish-form" id="publish-form" enctype="multipart/form-data">
                <div class="additem">
                    <label id="for-name">商品名称</label><input type="text" name="name" id="name" placeholder="请输入商品名称">
                </div>
                <div class="additem">
                    <label id="for-price">商品价格</label><input type="text" name="price" id="price" placeholder="请输入商品价格"> 元
                </div>
                <div class="additem">
<!--                    使用accept html5属性 声明仅接受png gif jpeg格式的文件-->
                    <label id="for-file">商品缩略图</label><input type="file" accept="image/png,image/gif,image/jpeg,image/jpg" id="file" name="file">
                </div>
                <div class="additem textwrap">
                    <label class="ptop" id="for-des">商品简介</label><textarea id="des" name="des" placeholder="请输入商品简洁"></textarea>
                </div>
                <div class="additem textwrap">
                    <label class="ptop" id="for-content">商品详情</label>
                    <div class="container" style="margin-left: 120px">
                        <textarea id="content" name="content"></textarea>
                    </div>
                </div>
                <button type="submit">发布</button>
            </form>

<script>
    $(function () {


        $('#publish-form').submit(function () {
            var name=$('#name').val();
            var price=$('#price').val();
            var file=$('#file').val();
            var content=$('#content').val();
            var des=$('#des').val();
            if(name.length<=0||name.length>500){
                layer.tips("商品名称应该再1-500字符之间",'#name',{time:2000,tips:2});
                $('#name').focus();
                return false;
            }
          if(!/^[1-9]\d{0,8}$/.test(price)){
              layer.tips("请输入最多9位正整数",'#price',{time:2000,tips:2});
              $('#price').focus();
              return false;
          }
          if(file==""||file.length<=0){
              layer.tips("请选择图片",'#file',{time:2000,tip:2});
              $('#file').focus();
              return false;
          }
            if(des.length<=0||des.length>100){
                layer.tips("商品简介应该再1-100字符之间",'#des',{time:2000,tips:2});
                $('#des').focus();
                return false;
            }
            if(content.length<=0){
                layer.tips("请输入商品详情",'#container',{time:2000,tips:2});
                $('#content').focus();
                return false;
            }
            return true;



        });
    })
</script>