创建 register.html
parent
5c909f8626
commit
9de6a25fd8
|
|
@ -0,0 +1,91 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>注册</title>
|
||||||
|
<link href="static/css/layui.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<style>
|
||||||
|
.demo-reg-container {
|
||||||
|
width: 320px;
|
||||||
|
margin: 21px auto 0;
|
||||||
|
}
|
||||||
|
.demo-reg-item {
|
||||||
|
margin-bottom: 10px; /* 调整间距 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h1 style="text-align:center; color: #16baaa;">注册</h1>
|
||||||
|
|
||||||
|
<form class="layui-form">
|
||||||
|
<div class="demo-reg-container">
|
||||||
|
<div class="layui-form-item demo-reg-item">
|
||||||
|
<div class="layui-input-wrap">
|
||||||
|
<div class="layui-input-prefix">
|
||||||
|
<i class="layui-icon layui-icon-username"></i>
|
||||||
|
</div>
|
||||||
|
<input type="text" name="nickname" value="" lay-verify="required" placeholder="昵称"
|
||||||
|
autocomplete="off" class="layui-input" lay-affix="clear">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item demo-reg-item">
|
||||||
|
<div class="layui-input-wrap">
|
||||||
|
<div class="layui-input-prefix">
|
||||||
|
<i class="layui-icon layui-icon-cellphone"></i>
|
||||||
|
</div>
|
||||||
|
<input type="text" name="cellphone" value="" lay-verify="required|phone" placeholder="手机号"
|
||||||
|
lay-reqtext="请填写手机号" autocomplete="off" class="layui-input" id="reg-cellphone">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item demo-reg-item">
|
||||||
|
<div class="layui-input-wrap">
|
||||||
|
<div class="layui-input-prefix">
|
||||||
|
<i class="layui-icon layui-icon-password"></i>
|
||||||
|
</div>
|
||||||
|
<input type="password" name="password" value="" lay-verify="required" placeholder="密码"
|
||||||
|
autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item demo-reg-item">
|
||||||
|
<div class="layui-input-wrap">
|
||||||
|
<div class="layui-input-prefix">
|
||||||
|
<i class="layui-icon layui-icon-password"></i>
|
||||||
|
</div>
|
||||||
|
<input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword"
|
||||||
|
placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">注册</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<script src="static/layui.js"></script>
|
||||||
|
<script>
|
||||||
|
layui.use(function () {
|
||||||
|
var $ = layui.$;
|
||||||
|
var form = layui.form;
|
||||||
|
var layer = layui.layer;
|
||||||
|
var util = layui.util;
|
||||||
|
|
||||||
|
form.verify({
|
||||||
|
confirmPassword: function (value, item) {
|
||||||
|
var passwordValue = $('#reg-password').val();
|
||||||
|
if (value !== passwordValue) {
|
||||||
|
return '两次密码输入不一致';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
form.on('submit(demo-reg)', function (data) {
|
||||||
|
// AJAX 请求和其他逻辑...
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue