<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">//js的樣式開頭必須是這樣的。
function validate()//他的方法必須以function開頭。
{
var staffNo=document.getElementById('staffNo');
var staffName=document.getElementById('staffName');
var sex=document.getElementsByName('Sex');
var pos=document.getElementById('pos');
var password=document.getElementById('password');
var introduction=document.getElementById('introduction');
if(staffNo.value=="")
{
alert("員工工號不能爲空！");
staffNo.focus();
return false;
}
if(staffName.value=="")
{
alert("員工姓名不能爲空！");
staffName.focus();
return false;
}
if(sex[0].checked)//checkbox的驗證是否爲空的方法
{
console.log("您選擇了男","提示")
/*alert(sex[0].value);*/
}
else
{
console.log("您選擇了女","提示")
/*alert(sex[1].value);*/
}
/*var index=pos.selectedIndex;
var posvalue=pos.options[index].text;*/
if(pos.value=="")
{
alert("請選擇職位！");
pos.focus();
return false;
}
if(introduction.value=="")
{
alert("請輸入簡介！");
introduction.focus();
return false;
}
/*string.prototype.trim=function()
{
return this.replace(/(^\s*)|(\s*S)/g,"");
正則表達式
}*/
return true;
}
</script>
</head>
<body>
<form action="" method="post">
<table border="1" align="center" bordercolor="#ccc" cellpadding="5px">
<tr align="center">
<td colspan="3" >
員工信息
</td>
</tr>
<tr >
<td align="center" width="20%" >
工號：
</td>
<td width="50%" align="left" >
<input name="staffNo" id="staffNo" class="input">//添加Id唯一標識
</td>
<td width="30%" rowspan="5">
<img width="100%" id="image" height="300px" src="images/1.jpg">
</td>
</tr>
<tr >
<td>
姓名：
</td>
<td align="left" >
<input name="staffName" id="staffName" class="input">
</td>
</tr>
<tr >
<td>
性別：
</td>
<td align="left">
<input type="radio" name="Sex" value="Man" checked>男
<input type="radio" name="Sex" value="Woman">女
</td>
</tr>
<tr >
<td >
照片：
</td>
<td align="left" >
<input type="file" id="photo" name="staffPic">
</td>
</tr>
<tr >
<td>
職位：
</td>
<td align="left">
<select name="pos" id="pos">
<option value="">
請選擇職位
</option>
<option value="1002">
醫生
</option>
<option value="1002">
護士
</option>
</select>
</td>
</tr>
<tr >
<td>
密碼：
</td>
<td colspan="2" align="left">
<input type="password" id="password" name="password" class="input">
</td>
</tr>
<tr class="tr">
<td>
簡介：
</td>
<td colspan="2" align="left">
<textarea cols="80" rows="8" id="introduction"></textarea>
</td>
</tr>
<tr >
<td colspan="3">
<input type="submit" onclick="return validate()" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
<pre name="code" class="html">table{
border-collapse: collapse;
width: 60%;
margin-top:8em;
text-align:center;
}
tr{
height: 50px;
}
.tr{
height:100px;
}
.input{
width:200px;
height:22px;
}
select{
width:80px;
height:22px;
}
textarea{
text-indent:2em;
}
