css 实例:注册页面
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css">
<script src="./Jquery.js"></script>
<script src="./layui-v2.6.8/layui/layui.js"></script>
<style>
body {
background-image: url(./imgs/bg3.png);
background-size: 100%;
background-repeat: repeat;
}
.layui-form {
width: 350px;
}
.layui-input-block {
margin-left: 0;
}
.layui-form-item .layui-input-inline {
width: 230px;
}
.layui-form {
padding: 10px 20px;
border: 2px solid rgba(253, 253, 253, 0.062);
border-radius: 18px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 16px 9px rgba(27, 27, 27, 0.07);
}
h2 {
padding: 20px;
font-weight: 600;
text-align: center;
}
#yzmDiv {
margin-bottom: 0;
margin-right: 0;
}
.layui-input,
.layui-select,
.layui-textarea {
background: rgba(255, 255, 255, 0.062);
border-color: rgba(255, 255, 255, 0.74);
border-radius: 4px;
}
.layui-form {
background-color: #b0d1cf21;
}
</style>
</head>
<body>
<form class="layui-form" action="">
<i class="layui-icon layui-icon-wifi" style="font-size: 30px; color: #1E9FFF;"></i>
<h2>欢迎来到注册页面</h2>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="text" name="phone" lay-verify="phone" autocomplete="off" placeholder="手机"
value="13784116427" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="input-block">
<div class="layui-inline" id="yzmDiv">
<input type="text" name="code" lay-verify="required" autocomplete="off" placeholder="验证码" value=""
class="layui-input layui-input-inline">
<button type="button" id="yzm" tabindex='-1'
class="layui-btn layui-btn-primary layui-border-green ">获取验证码</button>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="text" name="email" lay-verify="email" autocomplete="off" placeholder="邮箱"
value="1810763210@qq.com" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="text" name="username" lay-verify="required" autocomplete="off" placeholder="用户名"
value="administrator" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="password" name="password" lay-verify="required" autocomplete="off" placeholder="密码"
value="admin" class="layui-input">
</div>
</div>
<div class="layui-form-item" pane="">
<div class="layui-input-block">
<input type="checkbox" name="协议是否同意" lay-skin="primary" checked title="同意用户协议">
</div>
</div>
<div class="layui-form-item">
<button type="button" class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="Emo">注册</button>
</div>
</form>
</body>
<script>
layui.use('form', function () {
this.form.on('submit(Emo)', function (data) {
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
data.field = JSON.stringify({
"user":
data.field
})
// return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
$.ajax({
type: "POST",
url: "http://8.140.34.53:3001/api/users",
contentType: "application/json", //必须这样写
dataType: "json",
data: data.field,//schoolList是你要提交是json字符串
success: function (res) {
var jeep = function () {
location.href = './logon.html'
}
setInterval(jeep, 2000)
return layer.msg('注册成功！正在跳转中···')
},
error: function (res) {
console.log(res)
}
})
});
})
$('#yzm').on('click', function () {
var phone = $('').val()
if (!phone.length) {
return layer.msg('请输入手机号');
}
var reg = /^(?:(?:\+|00)86)?1\d{9}$/
if (!reg.test(phone)) {
return layer.msg('请输入正确手机号');
} else {
phone = JSON.stringify({
user: {
phone: phone
}
})
$.ajax({
type: "POST",
url: "http://8.140.34.53:3001/api/message",
contentType: "application/json", //必须这样写
dataType: "json",
data: phone,//schoolList是你要提交是json字符串
success: function () {
return layer.msg('发送验证码成功')
alert(123)
},
error: function (res) {
var msgg = res.responseJSON.errors.msg
if (msgg == '手机号已存在') {
return layer.msg(msgg)
}
}
})
}
})
</script>
</html>
页:
[1]