【需求征集系统】打卡（三）

　　更新注册界面。代码如下：
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="UTF-8">
  5 <title>主页</title>
  6 <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
  7 <meta name="author" content="Vincent Garreau" />
  8 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  9 <script type="text/javascript" src="js/jquery.js"></script>
 10 <script type="text/javascript" src="js/cookie.js"></script>
 11 <script type="text/javascript" src="js/selfjs.js"></script>
 12 <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
 13 <style type="text/css">
 14 .demo-bg{
 15     width: 1520px;
 16     height: 1000px;
 17     position: relative;
 18     background-image: url(img/LRBackground.jpg);
 19     background-position: 50% 50%;
 20     background-size: cover;
 21     background-repeat: no-repeat;
 22     margin-left: auto;
 23     margin-right: auto;
 24 }
 25 .write{
 26     position:absolute;
 27     margin-left:350px;
 28     left:0;
 29     right:0;
 30     top:0;
 31     bottom:0;
 32     width:820px;
 33     height:1000px;
 34     line-height:50px;
 35     background:#ffffffd2;
 36 }
 37 .center{
 38     text-align:center;
 39 }
 40 </style>
 41 </head>
 42 <body>
 43 <div class="demo-bg">
 44 <div class="write">
 45 <h1>用户注册</h1>
 46 <h3>带*号为必填项</h3>
 47 <form class="layui-form">
 48 <table class="layui-table"lay-skin="row"lay-even="">
 49     <tr>
 50         <td class="center">*用户名:</td>
 51         <td>
 52             <input type="text" name="username" lay-verify="required">
 53             <span id="usertip" style="margin-left:100px;">用户名大于6位且小于20位</span>
 54         </td>
 55     </tr>
 56     <tr>
 57         <td class="center">*密码:</td>
 58         <td>
 59             <input type="password" name="pwd" lay-verify="required">
 60             <span id="pwdtip" style="margin-left:100px;">密码长度应大于等于6位</span>
 61         </td>
 62     </tr>
 63     <tr>
 64         <td class="center">*验证密码:</td>
 65         <td>
 66             <input type="password" name="cpwd" lay-verify="required">
 67             <span id="cpwdtip" style="margin-left:100px;"></span>
 68         </td>
 69     </tr>
 70     <tr>
 71         <td class="center">*真实姓名:</td>
 72         <td>
 73             <input type="text" name="name"lay-verify="required">
 74             <span id="nametip" style="margin-left:100px;">请填写真实姓名，以便与您取得联系</span>
 75         </td>
 76     </tr>
 77     <tr>
 78         <td class="center">*身份证号:</td>
 79         <td>
 80             <input type="text" name="idcard"lay-verify="required">
 81         </td>
 82     </tr>
 83     <tr>
 84         <td class="center">性别:</td>
 85         <td>
 86             <input type="radio" name="sex" value="男" title="男" checked="checked">
 87               <input type="radio" name="sex" value="女" title="女">
 88         </td>
 89     </tr>
 90     <tr>
 91         <td class="center">*国家/省市:</td>
 92         <td>
 93             <div class="layui-form-item">
 94                 <div class="layui-inline">
 95                         <select name="province" class="province" lay-verify="required" lay-search lay-filter="province">
 96                             <option value="">省份</option>
 97                         </select>
 98                 </div>
 99                 <div class="layui-inline">
