简单的JavaScript注册页面源码分享

<html>
<head>
<title> 注册页面(表单元素)实例 </title>
<meta name="Author" content="hanfeili">
<meta name="Keywords" content="fkjava">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="css/mycss.css" type="text/css">
<script>
//用户名验证
function checkLogin(obj){
if(obj.value != ""){
document.getElementById("msg").innerHTML="<img src=images/onebit_34.png width=20 height=20>";
}else{
document.getElementById("msg").innerHTML="<img src=images/onebit_33.png width=20 height=20>";
}
}
//密码验证
function checkLogin2(obj){
if(obj.value != ""){
document.getElementById("msg1").innerHTML="<img src=images/onebit_34.png width=20 height=20>";
}else{
document.getElementById("msg1").innerHTML="<img src=images/onebit_33.png width=20 height=20>";
}
}
//性别的检测
function checkSex(){
//获取页面中同名的元素，返回一个元素数组
var sexs = document.getElementsByName("sex");
//sexs.length获取数组的长度
//循环获取当前选中状态的性别的值
for(var i =0;i<sexs.length;i++){
//判断某项的checked是否被选中，选中返回true
if(sexs[i].checked){
alert(sexs[i].value);
break;
}
}
}
//爱好的检测
function checkHobbys(obj){
//alert(obj.checked);
var flag = true;
var show="" ;
if(!obj.checked){
flag = false;
}
//获取页面中同名的元素，返回一个元素数组
var hobbys = document.getElementsByName("hobbys");
for(var i =0;i<hobbys.length;i++){

hobbys[i].checked=flag;
if(hobbys[i].checked){
//alert(hobbys[i].value);
show +=" "+hobbys[i].value;
}
}
document.getElementById("showhobbys").innerHTML=show;
}

function checkHobbys1(obj){
//alert(obj.checked);
var flag = true;
var show="" ;
if(!obj.checked){
flag = false;
}
//获取页面中同名的元素，返回一个元素数组
var hobbys = document.getElementsByName("hobbys");

hobbys[1].checked=flag;
if(hobbys[1].checked){
//alert(hobbys[i].value);
show =hobbys[1].value;
}

document.getElementById("showhobbys1").innerHTML=show;
}

function checkHobbys2(obj){
//alert(obj.checked);
var flag = true;
var show="" ;
if(!obj.checked){
flag = false;
}
//获取页面中同名的元素，返回一个元素数组
var hobbys = document.getElementsByName("hobbys");

hobbys[2].checked=flag;
if(hobbys[2].checked){
//alert(hobbys[i].value);
show =hobbys[2].value;
}

document.getElementById("showhobbys2").innerHTML=show;
}

function checkHobbys3(obj){
//alert(obj.checked);
var flag = true;
var show="" ;
if(!obj.checked){
flag = false;
}
//获取页面中同名的元素，返回一个元素数组
var hobbys = document.getElementsByName("hobbys");

hobbys[3].checked=flag;
if(hobbys[3].checked){
//alert(hobbys[i].value);
show =hobbys[3].value;
}

document.getElementById("showhobbys3").innerHTML=show;
}
//学历的检测
function checkXL(obj){
var optt = obj.options[obj.selectedIndex].text;
document.getElementById("showXL").innerHTML="您的学历是:"+optt;
}

//自我介绍文字数量的检测
function checkInfo(obj){
var infoLength = obj.value.length;
//alert(obj.value);

if(infoLength<=0){
document.getElementById("showMsg").innerHTML="<img src=images/onebit_33.png width=20 height=20>";
}else{
document.getElementById("showMsg").innerHTML="<img src=images/onebit_34.png width=20 height=20>";
}
}
function checkLogin3(){
//myForm 表示一个本页面的表单(form)的名称
//myForm.loginName 表示 myForm表单中的一个name属性为loginName的页面元素对象
if (myForm.loginName.value != "" && myForm.loginPass.value != ""&&myForm.info.value!="") {
//条件成立，提交表单
myForm.submit();
}
}

</script>
</head>
<body >
<center>
<form name="myForm" action="http://www.baidu.com" method="GET">
<table border="1">
<caption>注册页面</caption>
<tr>
<td>用户名<font color="red">*</font>:</td>
<td>

<input type="text" name="loginName" required="true" onblur="checkLogin(this)">
<label id="msg1"></label>
</td>
</tr>
<tr>
<td>密  码<font color="red">*</font>:</td>
<td><input type="password" name="loginPass" required="true"
onblur="checkLogin2(this)"><label id="msg"></label>
</td>
</tr>
<tr>
<td>性  别<font color="red">*</font>:</td>
<td>
<input type="radio" name="sex" value="男" onclick="checkSex()">
<img src="images\icon_male.png" alt="男" width="30" height="30" >

<input type="radio" name="sex" value="女" checked="true" onclick="checkSex()">
<img src="images\icon_female.png" alt="女" width="30" height="30">
</td>
</tr>

<tr>
<td>爱好:
<input type="checkbox" name="hobbys" value="爱好是:" onclick="checkHobbys(this)">
<label id="setAll">全选</label>
</td>
<td >
<input type="checkbox" id="a" name="hobbys" value="看美女" onclick="checkHobbys1(this)">看美女<br>
<input type="checkbox" id="b" name="hobbys" value="看电影" onclick="checkHobbys2(this)">看电影<br>
<input type="checkbox" id="c" name="hobbys" value="看游泳" onclick="checkHobbys3(this)">看游泳<br>
<label id="showhobbys"></label>  
<label id="showhobbys1"></label>  
<label id="showhobbys2"></label>  
<label id="showhobbys3"></label>  
</td>
</tr>

<tr>
<td>学历:</td>
<td>
<select id="xl" name="xl" onchange="checkXL(this)">
<option value="1">小学
<option value="2">中学
<option value="3">大学
</select>
<label id="showXL"></label>
</td>
</tr>

<tr>
<td>头像上传:</td>
<td>

<input type="file" name="headFile">
</td>
</tr>

<tr>
<td>自我介绍:</td>
<td>
<textarea name="info" rows="5" cols="25" onblur="checkInfo(this)"></textarea><br>
<label id="showMsg"></label>
</td>
</tr>

<input type="hidden" name="id" value="168">
<tr>
<td><input type="button" value="提交" id="idtest" onclick="checkLogin3()"></td>
<td><input type="reset" value="清空" id="idtest"></td>
</tr>

</table>
</form>
<a href="http://www.baidu.com">有帐号去登录吧</a>
</center>
<br>
</body>
</html>

posted @ 2016-02-06 09:55 jane_y 阅读(2388) 评论(0) 收藏举报

刷新页面返回顶部

jane_y

简单的JavaScript注册页面源码分享

公告