2015年7月21日 星期二

Web前端程式設計：上課練習(4)_表單

表單檢查的處理方式 (form)
  • 建議重點：
    • 若檢查動作寫在按鈕上，不能用submit，要改成 <input type="button">
    • 故建議直接寫在 <form onSubmit="檢查程式"> 比較方便
    • 判斷『錯誤』發生時做處理 (檢查條件，不是檢查『正確』，而是檢查『錯誤』)
    • 其他：Google『網頁表單檢查』
表單類型：text/checkbox

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<!--因要將Message的文字變色，加入CSS格式設定，須配合在對應的地方加入class-->
<style>
.message { color:#FF0000; background-color: #FFFF00;}
</style>

<script>
function check_date() //檢查錯誤輸入
{ var flag='';
 var msg_receiver='';
 var msg_phone='';
 var msg_sure='';

 //檢查收件者
 var obj=document.getElementById('receiver');
 if(obj.value=='')
 {
  flag=false;
  msg_receiver='收件者不能為空白\n';
 }
 
 /*檢查電話號碼(不能是空白且為數字)
 必須  不是空白 && 是數字
  必須   !空白   && !非數字
  錯的檢查  ! ( !空白  && !非數字 )
  錯的檢查  !!空白  ||  !!非數字 
  錯的檢查    空白  ||  非數字 
  if( xxx=='' || isNaN(xxx) )
 */
 
 //檢查電話號碼
 var phone1=document.getElementById('phone1');
 if(phone1.value=='' || isNaN(phone1.value))
 {
  flag=false;
  msg_phone+='電話區碼有誤\n';
 }

 var phone2=document.getElementById('phone2');
 if(phone2.value==''||isNaN(phone2.value))
 {
  flag=false;
  msg_phone+='電話號碼有誤\n';
 }

 //確認欄位需打勾
 var sure=document.getElementById('sure');
 if(!sure.checked) //不使用value是因為JS判斷value都是為Y，但後端可以用value='Y'
 {
  flag=false;
  msg_sure+='確認欄位必須打勾';
 }

 //總結
 if(!flag)
 {
  document.getElementById('msg_receiver').innerHTML=msg_receiver;
  document.getElementById('msg_phone').innerHTML=msg_phone;
  document.getElementById('msg_sure').innerHTML=msg_sure;
 }
 return flag;
}
</script>
</head>
<body>
<h2>資料輸入</h2>
<p>&nbsp;</p>
<form method="post" action="result.txt" onsubmit="return check_date();">
  <p>姓名：
      <input name="receiver" type="text" id="receiver" size="16" />
      <span id="msg_receiver" class="message"></span>
      <!--文字顯示要變色，需要加入class設定-->
  </p>
  <p>電話：
      <input name="phone1" type="text" id="phone1" size="4" />
      <input name="phone2" type="text" id="phone2" size="12" />
      <span id="msg_phone" class="message"></span>
  </p>
  <p>確認：<!--可加value="Y"給後端進行判斷有無勾選-->
      <input type="checkbox" name="sure" id="sure" />
      <span id="msg_sure" class="message"></span>
  </p>
  <p>
    <input type="submit" name="button" id="button" value="送出" />
  </p>
</form>
<p>&nbsp;</p>
</body>
</html>

張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)