经常写js验证,感觉很麻烦,这次就把他整理贴出来,以后可以直接用了。具体介绍这里不罗嗦了,直接贴代码,相信大家都能理解代码的含义
登录验证:
Jsp页面代码:
<form action="userLogin.action" method="post" οnsubmit="return login();" id="loginForm">
<h3>用户登录</h3>
<br /> 用 户 名:<input type="text" name="user.username" id="uName" style="height: 30px;width: 220px;font-size: 20px;" /><br />
<br /> 密 码:<input type="password" name="user.password" id="uPass" style="height: 30px;width: 220px;font-size: 20px;" /><br />
<br /> <input type="submit" value="登录" style="height: 30px;width: 60px;font-size: 20px;" />
<input type="reset" value="重置" style="height: 30px;width: 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" οnsubmit="return register();">
<h3>用户注册</h3>
<table>
<tr>
<td style="text-align: right;width: 200px;line-height: 50px;">用 户 名<font
color="red">*</font>:
</td>
<td><input type="text" name="user.username"
οnblur="return checkname()" id="uName"
style="width: 220px;font-size: 16px;" /></td>
<td id="namets"
style="width: 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"
οnblur="return checkpass();"
style="width: 220px;font-size: 16px;" /></td>
<td id="passts"
style="width: 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"
οnblur="return checkrpass();"
style="width: 220px;font-size: 16px;" /></td>
<td id="passrts"
style="width: 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"
οnblur="return checkemail();"
style="width: 220px;font-size: 16px;" /></td>
<td id="emailts"
style="width: 150px;text-align: left;font-size: 12px;"></td>
</tr>
<tr>
<td></td>
<td style="text-align: center;line-height: 55px;width:220px"><input
type="submit" value="注册"
style="width: 60px;font-size: 16px;" /> <input
type="reset" value="重置"
style="width: 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);
}