和原來的比 加了一些東西
![用戶註冊]()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
text-indent: 30px;
}
input{
outline: none;
}
.isNull{
border: 1px solid red;
}
</style>
<script>
var names = ["tom","jack","lily"];
function mySub(){
var k = 0;
var name = document.forms['myForm']['name'];
var pwd = document.forms['myForm']['pwd'];
var hobbys = document.forms['myForm']['hobby'];
var xl = document.forms['myForm']['xl'];
if(name.value.trim() == ""){
name.className = "isNull";
}
if(pwd.value.trim() == ""){
pwd.className = "isNull";
}
for(var i = 0 ; i < hobbys.length ; i++){
if(hobbys[i].checked == true){
k++;
}
}
if(k<1){
document.getElementById("isHobby").className = "isNull";
}
if(xl.value == "請選擇"){
xl.className = "isNull";
}
return false;
}
function inputFocus(obj){
obj.className = "";
}
function isName(obj){
var b = true;
for (var i=0 ; i<names.length ; i++) {
var n = names[i];
if(n == obj.value){
document.getElementById("isCan").innerHTML = "用戶名以被註冊！";
obj.className = "isNull";
b = false;
break;
}
}
if(b){
document.getElementById("isCan").innerHTML = "";
}
}
function myChange(obj){
if(obj.value != "請選擇"){
obj.className = "";
}
}
function mySelect(){
document.getElementById("isHobby").className = "";
}
</script>
</head>
<body>
<h1>用戶註冊</h1>
<hr />
<form name="myForm" action="a.html" method="get" onsubmit="return mySub()">
<p>
用戶名：<input name="name" type="text" onfocus="inputFocus(this)" onblur="isName(this)" />
<span id="isCan" style="font-size: 14px;color: red;"></span>
</p>
<p>
密碼：<input name="pwd" type="password" onfocus="inputFocus(this)" />
</p>
<p>
性別：
<input type="radio" name="sex" value="男" checked />男
<input type="radio" name="sex" value="女" />女
</p>
<p id="isHobby">
愛好：
<input type="checkbox" name="hobby" value="籃球" onclick="mySelect()" />籃球
<input type="checkbox" name="hobby" value="足球" onclick="mySelect()" />足球
<input type="checkbox" name="hobby" value="乒乓球" onclick="mySelect()" />乒乓球
<input type="checkbox" name="hobby" value="羽毛球" onclick="mySelect()" />羽毛球
</p>
<p>
學歷：
<select name="xl" onchange="myChange(this)">
<option>請選擇</option>
<option>中學</option>
<option>大專</option>
<option>本科</option>
<option>研究生</option>
</select>
</p>
<p>
<input type="submit" />
</p>
</form>
</body>
</html>
