?? 16.11 表單驗證樣式.htm
字號:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Check Score</title>
<style type="text/css">
#name div.text{
float:left;
width:118px;
font-size:12px;
text-align:right;
font-weight:bold;
}
#name div.redstar {
float:right;
width:10px;
font-size:12px;
text-align:right;
font-weight:normal;
color:#ff0000;
margin-right:3px;
}
div.input{
width:257px;
text-align:left;
float:left;
font-size:12px;
}
div.note{
width:310px;
float:right;
text-align:left;
font-size:12px;
color:#999999;
padding:3px;
line-height:130%;
background:#ffffff;
border:#ffffff 1px solid;
}
div.notetrue{
width:310px;
float:right;
text-align:left;
font-size:12px;
padding:3px;
line-height:130%;
color:#485E00;
background:#F7FFDD;
border:#485E00 1px solid;
}
div.noteawoke{
display: none;
width:310px;
float:right;
text-align:left;
font-size:12px;
color:#ff0000;
padding:3px;
line-height:130%;
background:#fff5d8;
border:#ff7300 1px solid;
background-repeat:no-repeat;
background-position:2 3px;
margin:0px;
}
</style>
</head>
<body>
<table>
<tr>
<td id="name"><div class="text">得分</div><div class="redstar">*</div></td>
<td><div class="input"><input type="text" id="txtScore" /><div></td>
<td><div class="note" id="divTipInfo">請輸入 0-100 之間的數字！</div><div class="noteawoke" id="divAlarmInfo">數據輸入錯誤，重新輸入！</div></td>
</tr>
</table>
<script type="text/javascript">
var oScore = document.getElementById("txtScore"); //獲取輸入文本框
var oNote = document.getElementById("divTipInfo"); //獲取提示信息框
var oAlarm = document.getElementById("divAlarmInfo");//獲取警告信息框
oScore.onfocus = function()
{
oNote.className = "notetrue"; //獲取焦點時改變樣式
}
oScore.onblur = function() //失去焦點時的方法
{
if (this.value != "")
{
var score = parseInt(this.value); //轉換數值類型
//判斷輸入內容是否符合條件
if (isNaN(score) || !(score>=0 && score<=100))
{
oAlarm.style.display = "block";
oNote.style.display = "none";
}
else
{
this.value = score;
oAlarm.style.display = "none";
oNote.className = "note";
oNote.style.display = "block";
}
}
else
{
//用戶沒有輸入的情況下
oAlarm.style.display = "none";
oNote.className = "note";
oNote.style.display = "block";
}
}
</script>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -