管理员模块
登录验证
登录验证需要客户端和服务器端都必须做验证。
- 客户端验证
- 服务器端验证
客户端验证脚本
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">密 码</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();