Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
a53e5de7 by 任超
Options

style:注册

1 parent 560c8461
Inline Side-by-side
Showing 6 changed files with 178 additions and 0 deletions
.register {
width: 100%;
height: 100vh;
background: url('../staticImages/login.png');
background-size: 100% 100%;
position: relative;
}
.login_form {
width: 600px;
background-color: #ffffff;
border-radius: 10px;
height: 500px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
padding: 30px 30px 0 0px;
}
.register_title {
text-align: center;
line-height: 25px;
font-size: 26px;
color: #4a4a4a;
margin: 15px 0;
}
input[disabled] {
color:#fff;
opacity:1;
background-color: #f0f0f0;
}
.layui-form-item .layui-inline {
display: inline-block;
margin-right: 0;
}
.submit_button {
margin-top: 30px;
padding-left: 160px;
}
\ No newline at end of file
$(function () {
layui.use(['form'], function () {
var form = layui.form
// 校验
form.verify({
username: function (value, item) {
if(value=='') {
return '用户名不能为空';
}
//value：表单的值、item：表单的DOM对象
if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
return '用户名不能有特殊字符';
}
if (/(^\_)|(\__)|(\_+$)/.test(value)) {
return '用户名首尾不能出现下划线\'_\'';
}
if (/^\d+\d+\d$/.test(value)) {
return '用户名不能全为数字';
}
//如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
if (value === 'xxx') {
alert('用户名不能为敏感词');
return true;
}
},
code: [
/^[\S]{4,6}$/
, '验证码必须4到6位，且不能出现空格'
],
//我们既支持上述函数式的方式，也支持下述数组的形式
//数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
pass: [
/^[\S]{6,12}$/
, '密码必须6到12位，且不能出现空格'
]
});
form.on('select(type)', function (data) {
console.log(data);
})
//监听提交
form.on('submit(demo1)', function (data) {
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
});
})
})
\ No newline at end of file
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<meta name="copyright" content=" &reg 技术支持 All Rights Reserved" />
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow,archive" />
<link rel="alternate icon" type="image/png" href="../staticImages/logo-realestate.png">
<link rel='icon' href='favicon.ico' type='image/x-ico' />
<meta name="description" content="" />
<meta name="Keywords" content="" />
<link rel="stylesheet" type="text/css" href="../staticLib/layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="../staticCss/register.css" />
</head>
<body>
<div class="register">
<form class="layui-form login_form">
<div class="layui-form-item">
<h1 class="register_title">注册</h1>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="username" required lay-verify="username" placeholder="请输入姓名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">证件种类</label>
<div class="layui-input-block">
<select name="interest" lay-filter="type">
<option value="0">身份证</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">身份证</label>
<div class="layui-input-block">
<input type="text" name="idcard" required lay-verify="identity" placeholder="请输入身份证" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">户籍</label>
<div class="layui-input-block">
<input type="text" name="household" disabled="disabled" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" lay-verify="pass" placeholder="请输入密码" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">手机号</label>
<div class="layui-input-block">
<input type="tel" maxlength="11" required lay-verify="phone" name="phone" placeholder="请输入手机号" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">验证码</label>
<div class="layui-input-block">
<input type="tel" maxlength="666" required lay-verify="code" name="code" placeholder="请输入验证码" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block submit_button">
<button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">立即注册</button>
</div>
</div>
</form>
</div>
</body>
</html>
<script src="../staticLib/jquery/jquery.min.js"></script>
<script src="../staticLib/layui/layui.js"></script>
<script src="../staticJs/register.js"></script>
\ No newline at end of file