add.html 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>添加会员</title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  9. <link rel="stylesheet" href="../../static/css/font.css">
  10. <link rel="stylesheet" href="../../static/css/weadmin.css">
  11. <!-- 让IE8/9支持媒体查询,从而兼容栅格 -->
  12. <!--[if lt IE 9]>
  13. <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  14. <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  15. <![endif]-->
  16. </head>
  17. <body>
  18. <div class="weadmin-body">
  19. <form class="layui-form">
  20. <div class="layui-form-item">
  21. <label for="L_username" class="layui-form-label">
  22. <span class="we-red">*</span>登录名
  23. </label>
  24. <div class="layui-input-inline">
  25. <input type="text" id="L_username" name="username" lay-verify="required|nikename" autocomplete="off" class="layui-input">
  26. </div>
  27. <div class="layui-form-mid layui-word-aux">
  28. 请设置至少5个字符,将会成为您唯一的登录名
  29. </div>
  30. </div>
  31. <div class="layui-form-item">
  32. <label for="L_sex" class="layui-form-label">性别</label>
  33. <div class="layui-input-block" id="L_sex">
  34. <input type="radio" name="sex" value="男" title="男" checked>
  35. <input type="radio" name="sex" value="女" title="女">
  36. <input type="radio" name="sex" value="未知" title="未知">
  37. </div>
  38. </div>
  39. <div class="layui-form-item">
  40. <label for="L_email" class="layui-form-label">
  41. <span class="we-red">*</span>手机
  42. </label>
  43. <div class="layui-input-inline">
  44. <input type="text" id="L_phone" name="phone" lay-verify="required|phone" autocomplete="" class="layui-input">
  45. </div>
  46. </div>
  47. <div class="layui-form-item">
  48. <label for="L_email" class="layui-form-label">
  49. <span class="we-red">*</span>邮箱
  50. </label>
  51. <div class="layui-input-inline">
  52. <input type="text" id="L_email" name="email" autocomplete="off" class="layui-input">
  53. </div>
  54. </div>
  55. <div class="layui-form-item">
  56. <label for="L_pass" class="layui-form-label">
  57. <span class="we-red">*</span>密码
  58. </label>
  59. <div class="layui-input-inline">
  60. <input type="password" id="L_pass" name="pass" lay-verify="required|pass" autocomplete="off" class="layui-input">
  61. </div>
  62. <div class="layui-form-mid layui-word-aux">
  63. 6到16个字符
  64. </div>
  65. </div>
  66. <div class="layui-form-item">
  67. <label for="L_repass" class="layui-form-label">
  68. <span class="we-red">*</span>确认密码
  69. </label>
  70. <div class="layui-input-inline">
  71. <input type="password" id="L_repass" name="repass" lay-verify="required|repass" autocomplete="off" class="layui-input">
  72. </div>
  73. </div>
  74. <div class="layui-form-item">
  75. <label for="L_repass" class="layui-form-label">
  76. </label>
  77. <button class="layui-btn" lay-filter="add" lay-submit="">确定</button>
  78. </div>
  79. </form>
  80. </div>
  81. <script src="../../lib/layui/layui.js" charset="utf-8"></script>
  82. <script>
  83. layui.extend({
  84. admin: '{/}../../static/js/admin'
  85. });
  86. layui.use(['form', 'jquery','util','admin', 'layer'], function() {
  87. var form = layui.form,
  88. $ = layui.jquery,
  89. util = layui.util,
  90. admin = layui.admin,
  91. layer = layui.layer;
  92. //自定义验证规则
  93. form.verify({
  94. nikename: function(value) {
  95. if(value.length < 5) {
  96. return '昵称至少得5个字符啊';
  97. }
  98. },
  99. pass: [/(.+){6,12}$/, '密码必须6到12位'],
  100. repass: function(value) {
  101. if($('#L_pass').val() != $('#L_repass').val()) {
  102. return '两次密码不一致';
  103. }
  104. }
  105. });
  106. //失去焦点时判断值为空不验证,一旦填写必须验证
  107. $('input[name="email"]').blur(function(){
  108. //这里是失去焦点时的事件
  109. if($('input[name="email"]').val()){
  110. $('input[name="email"]').attr('lay-verify','email');
  111. }else{
  112. $('input[name="email"]').removeAttr('lay-verify');
  113. }
  114. });
  115. //监听提交
  116. form.on('submit(add)', function(data) {
  117. //console.log(data.field);
  118. var f = data.field;
  119. //console.log(f.username);
  120. //console.log(f.sex);
  121. //var sex = $('input:radio[name="sex"]:checked').val();
  122. //发异步,把数据提交给php
  123. layer.alert("增加成功", {
  124. icon: 6
  125. }, function() {
  126. //获取提交成功的时间
  127. var time = new Date();
  128. var timeNow = util.toDateString(time);
  129. // 获得frame索引
  130. var index = parent.layer.getFrameIndex(window.name);
  131. var _len = parent.$('#memberList tr').length;
  132. alert(_len);
  133. parent.$('#memberList').append(
  134. '<tr data-id="' + _len + '">' +
  135. '<td>'+
  136. '<div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id="' + _len + '"><i class="layui-icon">&#xe605;</i></div>'+
  137. '</td>'+
  138. '<td>' + _len + '</td>'+
  139. '<td>'+f.username+'</td>'+
  140. '<td>'+f.sex+'</td>'+
  141. '<td>'+f.phone+'</td>'+
  142. '<td>'+f.email+'</td>'+
  143. '<td>北京市西城区</td>'+
  144. '<td>'+timeNow+'</td>'+
  145. '<td class="td-status"><span class="layui-btn layui-btn-normal layui-btn-xs">已启用</span></td>'+
  146. '<td class="td-manage">'+
  147. '<a onclick="member_stop(this,\'10001\')" href="javascript:;" title="启用"><i class="layui-icon">&#xe601;</i></a>'+
  148. '<a title="编辑" onclick="WeAdminShow(\'编辑\',\'./edit.html\',600,400)" href="javascript:;"><i class="layui-icon">&#xe642;</i></a>'+
  149. '<a onclick="WeAdminShow(\'修改密码\',\'./password.html\',600,400)" title="修改密码" href="javascript:;"><i class="layui-icon">&#xe631;</i></a>'+
  150. '<a title="删除" onclick="member_del(this,\'要删除的id\')" href="javascript:;"><i class="layui-icon">&#xe640;</i></a>'+
  151. '</td>'+
  152. '</tr>'
  153. );
  154. //关闭当前frame
  155. parent.layer.close(index);
  156. });
  157. return false;
  158. });
  159. });
  160. </script>
  161. </body>
  162. </html>