100                         <select name="city" class="city" lay-verify="required" lay-search lay-filter="city">
101                             <option value="">地级市</option>
102                         </select>
103                 </div>
104             </div>
105         </td>
106     </tr>
107     <tr>
108         <td class="center">*机构全称:</td>
109         <td><input type="text" name="workplace" lay-verify="required"></td>
110     </tr>
111     <tr>
112         <td class="center">*专业方向:</td>
113         <td><input type="text" name="major" lay-verify="required"></td>
114     </tr>
115     <tr>
116         <td class="center">*所在行业:</td>
117         <td><input type="text" name="work" lay-verify="required"></td>
118     </tr>
119     <tr>
120         <td class="center">教育程度:</td>
121         <td><input type="text" name="education"></td>
122     </tr>
123     <tr>
124         <td class="center">职称:</td>
125         <td><input type="text" name="workrank"></td>
126     </tr>
127     <tr>
128         <td class="center">通讯地址:</td>
129         <td>
130             <input type="text" name="postalAddr">
131             <span id="Addrtip" style="margin-left:100px;">请您填写详细，以便与您取得联系</span>
132         </td>
133     </tr>
134     <tr>
135         <td class="center">邮政编码:</td>
136         <td><input type="text" name="postalCode" lay-verify="required|number"></td>
137     </tr>
138     <tr>
139         <td class="center">手机:</td>
140         <td><input type="text" name="mobilephone" lay-verify="required|phone"></td>
141     </tr>
142     <tr>
143         <td class="center">固定电话:</td>
144         <td><input type="text" name="phone"></td>
145     </tr>
146     <tr>
147         <td class="center">邮箱:</td>
148         <td><input type="text" name="mail" lay-verify="required|email"></td>
149     </tr>
150     <tr>
151         <td class="center">QQ:</td>
152         <td><input type="text" name="QQ"></td>
153     </tr>
154     <tr>
155         <td class="center">MSN:</td>
156         <td><input type="text" name="MSN"></td>
157     </tr>
158     <tr>
159         <td class="center">验证码:<img alt="验证码" src="OrganServlet?method=Code"></td>
160         <td><input type="text" name="checkcode"></td>
161     </tr>
162     <tr>
163         <td colspan="2" class="center"><button lay-filter="go"id="btn"lay-submit=""class="layui-btn">注册</button>&nbsp;&nbsp;
164         <button type="reset"name="re"class="layui-btn">重置</button></td>
165     </tr>
166 </table>
167 </form>
168 </div>
169 </div>
170 </body>
171 <script src="layui/layui.all.js"></script>
172 <script type="text/javascript" src="js/area.js"></script>
173 <script type="text/javascript" src="js/selectMore.js"></script>
174 <script>
175 $(function(){
176     $('input[name=username]').keyup(function(){
177         username=$(this).val();
178         if(!/^\w{6,20}/.test(username)){
179             $('#usertip').text("用户名应该由6-20位字母、数字或下划线组成").css('color','red');
180             $('#btn').attr('disabled','disabled')
181         }else{
182             $.post(
183                 'OrganServlet'
184                 ,{'username':username,'method':'checkname'}
185                 ,function(o){
186                     o=JSON.parse(o);
187                     if(o.status==1){
188                         $('#usertip').text("该用户名已存在").css('color','red');
189                         $('#btn').attr('disabled','disabled')
190                     }else{
191                         $('#usertip').text('');
192                         $('#btn').attr('disabled',false)
193                     }
194                 }
195             )
196             
197         }
198     })
199     
200     $('input[name=pwd]').keyup(function(){
201         pwd=$(this).val();
202         if(!/^\w{6,20}/.test(pwd)){
203             $('#pwdtip').text('密码应由6-20位字母、数字或下划线组成').css('color','red')
204             $('#btn').attr('disabled','disabled')
205         }else{
206             $('#pwdtip').text('');
207             $('#btn').attr('disabled',false)
208         }
209     })
210     $('input[name=cpwd]').keyup(function(){
211         cpwd=$(this).val();
212         pwd=$('input[name=pwd]').val();
213         if(pwd!==cpwd){
214             $('#cpwdtip').text('两次密码不一致').css('color','red')
215             $('#btn').attr('disabled',true)
216         }else{
217             $('#cpwdtip').text('');
218             $('#btn').attr('disabled',false)
219         }
220     })
221     
222 })
223 
224 var form=layui.form;
225     
226     form.on('submit(go)',function (d) {        //表单提交，进行注册
227         $.post(
228             'OrganServlet?method=register',
229             $('.layui-form').serialize(),
230             function (o) {
231                 o=JSON.parse(o);
232                 if(o.status==-1){
233                     alert("验证码错误!");
234                 }else if(o.status==1){
235                     alert("注册成功!");
236                     window.location.href="Login.html";
237                 }else{
238                     alert("注册失败!");
239                     window.location.href="Register.html";
240                 }
241              }
242         );
243         return false;
244     })
245 </script>
246 </html>
原文地址：https://www.cnblogs.com/20183711PYD/p/13855141.html