学习jsp界面
主要分为两部分第一部分是form表单的界面，第二部分是判断输入是否符和要求的函数。
form表单里用到了type有text、password、radio、select。在radio和select的使用上起初出现了些错误。<input type="radio"name="degree"value="本科"> <select name="local"><option value="河北">
判断是否符和要求的函数主要有，判断输入的长度是否符合要求，输入的日期格式是否正确是否符和常识，输入的e-mail格式是否正确。这些函数代码在以后的项目中也可以直接进行使用。
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <script language="JavaScript"> 4 function isValidate(form) 5 { 6 // 得到用户输入的信息 7 userid = form.userid.value; 8 username = form.username.value; 9 userpass = form.userpass.value; 10 userpass2 = form.userpass2.value; 11 birthday = form.birthday.value; 12 email = form.email.value; 13 address = form.address.value; 14 phone = form.phone.value; 15 // 判断用户 ID 长度 16 if(!minLength(userid,6)) 17 { 18 alert("用户 ID 长度小于 6 位！"); 19 form.userid.focus(); 20 return false; 21 } 22 if(!maxLength(userid,8)) 23 { 24 alert("用户 ID 长度大于 8 位！"); 25 form.userid.focus(); 26 return false; 27 } 28 // 判断用户名长度 29 if(!minLength(username,2)) 30 { 31 alert("用户名长度小于 2 位！"); 32 form.username.focus(); 33 return false; 34 } 35 if(!maxLength(username,10)) 36 { 37 alert("用户名长度大于 10 位！"); 38 form.username.focus(); 39 return false; 40 } 41 // 判断口令长度 42 if(!minLength(userpass,6)) 43 { 44 alert("口令长度小于 6 位！"); 45 form.userpass.focus(); 46 return false; 47 } 48 if(!maxLength(userpass,8)) 49 { 50 alert("口令长度大于 8 位！"); 51 form.userpass.focus(); 52 return false; 53 } 54 // 判断用户 ID 和口令是否相同 55 if(userid==userpass) 56 { 57 alert("用户 ID 和口令不能相等！"); 58 form.userpass.focus(); 59 return false; 60 } 61 // 验证两次口令是否相同 62 if(userpass != userpass2) 63 { 64 alert("两次输入的口令不相同！"); 65 form.userpass.focus(); 66 return false; 67 } 68 // 验证生日的格式是否正确 69 if(!isDate(birthday)) 70 { 71 alert("生日的格式不正确！"); 72 form.birthday.focus(); 73 return false; 74 } 75 // 验证 E-mail 的格式是否正确 76 if(!isEmail(email)) 77 { 78 alert("E-mail 格式不正确！"); 79 form.email.focus(); 80 return false; 81 } 82 // 验证电话号码的格式是否正确 83 if(!isDigital(phone)) 84 { 85 alert("电话号码的格式不正确"); 86 form.phone.focus(); 87 return false; 88 } 89 // 验证地址的长度是否正确 90 if(!maxLength(address,50)) 91 { 92 alert("地址长度大于 50 位！"); 93 form.address.focus(); 94 return false; 95 } 96 return true; 97 } 98 // 验证是否是空 99 function isNull(str) 100 { 101 if(str.length==0){ 102 return true; 103 }else{ 104 return false; 105 } 106 } 107 // 验证是否满足最小长度 108 function minLength(str,length) 109 { 110 if(str.length>=length){ 111 return true; 112 }else{ 113 return false; 114 } 115 } 116 // 判断是否满足最大长度 117 function maxLength(str,length) 118 { 119 if(str.length<=length){ 120 return true; 121 }else{ 122 return false; 123 } 124 125 } 126 // 判断是否是数字 127 function isDigital(str) 128 { 129 for(i=0;i<str.length;i++) 130 { 131 // 允许使用连字符 132 if(str.charAt(i)>='0' && str.charAt(i)<='9' || str.charAt(i)== '-' && i!=0 && i!=str.length-1) 133 continue; 134 else 135 return false; 136 } 137 return true; 138 } 139 // 判断是否是整数 140 function isNumber(str) 141 { 142 for(i=0;i<str.length;i++) 143 { 144 // 每一位都是 0～9 的数字，如果是第 1 位，则可以是“-”号 145 if(str.charAt(i)>='0' && str.charAt(i)<='9' || str.charAt(i)== '-' && i==0) 146 continue; 147 else 148 return false; 149 } 150 151 152 return true; 153 } 154 // 判断是否是日期，日期的格式为 1988-1-1 155 function isDate(date) 156 { 157 // 查找分隔符 158 index1 = date.indexOf("-"); 159 // 如果分隔符不存在，则不是合法的时间 160 if(index1 == -1) 161 return false; 162 // 获取时间中的年 163 year = date.substring(0,index1); 164 // 获取时间中的剩下部分 165 date = date.substring(index1+1); 166 // 查找第二个分隔符 167 index1 = date.indexOf("-"); 168 // 如果不存在第二个分隔符，则不是合法的时间 169 if(index1 == -1) 170 return false; 171 // 获取时间中的月份 172 month = date.substring(0,index1); 173 // 获取时间中的日 174 day = date.substring(index1+1); 175 // 判断是否是数字，如果不是，则不是合法的时间 176 if(isNumber(year) && isNumber(month) && isNumber(day)) 177 { 178 // 判断基本范围 179 if(year<1900 || year>9999 || month<1 || month >12 || day<1) 180 return false; 181 // 判断 31 天的月 182 if((month==1 || month==3 || month==5 || month==7 183 || month==8 || month==10 || month==12) && day>31) 184 return false; 185 // 判断 30 天的月 186 if((month==4 || month==6 || month==9 || month==11) 187 && day>30) 188 return false; 189 // 如果是 2 月，判断是否为闰年 190 if(month==2) 191 192 193 { 194 if(year%400==0 || (year%4==0 && year%100!=0)) 195 { 196 if(day>29) 197 return false; 198 }else 199 { 200 if(day>28) 201 return false; 202 } 203 } 204 } 205 else 206 return false; 207 return true; 208 } 209 // 判断是否是 E-mail 210 function isEmail(email) 211 { 212 if(email.length==0) 213 return false; 214 index1 = email.indexOf('@'); 215 index2 = email.indexOf('.'); 216 if(index1 < 1 // @符号不存在，或者在第一个位置 217 || index2 < 1 // .符号不存在，或者在第一个位置 218 || index2-index1 <2 // .在@的左边或者相邻 219 || index2+1 == email.length) // .符号后面没有东西 220 return false 221 else 222 return true; 223 } 224 </script> 225 226 <html> 227 <head> 228 <title>注册界面</title> 229 </head> 230 <body> 231 <h2 align="center">请注册</h2> 232 <form name="form1" action="register_confirm.jsp" method="post" onsubmit="return isValidate(form1)"> 233 <table align="center"> 234 <tr> 235 <td>用户ID:</td> 236 <td><input type="text"name="userid">6-8位</td> 237 </tr> 238 <tr> 239 <td>用户名：</td> 240 <td><input type="text"name="username">2-10位</td> 241 </tr> 242 <tr> 243 <td>口令:</td> 244 <td><input type="password"name="userpass">6-8位，不能与用户id相同</td> 245 </tr> 246 <tr> 247 <td>确认口令:</td> 248 <td><input type="password"name="userpass2"></td> 249 </tr> 250 <tr> 251 <td>生日：</td> 252 <td><input type="text"name="birthday"></td> 253 </tr> 254 <tr> 255 <td>学历：</td> 256 <td> 257 <input type="radio"name="degree"value="专科">专科 258 <input type="radio"name="degree"value="本科">本科 259 <input type="radio"name="degree"value="硕士研究生">硕士研究生 260 <input type="radio"name="degree"value="博士研究生">博士研究生 261 <input type="radio"name="degree"value="其他">其他 262 </td> 263 </tr> 264 <tr> 265 <td>地区：</td> 266 <td> 267 <select name="local"> 268 <option value="华东">华东：</option> 269 <option value="华南">华南：</option> 270 <option value="华北">华北：</option> 271 <option value="东北">东北：</option> 272 <option value="东南">东南：</option> 273 <option value="西南">西南：</option> 274 <option value="西北">西北：</option> 275 <option value="华中">华中：</option> 276 277 278 </select> 279 </td> 280 </tr> 281 <tr> 282 <td>E-main:</td> 283 <td><input type="text"name="email"></td> 284 </tr> 285 <tr> 286 <td>地址：</td> 287 <td><input type="text"name="address"></td> 288 </tr> 289 <tr> 290 <td>电话：</td> 291 <td><input type="text"name=phone></td> 292 </tr> 293 <tr> 294 <td><input type="reset"value="重置"></td> 295 <td><input type="submit"value="提交"></td> 296 </tr> 297 <table> 298 </form> 299 </body> 300 </html> 301
