[驗證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"> </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>
沒有留言:
張貼留言