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;
}
}