前台jsp校验:js+Ajax+正则表达式--【DRP】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 | <%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <%@ page import ="com.bjpowernode.drp.sysmgr.domain.*"%> <%@ page import="com.bjpowernode.drp.sysmgr.manager.*"%> <% request.setCharacterEncoding("GB18030"); //查询用户Id,并判断数据库中是否存 String command=request.getParameter("command"); String userId=""; String userName=""; String contactTel=""; String email=""; if("add".equals(command)){ if(UserManager.getInstance().findUserById(request.getParameter("userId"))==null){ User user=new User(); user.setUserId(request.getParameter("userId")); user.setUserName(request.getParameter("userName")); user.setPassword(request.getParameter("password")); user.setContactTel(request.getParameter("contactTel")); user.setEmail(request.getParameter("email")); UserManager.getInstance().addUser(user); out.println("添加用户成功!"); }else{ userId=request.getParameter("userId"); userName=request.getParameter("userName"); contactTel=request.getParameter("contactTel"); email=request.getParameter("email"); out.println("添加代码已经存在,代码=【"+ request.getParameter("userId") +"】"); } }; //String command=request.getParameter("command"); //if(command !=null && command.equals("add")){ /* if("add".equals(command)){ User user=new User(); user.setUserId(request.getParameter("userId")); user.setUserName(request.getParameter("userName")); user.setPassword(request.getParameter("password")); user.setContactTel(request.getParameter("contactTel")); user.setEmail(request.getParameter("email")); UserManager.getInstance().addUser(user); out.println("添加用户成功!"); } */ %> < html > < head > < meta http-equiv="Content-Type" content="text/html; charset=GB18030"> < title >添加用户</ title > < link rel="stylesheet" href="../style/drp.css"> < script src="../script/client_validate.js"></ script > < script type="text/javascript"> //返回 function goBack() { window.self.location="user_maint.html" } //添加用户前的js判断 function addUser() { //var vUserId=document.getElementById("userId").value; var userIdField=document.getElementById("userId"); //用户代码不能为空 //判断用户代码不能为空 if(trim(userIdField.value)==""){ alert("用户代码不能为空!"); userIdField.focus(); return; } /* //用户代码只能为4-6位! if(!(trim(userIdField.value).length>=4 && trim(userIdField.value).length<=6)){ alert("用户代码只能为4-6位!!"); userIdField.focus(); return; } for(var i=0;i< trim (userIdField.value).length;i++){ var c=trim(userIdField.value).charAt(i); if(!(c>='0' && c<='9') || ( c>='z' && c<='Z') || (c>='A' || c<='Z')){ alert("用户代码必须为数字和字母!"); userIdField.focus(); return; } } */ //用户代码必须为数字和字母!只能为4-6位,从头至尾 var re=new RegExp(/^[a-zA-Z0-9]{4,6}$/); if(!re.test(trim(userIdField.value))){ alert("用户代码必须为数字和字母!只能为4-6位!"); userIdField.focus(); return; } //用户名称必须输入,不能和用户代码不能为空一致 if(trim(document.getElementById("userName").value).length==0){ alert("用户名称不能为空!"); document.getElementById("userName").focus(); return; } //密码至少6位 if(trim(document.getElementById("password").value).length< 6 ){ alert("密码至少6位!"); document.getElementById("password").focus(); return; } //如果联系电话不为空,进行判断,判断规则:都为数字,采用两种方式1,正则表达式 2,不用 //不采用正则表达式判断 var contactTelField=document.getElementById("contactTel"); /* //alert("a"+trim(contactTelField.value)+"a"); if(trim(contactTelField.value)!=""){ for(var i=0;i<trim(contactTelField.value).length;i++){ var c=trim(contactTelField.value).charAt(i); alert(c); if(!(c>='0' && c<='9')){ alert("电话号码不合法"); contactTelField.focus(); return; } } } */ //正则表达式验证是否为数字--王美--2015年11月24日 /* var reg=new RegExp("^[0-9]*$"); var obj=document.getElementById("contactTel"); if(!reg.test(obj.value)){ alert("请输入数字!"); } if(!/^[0-9]*$/.test(obj.value)){ alert("请输入数字!"); } */ //正则表达式验证是否为数字,DRP视频里面的 if(trim(contactTelField.value)!=""){ //方法用于在脚本执行过程中编译正则表达式。 re.compile(/^[0-9]*$/); if(!re.test(trim(contactTelField.value))){ alert("电话号码不合法!"); contactTelField.focus(); return; } } //如果email不能空,进行判断,判断规则;只要包含@即可,@最好不再最前面和最后面。 var emailField=document.getElementById("email"); if(trim(emailField.value).length !=0){ var emailValue=trim(emailField.value); if((emailValue.indexOf("@")==0) || (emailValue.indexOf("@")== (emailValue.length-1))){ alert("email地址格式不正确!"); emailField.focus(); return; } if(emailValue.indexOf("@")< 0 ){ alert("email地址格式不正确!"); emailField.focus(); return; } } if(document.getElementById("spanUserId").innerHTML!=null){ alert("用户代码已经存在!"); userIdField.focus(); return; } /* document.getElementById("userForm").action="user_add.jsp"; document.getElementById("userForm").method="post"; document.getElementById("userForm").submit(); */ with(document.getElementById("userForm")){ action="user_add.jsp"; method="post"; submit(); } } function init(){ //用户代码text获取焦点 document.getElementById("userId").focus(); } function userIdOnKeyPress(){ //只能输入字母,不能输入数字 if(!(event.keyCode>=97 && event.keyCode<=122)){ event.keyCode=0; } } //回车换行 /* function document.onkeydown(){ alert(window.event.keyCode); if(window.event.keyCode==13 && window.event.srcElement.type !='button'){ window.event.keyCode=9; } } */ //1.创建Ajax核心对象XMLHttpRequest var xmlHttp; function createXMLHttpRequest(){ //表示当前浏览器不是ie,如firefox if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); }else if(window.ActiveXObject){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } //2.创建Ajax对象,完成用户代码的判断 function validate(field){ //alert(document.getElementById("userId").value); //alert(field.value); if(trim(field.value).length !=0){ //创建Ajax核心对象XMLHttpRequest createXMLHttpRequest(); //添加一个时间,就不会读取过期缓存了 var url="user_validate.jsp?userId="+ trim(field.value)+"&time="+new Date().getTime(); //设置请求方式为get,请求的url,异步提交 xmlHttp.open("GET",url,true); //将方法的地址赋值给onreadystatechange属性 xmlHttp.onreadystatechange=callback; //将设置信息发送到Ajax引擎 xmlHttp.send(null); }else{ document.getElementById("spanUserId").innerHTML=""; } } function callback(){ //alert(xmlHttp.readyState); //设置Ajax引擎状态为成功 if (xmlHttp.readyState==4){ //Http协议状态为成功 if(xmlHttp.status==200){ //取得相应文本 //alert(xmlHttp.responseText); if(trim(xmlHttp.responseText)!=""){ document.getElementById("spanUserId").innerHTML="< font color='red'>"+ xmlHttp.responseText+"</ font >"; }else{ document.getElementById("spanUserId").innerHTML=""; } }else{ alert("请求失败,错误码="+xmlHttp.status); } } } </ script > </ head > < body class="body1" onload="init()"> < form name="userForm" target="_self" id="userForm"> < input type="hidden" name="command" value="add"> < div align="center"> < table width="95%" border="0" cellspacing="2" cellpadding="2"> < tr > < td > </ td > </ tr > </ table > < table width="95%" border="0" cellspacing="0" cellpadding="0" height="25"> < tr > < td width="522" class="p1" height="25" nowrap> < img src="../images/mark_arrow_03.gif" width="14" height="14"> < b >系统管理>>用户维护>>添加</ b > </ td > </ tr > </ table > < hr width="97%" align="center" size=0> < table width="95%" border="0" cellpadding="0" cellspacing="0"> < tr > < td width="22%" height="29"> < div align="right"> < font color="#FF0000">*</ font >用户代码: </ div > </ td > < td width="78%"> < input name="userId" type="text" class="text1" id="userId" size="10" maxlength="10" onkeypress="userIdOnKeyPress()" value="<%=userId%>" onblur="validate(this)"> < span id="spanUserId"></ span > </ td > </ tr > < tr > < td height="26"> < div align="right"> < font color="#FF0000">*</ font >用户名称: </ div > </ td > < td > < input name="userName" type="text" class="text1" id="userName" size="20" maxlength="20" value="<%=userName%>"> </ td > </ tr > < tr > < td height="26"> < div align="right"> < font color="#FF0000">*</ font >密码: </ div > </ td > < td > < label > < input name="password" type="password" class="text1" id="password" size="20" maxlength="20"> </ label > </ td > </ tr > < tr > < td height="26"> < div align="right"> 联系电话: </ div > </ td > < td > < input name="contactTel" type="text" class="text1" id="contactTel" size="20" maxlength="20" value="<%=contactTel%>"> </ td > </ tr > < tr > < td height="26"> < div align="right"> email: </ div > </ td > < td > < input name="email" type="text" class="text1" id="email" size="20" maxlength="20" value="<%=email%>"> </ td > </ tr > </ table > < hr width="97%" align="center" size=0> < div align="center"> < input name="btnAdd" class="button1" type="button" id="btnAdd" value="添加" onClick="addUser()"> < input name="btnBack" class="button1" type="button" id="btnBack" value="返回" onClick="goBack()" /> </ div > </ div > </ form > </ body > </ html > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步