 GPT答： |
7i24.cn
|
界面和后台验证能力
<html>
<head>
<title>登录系统</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="layui-container">
<h1>登录系统</h1>
<hr>
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="required|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" name="password" lay-verify="required|pass" placeholder="请输入密码"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="login">登录</button>
</div>
</div>
</form>
</div>
<script src="//libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="layui.js"></script>
<script>
layui.use(['form', 'jquery'], function(){
var form = layui.form
,$ = layui.jquery;
//自定义验证
form.verify({
username: function(value){
if(value.length < 5){
//return '用户名至少得5个字符';
}
}
,pass: [/^[\S]{6,12}$/
,'密码必须6到12位，且不能出现空格']
});
form.on('submit(login)',function(data){
var data = data.field;
//登录验证
$.post("/to-login", data, function(result){
if(result.status === 'success'){
location.href = '/index'
} else {
layer.alert('用户名或者密码不正确', {icon :2 ,title :'提示'});
}
});
});
});
</script>
</body>
</html>
|
