主页面代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>register</title>
<script type="text/javascript" src="file:///D|/hanfeng/Documents/2" ></script>
<script language="javascript">
function isNull(str){
if(str==""||str==null){
return 0;
}
else
return 1;
}
function minLength(str,length){
if(str.length<length)
return 0;
else
return 1;
}
function maxLength(str,length){
if(str.length>length)
return 0;
else
return 1;
}
function isDate(str)
{
var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
if(r==null)return false;
var d= new Date(r[1], r[3]-1, r[4]);
return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);
}
function validateAndSubmit(){
var name=form1.user.value;
var pwd = form1.pwd.value;
var pwd2= form1.pwd2.value;
var date =form1.date.value;
str="您所填写的信息:\n";
str+="您的用户名是:"+name+"\n";
str+="密码:"+pwd+"\n";
str+="生日:"+date+"\n";
ah=document.getElementsByName("Education");
for(i=0;i<ah.length;i++){
if(ah[i].checked==true){
str+="学历:"+ah[i].value+"\n";
}
}
index=diqu.selectedIndex;
seldiqu=diqu.options[index].text;
str+="地区:"+seldiqu+"\n";
str+="备注:"+document.getElementById('beizhu').value;
alert(str);
form1.submit();
window.location="heckboxTest.html"
}
function isValidate(){
var name=form1.user.value;
var pwd = form1.pwd.value;
var pwd2= form1.pwd2.value;
var date =form1.date.value;
var str;
var length;
if(!isNull(name)){
alert("请输入用户名!");
form1.user.focus();
return;
}
else if(!minLength(name,2)){
alert("用户名长度小于2位!");
form1.name.focus();
return;
}
else if(!maxLength(name,10)){
alert("用户名长度大于10位!");
form1.name.focus();
return;
}
else if (!isNull(pwd)){
alert("请输入密码!");
form1.pwd.focus();
return;
}
else if(pwd==name){
alert("密码不能与用户名相同!");
form1.pwd.focus();
return;
}
else if(!minLength(pwd,2)){
alert("密码长度小于2位!");
form1.pwd.focus();
return;
}
else if(!maxLength(name,8)){
alert("密码长度大于8位!");
form1.pwd.focus();
return;
}
else if(pwd!=pwd2){
alert("两次密码不一致!");
form1.pwd2.focus();
return;
}
else if(!isDate(date)){
alert("日期格式错误!");
form1.date.focus();
return ;
}
else{
validateAndSubmit();
}
}
function forwardselectTest(){
window.location="selectTest.html"
}
</script>>
</head>
<body>
<form name="form1" method="post" action="">
<h1 align="center">请注册</h1>
<table width="500" border="1" align="center">
<tr>
<td height="30" colspan="2" bgcolor="#eeeeee">用户注册</td>
</tr>
<tr>
<td width="70" height="30">用户名:</td>
<td> <input name="user" type="text" id="user" >2-10位</td>
</tr>
<tr>
<td height="30">密 码:</td>
<td><input name="pwd" type="password" id="pwd">2-8位(不能与用户名相同)</td>
</tr>
<tr>
<td height="30">确认密码:</td>
<td><input name="pwd2" type="password" id="pwd2"></td>
</tr>
<tr>
<td height="30">生日:</td>
<td><input name="date" type="text" id="date">格式:1996-02-21</td>
</tr>
<tr>
<td height="30">学历:</td>
<td><input name="Education" type="radio" value="专科">专科
<input name="Education" type="radio" value="本科">本科
<input name="Education" type="radio" value="硕士研究生"> 硕士研究生
<input name="Education" type="radio" value="博士研究生">博士研究生</br>
</td>
</tr>
<tr>
<td height="30">地区:</td>
<td><select name="diqu" id="diqu">
<option value="东北">东北
<option value="山东">山东
<option value="北京">北京
<option value="上海">上海
<option value="广东">广东
</select>
</td>
</tr>
<tr>
<td height="30">备注:</td>
<td><textarea id ="beizhu" rows="5" cols="30"></textarea></td><p>
</tr>
<tr>
<td height="30" colspan="2" align="center">
<input type="reset" value="重置">
<input type="button" value="提交并进行check测试" οnclick=isValidate()>
<input type="button" value="select测试" οnclick=forwardselectTest()>
</td>
</tr>
</table>
</form>
</body>
</html>
heckboxTest代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>checkboxTest</title>
<script language="javascript">
function selectAll()
{
var ch=document.getElementsByName("m");
for(var i=0;i<ch.length;i++)
{
ch[i].checked=true;
}
}
function unSelectAll()
{
var ch=document.getElementsByName("m");
for(var i=0;i<ch.length;i++)
{
ch[i].checked=false;
}
}
function showInfo(){
var str="选中项的信息为:";
var ch=document.getElementsByName("m");
for(var i=0;i<ch.length;i++)
{
if(ch[i].checked==true){
str+=ch[i].value+" ";
}
}
alert(str);
}
</script>
</head>
<body>
<input type="checkbox" value="1" name="m" id="m1"/>旅游</br>
<input type="checkbox" value="2" name="m" id="m2"/>音乐</br>
<input type="checkbox" value="3" name="m" id="m3"/>运动
</br>
<input type="button" value="全选" name="全选" οnclick=selectAll()>
<input type="reset" name="取消全选" value="取消全选" οnclick=unSelectAll()>
<input type="button" value="显示" name="显示"οnclick=showInfo()>
</body>
</html>
selectTest代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>selectTest</title>
<script type="text/javascript" language="javascript">
//对下拉框信息进行初始化
function init() {
for (i = 0; i < 10; i++) {
var y = document.createElement("option");//增加一个元素option
y.text = '选项' + i;
var x=document.getElementById("s1");//根据ID找到列表框
x.add(y, null); //
}
}
//把选中的选项移到另一边
function move(s1, s2) {
var index = s1.selectedIndex;
if (index == -1) {
alert("没有选中值");
return;
}
s2.length++;
s2.options[s2.length - 1].value = s1.options[index].value;
s2.options[s2.length - 1].text = s1.options[index].text;//s1中当前选中的值赋给s2的最后一个元素
s1.remove(index);//从s1中移除当前元素
}
//把一边的完全移到另一边
function moveAll(s1, s2) {
if (s1.length == 0) {
alert("没有可用选择");
return;
}
s2.length = s2.length + s1.length;
for (var i = 0; i < s1.length; i++) {
s2.options[s2.length - s1.length + i].value = s1.options[i].value;
s2.options[s2.length - s1.length + i].text = s1.options[i].text;
}
s1.length = 0;
}
</script>
</head>
<body οnlοad="init()">
<table>
<tr>
<td><select id="s1" size=10 style="width:100"></select></td>
<td><input type="button" name="moveToRight" value=">"
onClick="move(s1,s2)"> <br>
<br> <input type="button" name="moveAllToRight" value=">>"
onClick="moveAll(s1,s2)"> <br> <input type="button"
name="moveToLeft" value="<" onClick="move(s2,s1)"> <br>
<br> <input type="button" name="moveAllToLeft" value="<<"
onClick="moveAll(s2,s1)"></td>
<td><select id="s2" name="s2" size=10 style="width:100"></select></td>
</tr>
</table>
</body>
</html>