有一个页面定义了一个框架
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<jsp:include page="islogin.jsp"></jsp:include>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>main</title>
</head>
<!-- frameset 框架要写在head 与body 标签中间 具自己观察的结果 -->
<frameset rows="20%,*" >
<frame src="top.jsp" name="top" id="top">
<frameset cols="20%,*" >
<frame src="mainleft.jsp" name="left" id="left">
<frame src="mainright.jsp" name="right" id="right">
</frameset>
</frameset>
<body>
</body>
</html>
mainleft.jsp 文件代码如下
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>main-left</title>
</head>
<body>
<a href="view.jsp" target="right">查看信息</a><br/>
<a href="addinfor.jsp" target="right">添加房屋信息</a><br/>
<a href="adduser.jsp" target="right">添加用户信息</a><br/>
</body>
</html>
adduser.jsp 代码如下
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>adduser</title>
<script type="text/javascript" src="script/checkusers1.js"></script>
</head>
<body>
<form action="doadduser.jsp" method="post" id="addform" onsubmit="return checkuser()">
<table border="1">
<tr>
<td>项目名称</td>
<td>添加内容</td>
<td>信息提示</td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username"><br/><p id=pstruser></p></td>
<td><p id="name-msg"></p></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="password"><br/><p id=pstrpassword></p></td>
<td><p id="password-msg"></p></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="checkpassword" id="confirmpassword" disabled></td>
<td><p id="cpassword-msg"></p></td>
</tr>
<tr>
<td> 所在部门</td>
<td><select name="userbumen" id="userbumen">
<option>大队部</option>
<option>四中队</option>
<option>五中队</option>
<option>六中队</option>
</select>
</td>
<td><p id="bumen-msg">选择所在部门</p></td>
</tr>
<tr>
<td> 用户等级</td>
<td><select name="userdengji" id="userdengji">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
<td><p id="dengji-msg">选择用户等级</p></td>
</tr>
<tr>
<td>备注</td>
<td><input type="text" name="userbz" id="userbz"><br/><p id=struserbz></p></td>
<td><p id="beizhu-msg"></p></td>
</tr>
<tr>
<td> 添加</td>
<td><input type="submit" name="提交" id="btnaddusers" ><input type="reset" name="重置"></td>
<td>错误提示</td>
</tr>
</table>
</form>
</body>
</html>
javascript checkusers1.js 文件代码如下
function getlength(str)
{ return str.replace(/[^\x00-xff]/g,"xx").length
//x00-xff 表示ascII码中的单字节字符 [^\x00-xff]表示取所有双字节字符，
//将所有双字节字符替换成2个字节的任意字符后再统计输入的字符串长度
}
window.onload=function()
{
var addform=window.frames["top"].frames["right"].document.getElementById("addform");
//获取添加用户名form 元素
var btnsubmit=window.frames["top"].frames["right"].document.getElementById("btnaddusers");
//获得提交按钮
var username=window.frames["top"].frames["right"].document.getElementById("username");
//获得用户名输入框
var password=window.frames["top"].frames["right"].document.getElementById("password");
//获得密码输入框
var conpassword=window.frames["top"].frames["right"].document.getElementById("confirmpassword");
//获得确认密码输入框
var beizhu=window.frames["top"].frames["right"].document.getElementById("userbz");
var pstruser=window.frames["top"].frames["right"].document.getElementById("pstruser");
//获得显示用户名输入框字符长度的p标签
var pstrpassword=window.frames["top"].frames["right"].document.getElementById("pstrpassword");
var pstruserbz=window.frames["top"].frames["right"].document.getElementById("struserbz")
var strlength=0;//定义个字符串用于计算字符串的长度
//通过id方式获取元素后 需要同过元素的value属性才能获取相应的输入内容 比如:strusername=username.value
//以下是获取p标签 信息提示框元素
var pusernamemsg=window.frames["top"].frames["right"].document.getElementById("name-msg");
var ppasswordmsg=window.frames["top"].frames["right"].document.getElementById("password-msg");
var pconfirmpasswordmsg=window.frames["top"].frames["right"].document.getElementById("cpassword-msg");
var pbeizhumsg=window.frames["top"].frames["right"].document.getElementById("beizhu-msg");
/*关于frame框架中如何获取相应的元素弄了两天 总结Javascipt 获取相应框架中的元素应该一层一层的进入然后
*在获取元素 window.frames["top"].frames["right"].document.getElementById("username")
*先进入最外层的top 框架 再进入top中的right框架
*/
//用户名要求 字母 数字 中文 长度为2到20个字符
// \u4e00-\u9fa5这个unicode编码区间表示汉字
// \x00-xff 在ascII码中的单字节字符
// 用户名输入框获得焦点 触发事件
username.onfocus=function userfocus()
{ pusernamemsg.style.display="block";
pusernamemsg.innerHTML="请输入2到20个字符，一个中文为2个字符";
}
//用户名输入框失去焦点触发事件
username.onblur=function userblur()
{//当用户名输入框失去输入焦点时验证输入字符合法性并显示提示
//允许的字符包括a-z A-Z 0-9 以及中文字符
//正则表达式为/[\w\u4e00-\u9fa5]/g(全局匹配)
var re=/[^\w\u4e00-\u9fa5]/g
if(re.test(this.value))
{ pusernamemsg.innerHTML="含有非法字符!";
return false;
}else if(this.value.length==0)
{
pusernamemsg.innerHTML="用户名不能为空！";
return false;
}
else if(this.value.length>20)
{
pusernamemsg.innerHTML="用户名长度不能超过20个字符！";
return false;
}else if (this.value.length<2)
{
pusernamemsg.innerHTML="用户名长度不能少于2个字符！";
return false;
}else
{
pusernamemsg.innerHTML="用户名验证成功！";
return true;
}
}
//用户名输入框在输入字符完成触发事件
username.onkeyup=function userkeyup()
{
pstruser.style.display="block";
strlength=getlength(this.value);
pstruser.innerHTML=strlength+"个字符";
if(strlength==0)
{
pstruser.style.display="none";
// pstruser.style.visibility="hidden";
}
}
//密码输入要求 6到12个字符,密码不能用中文
password.onfocus=function passwordfocus()
{//当密码输入框获得输入焦点时显示p标签信息提示框
ppasswordmsg.style.display="block";
ppasswordmsg.innerHTML="请输入6-12个数字以及英文字符!";
pconfirmpasswordmsg.style.display="block" ;
pconfirmpasswordmsg.innerHTML="请再次输入密码!";
}
password.onblur=function passwordblur()
{ var repassword=/[^\w]/g;//匹配数字与英文字符的正则表达式
if(this.value.length==0)
{
ppasswordmsg.innerHTML="密码不能为空!";
return false;
} else if(this.value.length<6)
{
ppasswordmsg.innerHTML="密码不能小于6个字符!";
return false;
}
else if(this.value.length>12)
{
ppasswordmsg.innerHTML="密码不能大于12个字符!";
return false;
} else if(repassword.test(this.value))
{
ppasswordmsg.innerHTML="密码有非法字符!";
conpassword.disabled="disabled";
return false;
} else
{
ppasswordmsg.innerHTML="密码验证通过!";
return true;
}
}
password.onkeyup=function passwordkeyup()
{
if((this.value.length>=6)&&(this.value.length<=12))
{
conpassword.disabled="";
} else
{
conpassword.disabled="disabled";
//当密码输入框的输入字符小于6个或者大于20个字符时将密码确认输入框设为不可用
//密码确认输入框的信息提示p标签页设置为不显示
}
pstrpassword.style.display="block";
strlength=getlength(this.value);
pstrpassword.innerHTML=strlength+"个字符";
}
conpassword.onblur=function confirmpasswordblur()
{
if(password.value==this.value)
{
// pconfirmpasswordmsg.style.display="block";
pconfirmpasswordmsg.innerHTML="两次密码输入一致!";
return true;
} else
{
//pconfirmpasswordmsg.style.display="block";
pconfirmpasswordmsg.innerHTML="两次密码输入不一致!";
return false;
}
}
beizhu.onfocus=function userbzfocus()
{ pbeizhumsg.style.display="block";
pbeizhumsg.innerHTML="备注信息不能超过50个字符!!!!";
}
beizhu.onblur=function userbzblur()
{ if(this.value.length>50)
{ pbeizhumsg.style.display="block";
pbeizhumsg.innerHTML="备注信息超过50个字符,请删除多余备注信息!";
return false;
}
else
{
return true;
}
}
beizhu.onkeyup=function userbzkeyup()
{
strlength=getlength(this.value);
pstruserbz.innerHTML=strlength+"个字符";
}
btnsubmit.onclick=function checkuser()
{ function userblur1()
{//当用户名输入框失去输入焦点时验证输入字符合法性并显示提示
//允许的字符包括a-z A-Z 0-9 以及中文字符
//正则表达式为/[\w\u4e00-\u9fa5]/g(全局匹配)
var re=/[^\w\u4e00-\u9fa5]/g
if(re.test(username.value))
{ pusernamemsg.innerHTML="含有非法字符!";
return false;
}else if(username.value.length==0)
{
pusernamemsg.innerHTML="用户名不能为空！";
return false;
}
else if(username.value.length>20)
{
pusernamemsg.innerHTML="用户名长度不能超过20个字符！";
return false;
}else if (username.value.length<2)
{
pusernamemsg.innerHTML="用户名长度不能少于2个字符！";
return false;
}else
{
pusernamemsg.innerHTML="用户名验证成功！";
return true;
}
}
}
}
adduser.jsp页面代码修改后的样子
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>adduser</title>
<script type="text/javascript" src="script/checkusers.js"></script>
</head>
<body>
<form action="doadduser.jsp" method="post" id="addform" >
<table border="1">
<tr>
<td>项目名称</td>
<td>添加内容</td>
<td>信息提示</td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username"><br/><p id=pstruser></p></td>
<td><p id="name-msg"></p></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="password"><br/><p id=pstrpassword></p></td>
<td><p id="password-msg"></p></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="checkpassword" id="confirmpassword" disabled></td>
<td><p id="cpassword-msg"></p></td>
</tr>
<tr>
<td> 所在部门</td>
<td><select name="userbumen" id="userbumen">
<option>大队部</option>
<option>四中队</option>
<option>五中队</option>
<option>六中队</option>
</select>
</td>
<td><p id="bumen-msg">选择所在部门</p></td>
</tr>
<tr>
<td> 用户等级</td>
<td><select name="userdengji" id="userdengji">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
<td><p id="dengji-msg">选择用户等级</p></td>
</tr>
<tr>
<td>备注</td>
<td><input type="text" name="userbz" id="userbz"><br/><p id=struserbz></p></td>
<td><p id="beizhu-msg"></p></td>
</tr>
<tr>
<td> 添加</td>
<td><input type="submit" name="提交" id="btnaddusers" ><input type="reset" name="重置"></td>
<td>错误提示</td>
</tr>
</table>
</form>
</body>
</html>
checkusers.js页面修改后 如下
function getlength(str)
{ return str.replace(/[^\x00-xff]/g,"xx").length
//x00-xff 表示ascII码中的单字节字符 [^\x00-xff]表示取所有双字节字符，
//将所有双字节字符替换成2个字节的任意字符后再统计输入的字符串长度
}
window.onload=function()
{
var addform=document.getElementById("addform");
//获取添加用户名form 元素
var btnsubmit=document.getElementById("btnaddusers");
//获得提交按钮
var username=document.getElementById("username");
//获得用户名输入框
var password=document.getElementById("password");
//获得密码输入框
var conpassword=document.getElementById("confirmpassword");
//获得确认密码输入框
var beizhu=document.getElementById("userbz");
var pstruser=document.getElementById("pstruser");
//获得显示用户名输入框字符长度的p标签
var pstrpassword=document.getElementById("pstrpassword");
var pstruserbz=document.getElementById("struserbz")
var strlength=0;//定义个字符串用于计算字符串的长度
//通过id方式获取元素后 需要同过元素的value属性才能获取相应的输入内容 比如:strusername=username.value
//以下是获取p标签 信息提示框元素
var pusernamemsg=document.getElementById("name-msg");
var ppasswordmsg=document.getElementById("password-msg");
var pconfirmpasswordmsg=document.getElementById("cpassword-msg");
var pbeizhumsg=document.getElementById("beizhu-msg");
/*关于frame框架中如何获取相应的元素弄了两天 总结Javascipt 获取相应框架中的元素应该一层一层的进入然后
*在获取元素 window.frames["top"].frames["right"].document.getElementById("username")
*先进入最外层的top 框架 再进入top中的right框架
*/
//用户名要求 字母 数字 中文 长度为2到20个字符
// \u4e00-\u9fa5这个unicode编码区间表示汉字
// \x00-xff 在ascII码中的单字节字符
// 用户名输入框获得焦点 触发事件
username.onfocus=function userfocus()
{ pusernamemsg.style.display="block";
pusernamemsg.innerHTML="请输入2到20个字符，一个中文为2个字符";
}
//用户名输入框失去焦点触发事件
function userblur()
{//当用户名输入框失去输入焦点时验证输入字符合法性并显示提示
//允许的字符包括a-z A-Z 0-9 以及中文字符
//正则表达式为/[\w\u4e00-\u9fa5]/g(全局匹配)
var re=/[^\w\u4e00-\u9fa5]/g
if(re.test(username.value))
{ pusernamemsg.innerHTML="含有非法字符!";
return false;
}else if(username.value.length==0)
{
pusernamemsg.innerHTML="用户名不能为空！";
return false;
}
else if(username.value.length>20)
{
pusernamemsg.innerHTML="用户名长度不能超过20个字符！";
return false;
}else if (username.value.length<2)
{
pusernamemsg.innerHTML="用户名长度不能少于2个字符！";
return false;
}else
{
pusernamemsg.innerHTML="用户名验证成功！";
return true;
}
}
//用户名输入框在输入字符完成触发事件
username.onkeyup=function userkeyup()
{
pstruser.style.display="block";
strlength=getlength(this.value);
pstruser.innerHTML=strlength+"个字符";
if(strlength==0)
{
pstruser.style.display="none";
// pstruser.style.visibility="hidden";
}
}
//密码输入要求 6到12个字符,密码不能用中文
password.onfocus=function passwordfocus()
{//当密码输入框获得输入焦点时显示p标签信息提示框
ppasswordmsg.style.display="block";
ppasswordmsg.innerHTML="请输入6-12个数字以及英文字符!";
pconfirmpasswordmsg.style.display="block" ;
pconfirmpasswordmsg.innerHTML="请再次输入密码!";
}
function passwordblur()
{ var repassword=/[^\w]/g;//匹配数字与英文字符的正则表达式
if(password.value.length==0)
{
ppasswordmsg.innerHTML="密码不能为空!";
return false;
} else if(password.value.length<6)
{
ppasswordmsg.innerHTML="密码不能小于6个字符!";
return false;
}
else if(password.value.length>12)
{
ppasswordmsg.innerHTML="密码不能大于12个字符!";
return false;
} else if(repassword.test(password.value))
{
ppasswordmsg.innerHTML="密码有非法字符!";
conpassword.disabled="disabled";
return false;
} else
{
ppasswordmsg.innerHTML="密码验证通过!";
return true;
}
}
password.onkeyup=function passwordkeyup()
{
if((this.value.length>=6)&&(this.value.length<=12))
{
conpassword.disabled="";
} else
{
conpassword.disabled="disabled";
//当密码输入框的输入字符小于6个或者大于20个字符时将密码确认输入框设为不可用
//密码确认输入框的信息提示p标签页设置为不显示
}
pstrpassword.style.display="block";
strlength=getlength(this.value);
pstrpassword.innerHTML=strlength+"个字符";
}
function confirmpasswordblur()
{
if(password.value==conpassword.value)
{
// pconfirmpasswordmsg.style.display="block";
pconfirmpasswordmsg.innerHTML="两次密码输入一致!";
return true;
} else
{
//pconfirmpasswordmsg.style.display="block";
pconfirmpasswordmsg.innerHTML="两次密码输入不一致!";
return false;
}
}
beizhu.onfocus=function userbzfocus()
{ pbeizhumsg.style.display="block";
pbeizhumsg.innerHTML="备注信息不能超过50个字符!!!!";
}
function userbzblur()
{ if(beizhu.value.length>50)
{ pbeizhumsg.style.display="block";
pbeizhumsg.innerHTML="备注信息超过50个字符,请删除多余备注信息!";
return false;
}
else
{
return true;
}
}
beizhu.onkeyup=function userbzkeyup()
{
strlength=getlength(this.value);
pstruserbz.innerHTML=strlength+"个字符";
}
btnsubmit.onclick=function checkonsubmit()
{
if((userblur()==false)||(passwordblur()==false)||(confirmpasswordblur()==false)||(userbzblur()==false))
{
return false;
}
else
{
return true;
}
}
}