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 = /^1d{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 }