创建 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