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
1 .register {
2 width: 100%;
3 height: 100vh;
4 background: url('../staticImages/login.png');
5 background-size: 100% 100%;
6 position: relative;
7 }
8
9 .login_form {
10 width: 600px;
11 background-color: #ffffff;
12 border-radius: 10px;
13 height: 500px;
14 position: absolute;
15 left: 0;
16 right: 0;
17 top: 0;
18 bottom: 0;
19 margin: auto;
20 padding: 30px 30px 0 0px;
21 }
22 .register_title {
23 text-align: center;
24 line-height: 25px;
25 font-size: 26px;
26 color: #4a4a4a;
27 margin: 15px 0;
28 }
29 input[disabled] {
30 color:#fff;
31 opacity:1;
32 background-color: #f0f0f0;
33 }
34 .layui-form-item .layui-inline {
35 display: inline-block;
36 margin-right: 0;
37 }
38 .submit_button {
39 margin-top: 30px;
40 padding-left: 160px;
41 }
...\ No newline at end of file ...\ No newline at end of file
1 $(function () {
2 layui.use(['form'], function () {
3 var form = layui.form
4 // 校验
5 form.verify({
6 username: function (value, item) {
7 if(value=='') {
8 return '用户名不能为空';
9 }
10 //value：表单的值、item：表单的DOM对象
11 if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
12 return '用户名不能有特殊字符';
13 }
14 if (/(^\_)|(\__)|(\_+$)/.test(value)) {
15 return '用户名首尾不能出现下划线\'_\'';
16 }
17 if (/^\d+\d+\d$/.test(value)) {
18 return '用户名不能全为数字';
19 }
20
21 //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
22 if (value === 'xxx') {
23 alert('用户名不能为敏感词');
24 return true;
25 }
26 },
27 code: [
28 /^[\S]{4,6}$/
29 , '验证码必须4到6位，且不能出现空格'
30 ],
31 //我们既支持上述函数式的方式，也支持下述数组的形式
32 //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
33 pass: [
34 /^[\S]{6,12}$/
35 , '密码必须6到12位，且不能出现空格'
36 ]
37
38 });
39
40 form.on('select(type)', function (data) {
41 console.log(data);
42 })
43
44 //监听提交
45 form.on('submit(demo1)', function (data) {
46 layer.alert(JSON.stringify(data.field), {
47 title: '最终的提交信息'
48 })
49 return false;
50 });
51 })
52 })
...\ No newline at end of file ...\ 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.
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>注册</title>
7 <meta name="copyright" content=" &reg 技术支持 All Rights Reserved" />
8 <meta name="robots" content="index,follow" />
9 <meta name="googlebot" content="index,follow,archive" />
10 <link rel="alternate icon" type="image/png" href="../staticImages/logo-realestate.png">
11 <link rel='icon' href='favicon.ico' type='image/x-ico' />
12 <meta name="description" content="" />
13 <meta name="Keywords" content="" />
14 <link rel="stylesheet" type="text/css" href="../staticLib/layui/css/layui.css" />
15 <link rel="stylesheet" type="text/css" href="../staticCss/register.css" />
16 </head>
17
18 <body>
19 <div class="register">
20 <form class="layui-form login_form">
21 <div class="layui-form-item">
22 <h1 class="register_title">注册</h1>
23 </div>
24 <div class="layui-form-item">
25 <label class="layui-form-label">姓名</label>
26 <div class="layui-input-block">
27 <input type="text" name="username" required lay-verify="username" placeholder="请输入姓名" class="layui-input">
28 </div>
29 </div>
30
31 <div class="layui-form-item">
32 <label class="layui-form-label">证件种类</label>
33 <div class="layui-input-block">
34 <select name="interest" lay-filter="type">
35 <option value="0">身份证</option>
36 </select>
37 </div>
38 </div>
39
40 <div class="layui-form-item">
41 <label class="layui-form-label">身份证</label>
42 <div class="layui-input-block">
43 <input type="text" name="idcard" required lay-verify="identity" placeholder="请输入身份证" class="layui-input">
44 </div>
45 </div>
46
47 <div class="layui-form-item">
48 <label class="layui-form-label">户籍</label>
49 <div class="layui-input-block">
50 <input type="text" name="household" disabled="disabled" class="layui-input">
51 </div>
52 </div>
53 <div class="layui-form-item">
54 <label class="layui-form-label">密码</label>
55 <div class="layui-input-block">
56 <input type="password" lay-verify="pass" placeholder="请输入密码" class="layui-input">
57 </div>
58 </div>
59 <div class="layui-form-item">
60 <div class="layui-inline">
61 <label class="layui-form-label">手机号</label>
62 <div class="layui-input-block">
63 <input type="tel" maxlength="11" required lay-verify="phone" name="phone" placeholder="请输入手机号" class="layui-input">
64 </div>
65 </div>
66 <div class="layui-inline">
67 <label class="layui-form-label">验证码</label>
68 <div class="layui-input-block">
69 <input type="tel" maxlength="666" required lay-verify="code" name="code" placeholder="请输入验证码" class="layui-input">
70 </div>
71 </div>
72 </div>
73 <div class="layui-form-item">
74 <div class="layui-input-block submit_button">
75 <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">立即注册</button>
76 </div>
77 </div>
78 </form>
79 </div>
80 </body>
81
82 </html>
83 <script src="../staticLib/jquery/jquery.min.js"></script>
84 <script src="../staticLib/layui/layui.js"></script>
85 <script src="../staticJs/register.js"></script>
...\ No newline at end of file ...\ No newline at end of file