经常写js验证,感觉很麻烦,这次就把他整理贴出来,以后可以直接用了。具体介绍这里不罗嗦了,直接贴代码,相信大家都能理解代码的含义
登录验证:
Jsp页面代码:
<form action="userLogin.action" method="post" onsubmit="return login();" id="loginForm"> <h3>用户登录</h3> <br /> 用 户 名:<input type="text" name="user.username" id="uName" style="height: 30px; 220px;font-size: 20px;" /><br /> <br /> 密 码:<input type="password" name="user.password" id="uPass" style="height: 30px; 220px;font-size: 20px;" /><br /> <br /> <input type="submit" value="登录" style="height: 30px; 60px;font-size: 20px;" /> <input type="reset" value="重置" style="height: 30px; 60px;font-size: 20px;" /> </form>js验证代码:
function login() { // console.info("点击了登录"); var userName = $("#uName").val(); // console.info(userName) var userPass = $("#uPass").val(); // console.info(userPass); if (userName == "" || userName == null) { alert("用户名不能为空"); return false; } else if (userPass == "" || userPass == null) { alert("密码不能为空"); return false; } else { return true; } }
JSP页面代码:
<span style="white-space:pre"> </span><form action="userRegister.action" method="post" onsubmit="return register();"> <h3>用户注册</h3> <table> <tr> <td style="text-align: right; 200px;line-height: 50px;">用 户 名<font color="red">*</font>: </td> <td><input type="text" name="user.username" onblur="return checkname()" id="uName" style=" 220px;font-size: 16px;" /></td> <td id="namets" style=" 150px;height:40px;text-align: left;font-size: 12px;"></td> </tr> <tr> <td style="text-align: right;line-height: 50px;">密 码<font color="red">*</font>: </td> <td><input type="password" id="uPass" name="user.password" onblur="return checkpass();" style=" 220px;font-size: 16px;" /></td> <td id="passts" style=" 150px;text-align: left;font-size: 12px;"></td> </tr> <tr> <td style="text-align: right;line-height: 50px;">确认密码<font color="red">*</font>: </td> <td><input type="password" name="" id="uRPass" onblur="return checkrpass();" style=" 220px;font-size: 16px;" /></td> <td id="passrts" style=" 150px;text-align: left;font-size: 12px;"></td> </tr> <tr> <td style="text-align: right;line-height: 50px;">邮 箱<font color="red">*</font>: </td> <td><input type="text" name="user.email" id="uEmail" onblur="return checkemail();" style=" 220px;font-size: 16px;" /></td> <td id="emailts" style=" 150px;text-align: left;font-size: 12px;"></td> </tr> <tr> <td></td> <td style="text-align: center;line-height: 55px;220px"><input type="submit" value="注册" style=" 60px;font-size: 16px;" /> <input type="reset" value="重置" style=" 60px;font-size: 16px;" /></td> </tr> </table> </form>
js验证代码:
function register() { if(!checkname()){ return false; }else if (!checkpass()) { return false; } else if(!checkemail()){ return false; } return true; }
function checkname() { var name = document.getElementById("uName").value; var ts = document.getElementById("namets"); if(name.length<3|| name.length>15) { ts.innerHTML ="用户名长度须在3-15之间!"; ts.style.color="red"; return false; } $.post("checkUserName.action", {" userName": name },function(data){ var d = $.parseJSON(data); //console.log(d.success); if(d.success!=true){ ts.innerHTML ='用户名已存在!'; ts.style.color='red'; return true; } }); ts.innerHTML ='用户名可以使用!'; ts.style.color='green'; return true; } function checkpass(){ var userPass = $("#uPass").val(); var pts = document.getElementById("passts"); if(userPass.length<6 || userPass.length >15) { pts.innerHTML ="密码长度须在6-15之间!"; pts.style.color="red"; return false; } pts.innerHTML ="密码可以使用!"; pts.style.color="green"; return true; } function checkrpass(){ var userPass = $("#uPass").val(); var userRPass = $("#uRPass").val(); var prts = document.getElementById("passrts"); if (userPass != userRPass) { prts.innerHTML="两次密码输入不一致!"; prts.style.color="red"; return false; } prts.innerHTML ="输入一致!"; prts.style.color="green"; return true; } function checkemail(){ var userEmail = $("#uEmail").val(); var ets = document.getElementById("emailts"); if(!isEmail(userEmail)){ ets.innerHTML ="邮箱格式不正确!"; ets.style.color="red"; return false; } ets.innerHTML ="邮箱可以使用!"; ets.style.color="green"; return true; } function isEmail(str){ var reg = /[a-z0-9-]{1,30}@[a-z0-9-]{1,65}.[a-z]{3}/; return reg.test(str); }