html代码:
<tr>
<td>
用户名 <input type="text" id="sname">
<span class="word"></span>
</td><br>
</tr>
<tr>
<td>
密码 <input type="password" id="spassword1">
<span class="word"></span>
</td><br>
</tr>
<tr>
<td>
密码确认 <input type="password" id="spassword2">
<span class="word"></span>
</td><br>
</tr>
<tr>
<td>
电话号码 <input type="text" id="tel">
<span class="word"></span>
</td><br>
</tr>
<tr>
<td>
性别 <input type="radio" name="ssex" value= "男" checked>男
<input type="radio" value= "女" name="ssex">女<br>
</td>
</tr>
<tr>
<td>
详细地址<br><br>
<textarea rows="5" cols="30" id="adds"></textarea>
<span class="word"></span>
</td>
</tr>
<tr>
<td id="hobbys">
爱好
<input type="checkbox" name="shobby" value="体育"/> 体育
<input type="checkbox" name="shobby" value="音乐"/>音乐
<input type="checkbox" name="shobby" value="文学"/>文学
<input type="checkbox" name="shobby" value="其他"/>其他
<span class="word"></span>
</td><br>
</tr>
<tr>
<td>
学历
<select id="sedu">
<option value="小学">小学</option>
<option value="初中">初中</option>
<option value="高中">高中</option>
<option value="大学">大学</option>
</select><br>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="agreebox">我同意此协议
<span class="word"></span>
</td><br>
</tr>
js代码:
function checksname()//检测用户名
{
var sname = document.getElementById("sname");
if(sname.value=="")//检测用户名事都为空
{
sname.parentNode.getElementsByTagName("span")[0].innerHTML="用户名输入不能为空!";
return false;
}
else
{
sname.parentNode.getElementsByTagName("span")[0].innerHTML="√";
return true;
}
}
function checkpassword1()//检测密码
{
var password1 = document.getElementById("spassword1");
if(password1.value=="")//检测密码是否为空
{
password1.parentNode.getElementsByTagName("span")[0].innerHTML="密码输入不能为空!";
return false;
}
else if(password1.value.length > 10)//检测密码长度不能超过10个字符
{
password1.parentNode.getElementsByTagName("span")[0].innerHTML="密码长度不能超过10个字符!";
return false;
}
else if(password1.value.length < 6)//检测密码长度不能少于6个字符
{
password1.parentNode.getElementsByTagName("span")[0].innerHTML="密码长度至少6个字符!";
return false;
}
else
{
password1.parentNode.getElementsByTagName("span")[0].innerHTML="√";
return true;
}
}
function checkpassword2()//检测确认密码
{
var password1 = document.getElementById("spassword1");
var password2 = document.getElementById("spassword2");
if(password2.value=="")//检测密码是否为空
{
password2.parentNode.getElementsByTagName("span")[0].innerHTML="请再次输入密码!";
return false;
}
else if(password2.value.length > 10)//检测密码长度不能超过10个字符
{
password2.parentNode.getElementsByTagName("span")[0].innerHTML="密码长度不能超过10个字符!";
return false;
}
else if(password2.value.length < 6)//检测密码长度不能少于6个字符
{
password2.parentNode.getElementsByTagName("span")[0].innerHTML="密码长度至少6个字符!";
return false;
}
else if(password1.value != "" && password2.value != "" && password1.value != password2.value)
{//检测两次输入密码是否相同
password2.parentNode.getElementsByTagName("span")[0].innerHTML="两次输入的密码不相同,请重新输入!";
return false;
}
else
{
password2.parentNode.getElementsByTagName("span")[0].innerHTML="√";
return true;
}
}
function checktel()//检测电话号码
{
var tel=document.getElementById("tel");
if(tel.value=="")//检测电话号码是否为空
{
tel.parentNode.getElementsByTagName("span")[0].innerHTML="请输入电话号码!";
return false;
}
else if(tel.value.length != 11)//检测电话号码长度
{
tel.parentNode.getElementsByTagName("span")[0].innerHTML="电话号码长度不正确!";
return false;
}
else if(isNaN(tel.value))//检测电话号码是否为数字
{
tel.parentNode.getElementsByTagName("span")[0].innerHTML="电话号码输入不是数字!";
return false;
}
else
{
tel.parentNode.getElementsByTagName("span")[0].innerHTML="√";
return true;
}
}
function checkadds()//检测地址
{
var adds =document.getElementById("adds");
if(adds.value=="")
{
adds.parentNode.getElementsByTagName("span")[0].innerHTML="请输入您的地址!";
return false;
}
else
{
adds.parentNode.getElementsByTagName("span")[0].innerHTML="√";
return true;
}
}
function checkhobbys()//检测爱好
{
var hobbys = document.getElementById("hobbys");
var shobby = hobbys.getElementsByTagName("input");
if(shobby[0].checked == false && shobby[1].checked == false &&
shobby[2].checked == false && shobby[3].checked== false)
{
hobbys.getElementsByTagName("span")[0].innerHTML="请选择您的爱好!";
return false;
}
else
{
hobbys.parentNode.getElementsByTagName("span")[0].innerHTML="√";
return true;
}
}
function checkagreebox()//检测同意协议
{
var agreebox = document.getElementById("agreebox");
if(agreebox.checked == false)
{
agreebox.parentNode.getElementsByTagName("span")[0].innerHTML="“请同意此协议”不能为空!";
return false;
}
else
{
agreebox.parentNode.getElementsByTagName("span")[0].innerHTML="√";
return true;
}
}
function checkall()//检测全部
{
if(checksname() && checkpassword1() && checkpassword2() && checktel() && checkadds()
&& checkhobbys() && checkagreebox())
{
alert("注册成功啦,快去登录吧!");
return true;
}
else
{
return false;
}
}