php 引用layer插件做登录，注册表单

这里是layer 插件提交表单的前端代码，希望能够分享给做后台想用这个插件的朋友一点儿帮助，主要还是ajax提交模式，只是layer自己封装了

注意表单提交，数据和验证的地方即可，还有就是layer表单class得和文档一致，具体参考文档

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link type="text/css" rel="stylesheet" href="__STATIC__/layer/css/layui.css" />
    <link type="text/css" rel="stylesheet" href="__CSS__/login.css" />

    <style>
        body{padding: 10px;}
    </style>
</head>
<body>

<form class="layui-form layui-form-pane1" action="{:U('Public/register')}" method="post">
    <div class="login-page">
        <div class="form-center">
            <label><p class="title">会员注册</p></label>

            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="username" lay-verify="title" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="email" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-inline1">
                    <input type="text" name="verify" lay-verify="code" id="code" placeholder="请输入验证码" autocomplete="off" class="layui-input code-input">
                    <img src="{:U('Public/verify')}" id="verify" class="reloadverify" alt="验证码" />
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn " lay-submit lay-filter="*">注册</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </div>
</form>


<script type="text/javascript" src="__JS__/jquery-1.8.0.js"></script>
<!-- layer -->
<script type="text/javascript" src="__STATIC__/layer/layui.js"></script>

<script type="text/javascript">
    layui.use('form', function(){
        var form = layui.form();

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '用户名也太短了吧';
                }
            }
            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
            ,code: function (value) {
                if(value == ''){
                    return '验证不能为空!';
                }
            }
            ,email:function (value) {
                if(value == ''){
                    return '邮箱不能为空!';
                }
            }
        });

        //监听提交
        form.on('submit(*)', function(data){
            console.log(data.field);
            var self = $(this);
            $.post(self.attr("action"), {"username":data.field.username,"password":data.field.password,"verify":data.field.verify,"email":data.field.email}, success, "json");
            return false;

            function success(data){
                console.log(data);
                if(data.status){
                    layer.load(3);
                    setTimeout(function () {
                        window.location.href = data.url;
                    },1000);
                } else {
                    layer.alert(data.info, {
                        icon: 2
                        ,shade: 0.7
                    });
                    //刷新验证码
                    $(".reloadverify").click();
                }
            }
        });

    });
</script>
<!--验证码刷新-->
<script type="text/javascript">
    $(function(){
        var verifyimg = $("#verify").attr("src");
        $(".reloadverify").click(function(){
            if( verifyimg.indexOf('?')>0){
                $("#verify").attr("src", verifyimg+'&random='+Math.random());
            }else{
                $("#verify").attr("src", verifyimg.replace(/\?.*$/,'')+'?'+Math.random());
            }
        });
    });
</script>
</body>
</html>

注意：别忘记引入layer插件的css和js，还有Jquery。后台接受数据就不再详续，自己脑部即可，呵呵……
对了，这是在tp框架下实现的，看验证码就知道了，不罗嗦了，希望能帮助到初学者，对layer感兴趣的朋友。
由于lay-submit,就是ajax提交，不需要单独设置ajax提交，否则会冲突，最明显的地方就是验证码，怎么也验证不了，我开始找了好久都不知道bug在哪里，当然我是个layer爱好者，也是刚接触的菜鸟，大神就不会看这些了……
posted @ 2017-06-21 20:27  上善若水000  阅读(473)  评论(0)    收藏  举报