2018年12月20日 星期四

DW_PHP_AJAX_CH3 表單的設計與規劃_(4)使用Spry元件驗證欄位_下

[驗證Email格式]

希望使用者留下聯絡的電子信箱, 卻擔心使用者填寫了錯誤格式的郵件地址, 別擔心, 「Spry驗證文字欄位」也具由電子信箱、身分證字號…等具有特定格式的資料驗證功能。

1. 點選「信箱」文字欄位, 然後按下工具列【Spry】頁籤中的「Spry驗證文字欄位」工具按鈕, 加入Spry文字欄位。
2. 加入Spry文字欄位後, 屬性面板將顯示對應的Spry驗證文字欄位屬性, 選定「類型」為『電子郵件地址』, 若要執行即時驗證(資料輸入後,表單資料送出前), 請同時核取「驗證於」欄位的『onBlur』項目, 最後修改執行驗證不通過時的提示訊息。



[驗證文字區域欄位]

1.   點選「留言」文字欄位, 然後按下工具列【Spry】頁籤中的「Spry驗證文字區域」工具按鈕, 加入Spry文字區域。

2. Spry文字區域除可設定輸入字數範圍外, 還有「計數器」功能, 可以動態顯示已輸入的字數或可輸入的剩餘字數。


!!!TIP:

若未設定可輸入的最大字元數限制, 則無法核取「計數器」的『剩餘的字數』功能。
「封鎖額外字元」項目核取後可避免使用者在驗證文字區域中, 輸入大於最大允許字元數目的字元。例如, 設定為最多只能接受 20 個字元 使用者就無法在文字區域中, 鍵入 20 個以上的字元。


3. 「計數器」的『剩餘的字數』功能只會單純的顯示字數, 使用者或許無法了解其意義, 若要再加上特定的說明文字必須在原始碼中進行修改:


完成欄位驗證功能的範例網頁spryForm.htm
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表單設計</title>
<link href="../style/myForm.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form id="msgForm" name="msgForm" method="post" action="msgAct.php">
  <label for="aName" class="labelStyle">姓名:</label>
  <span id="spry_aname">
  <input name="aName" type="text" class="textField" id="aName" />
  <span class="textfieldMaxCharsMsg">字數太多囉。</span></span><br />
  <label for="Email" class="labelStyle">信箱:</label>
  <span id="spry_email">
  <input name="Email" type="text" class="textField" id="Email" />
  <span class="textfieldRequiredMsg">需要有一個值。</span>
<span class="textfieldInvalidFormatMsg">請正確填寫Email。</span></span><br />
<label class="labelStyle">性別:</label>
<input name="sex" type="radio" id="M" value="男" checked="checked" />
<label for="M">男</label>
<input type="radio" name="sex" id="F" value="女" />
<label for="F">女</label>
<br /><label class="labelStyle">興趣:</label>
<input name="Love[]" type="checkbox" id="Love1" value="運動" />
<label for="Love1">運動</label>
<input name="Love[]" type="checkbox" id="Love2" value="歌唱" />
<label for="Love2">歌唱</label>
<input name="Love[]" type="checkbox" id="Love3" value="閱讀" />
<label for="Love3">閱讀</label>
<br />
<label for="blood" class="labelStyle">血型:</label>
<select name="blood" id="blood">
  <option>A</option>
  <option>B</option>
  <option>AB</option>
  <option selected="selected">0</option>
</select>
<br />
<label for="msg" class="labelStyle">留言:</label>
<span id="spry_msg">
<textarea name="msg" cols="45" rows="5" class="textField" id="msg"></textarea>
剩餘字數:
<span id="countspry_msg">&nbsp;</span><span class="textareaRequiredMsg">需要有一個值。</span>
<span class="textareaMinCharsMsg">未達到字元數目的最小值。</span>
<span class="textareaMaxCharsMsg">已超出字元數目的最大值。</span></span><br />
<input name="button" type="submit" class="submitButton" id="button" value="送出" />
<input name="button2" type="reset" class="resetButton" id="button2" value="重設" />
</form>
<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("spry_aname", "none", {minChars:2, maxChars:50});
var sprytextfield2 = new Spry.Widget.ValidationTextField("spry_email", "email", {validateOn:["blur"]});
var sprytextarea1 = new Spry.Widget.ValidationTextarea("spry_msg", {minChars:2, maxChars:100, 
counterType:"chars_remaining", counterId:"countspry_msg", useCharacterMasking:false});
//-->
</script>
</body>
</html>

!!!TIP 

當網頁中使用了Dreamweaver所提供的Spry元件, 在進行網頁存檔時, 將出現「複製相關檔案」的對話框, 提示需將在本身網站中的特定檔案上傳到伺服器, 若您要將網頁發佈到網路時, 這些提示的檔案位於本機網站根目錄下的「SpryAssets」資料夾, 務必將包含這些檔案的「SpryAssets」資料夾一併上傳到伺服器。

沒有留言:

張貼留言