1 <!--
2 * @Description:
3 * @Version: 2.0
4 * @Autor: hcchen3
5 * @Date: 2020-04-22 15:07:24
6 * @LastEditors: hcchen3
7 * @LastEditTime: 2020-04-22 17:30:48
8 -->
9 <!DOCTYPE html>
10 <html lang="en">
11
12 <head>
13 <meta charset="UTF-8">
14 <meta name="viewport" content="width=device-width, initial-scale=1.0">
15 <title>Document</title>
16 <link rel="stylesheet" href="./static/js/layui/css/layui.css">
17 <link rel="stylesheet" href="./static/css/authentication.css">
18 </head>
19
20 <body>
21 <div>
22 桌面-内容
23 </div>
24 <div id="layerAuth">
25 <div class="form-box">
26 <div class="form-tips"><i class="color-tips layui-icon layui-icon-about"></i> 系统检测到您还未进行实名认证，请填写并确认您的实名信息。
27 </div>
28 <form class="layui-form" action="">
29 <div class="layui-form-item">
30 <label class="layui-form-label"><i class="tip-required">*</i> 真实姓名</label>
31 <div class="layui-input-block">
32 <input type="text" name="name" required lay-verify="required" placeholder="请输入真实姓名"
33 autocomplete="off" class="layui-input">
34 </div>
35 </div>
36 <div class="layui-form-item">
37 <label class="layui-form-label"><i class="tip-required">*</i> 学校</label>
38 <div class="layui-input-block">
39 <input type="password" name="schoolName" required lay-verify="required" placeholder="请输入学校名称"
40 autocomplete="off" class="layui-input">
41 </div>
42 </div>
43 <div class="layui-form-item">
44 <label class="layui-form-label">手机号</label>
45 <div class="layui-input-block">
46 <input type="password" name="phone" lay-verify="phone" placeholder="请输入手机号"
47 autocomplete="off" class="layui-input">
48 </div>
49 </div>
50 <div class="layui-form-item">
51 <label class="layui-form-label"><i class="tip-required">*</i> 证件类型</label>
52 <div class="layui-input-block">
53 <select name="cardType" lay-verify="required">
54 <option value=""></option>
55 <option value="0">身份证</option>
56 <option value="1">签证</option>
57 </select>
58 </div>
59 </div>
60 <div class="layui-form-item">
61 <label class="layui-form-label"><i class="tip-required">*</i> 证件号</label>
62 <div class="layui-input-block">
63 <input type="text" name="cardNum" required lay-verify="required" placeholder="请输入证件号"
64 autocomplete="off" class="layui-input">
65 </div>
66 </div>
67 <div class="layui-form-item">
68 <label class="layui-form-label">继续教育ID</label>
69 <div class="layui-input-block">
70 <input type="text" name="eduCode" placeholder="请输入继续教育ID"
71 autocomplete="off" class="layui-input">
72 </div>
73 </div>
74 <div class="tr">
75 <button type="reset" id="cancelAuth" class="layui-btn layui-btn-primary">跳过</button>
76 <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">确定</button>
77 </div>
78 </form>
79 </div>
80 </div>
81 </body>
82 <!-- 身份验证弹窗 专属js在这里处理-->
83 <script src="./static/js/jquery-1.9.1.js"></script>
84 <script src="./static/js/layui/layui.js"></script>
85 <script>
86 layui.use(['layer', 'form'], function () {
87 var layer = layui.layer,
88 form = layui.form;
89 //执行一个laypage实例
90 var layer1 = layer.open({
91 title: '实名认证',
92 type: 1,
93 closeBtn: 1,
94 skin: 'layui-layer-demo', //样式类名
95 anim: 2,
96 shadeClose: false, //开启遮罩关闭
97 area: ['520px', 'auto'],
98 content: $('#layerAuth')
99 });
100 //自定义验证规则
101 form.verify({
102 name: function (value) {
103 if (value.trim().length == 0) {
104 return '请输入真实姓名！';
105 }
106 }
107 // , schoolName: function (value) {
108 // if (value.length < 4) {
109 // return '请输入至少4位的用户名';
110 // }
111 // }
112 , phone: function(value){
113 if(value.trim().length>0){
114 var rule = /^1\d{10}$/;
115 if(!rule.test(value)){
116 return '手机必须11位，只能是数字！'
117 }
118 }
119 }
120 // , cardType: function (value) {
121 // if (value.length < 4) {
122 // return '请输入至少4位的用户名';
123 // }
124 // }
125 // , cardNum: function (value) {
126 // if (value.length < 4) {
127 // return '请输入至少4位的用户名';
128 // }
129 // }
130 // , eduCode: function (value) {
131 // if (value.length < 4) {
132 // return '请输入至少4位的用户名';
133 // }
134 // }
135 })
136 $('#cancelAuth').click(function(){
137 layer.close(layer1);
138 })
139 form.on('submit(formDemo)', function(data) {
140 // 这里处理 表单提交数据逻辑处理；
141
142 console.log(data)
143 console.log(data.field)
144 //！！！！data.field里面包含了需要的参数
145 layer.close(layer1);
146 //防止layui form提交刷新页面；
147 return false;
148 });
149 });
150 </script>
151
152 </html>
1 #layerAuth {
2 display: none;
3 }
4 .form-box {
5 box-sizing: border-box;
6 padding: 20px;
7 }
8 .form-tips {
9 width: 480px;
10 height: 40px;
11 line-height: 40px;
12 box-sizing: border-box;
13 padding: 0 10px;
14 background: #FFF7E8;
15 border: 1px solid #FFAE00;
16 border-radius: 4px;
17 margin: 0 auto;
18 color: #807C74;
19 margin-bottom: 20px;
20 text-align: center;
21 }
22 .color-tips {
23 color: #ffae00;
24 }
25 .tip-required {
26 color: #FF543A;
27 }
28 .tc {
29 text-align: center;
30 }
31 .tr {
32 text-align: right;
33 }
34 .layui-btn {
35 height: 32px;
36 line-height: 32px;
37 }
38 .layui-btn-normal {
39 background-color: #368FFF;
40 }
41 .layui-btn-primary:hover {
42 border-color: #368FFF;
43 color: #333;
44 }
45 .layui-form-select dl dd.layui-this {
46 background-color: #368FFF;
47 color: #fff;
48 }
