PHP实战-仿爱奇艺电影网站-学习-Day02

管理员模块

登录验证

登录验证需要客户端和服务器端都必须做验证。

1. 客户端验证
2. 服务器端验证

客户端验证脚本
1-1. form脚本
需要注意的是在验证时，用了自定义的验证提示信息：lay-verify=“username”，当然相对应的也要有js脚本

<form class="layui-form" action="">

            <div class="layui-form-item" style="color:gray;">
                <h2>后台管理系统</h2>
            </div>
            <hr>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" id="username" lay-verify="username" placeholder="请输入用户名"  autocomplete="off" class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                <div class="layui-input-block">
                    <input type="password" id="password" lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                    <input type="text" id="verifycode" lay-verify="verifycode" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                </div>
                <img style="width: 150px; height: 35px; cursor: pointer;" src="{:captcha_src()}"  title="看不清楚，再换一张" id="img" onclick="reloadImg()" />
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <!--<button class="layui-btn" onclick="dologin()" >登录</button>-->
                    <button class="layui-btn" lay-submit lay-filter="btnLogin" >登录</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

1-2. form对应的js脚本

// 自定义验证
        //自定义验证规则
        form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(value.length == 0){
                    return '请输入用户名';
                }
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            }, password: function(value){
                if(value.length == 0){
                    return '请输入密码';
                }
            }, verifycode: function(value){
                if(value.length == 0){
                    return '请输入验证码';
                }
            }
            ,phone: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位，只能是数字！']
            ,email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '邮箱格式不对']
        });

        //监听提交
        form.on('submit(btnLogin)', function(data){
            layer.msg(JSON.stringify(data.field),{icon:2});
            return false;
            dologin();