在第七個練習已經確定能成功做到使用者帳號密碼之註冊與登入等控管，接下來就是要納入表單來讓使用者能填寫自己要申請的帳密資料。
這次我們練習還是用這個Mobile Design Templates，自GitHub下載其所有範例頁面的zip檔，將其解壓縮，找到 Data Input 子資料夾下的 Standard.html，將其複製到 common 子資料夾並改名為 Register.html 來，並改寫下列部分：
- 假設你也是將 Register.html 放在 common資料夾下，那麼本來會引用其下的 js、css、images 之相對位置的 "../common/" 都要刪除喔。
- 把 Register.html 的35~132行刪除，更換為下列的程式碼：
<form>
<section class="border-bottom">
<div class="content">
<h3>Sing Up:</h3>
<div class="form-control-group">
<div class="form-control form-control-text">
<input type="text" id="username" placeholder="User Name">
</div>
<div class="form-control form-control-text">
<input type="password" id="password1" placeholder="Password">
</div>
<div class="form-control form-control-text">
<input type="password" id="password2" placeholder="Confirm Password">
</div>
<div class="form-control form-control-text">
<input type="text" id="email" placeholder="Email Address">
</div>
<div class="form-control form-control-text">
<input type="text" id="phone" placeholder="Mobile Phone">
</div>
</div>
</div><!--.content-->
</section>
<section class="data-capture-buttons one-buttons">
<div class="content">
<a href="javascript:newAccount();">Join Us</a>
</div>
</section><!--.data-capture-buttons-->
</form>
<script type="text/javascript">
function newAccount()
{
un = document.getElementById("username").value;
p1 = document.getElementById("password1").value;
p2 = document.getElementById("password2").value;
em = document.getElementById("email").value;
ph = document.getElementById("phone").value;
//do some basic validation here
var errmsg = "";
if (un=="") errmsg += "Error: User Name required.\n";
if (p1=="" || p2=="") errmsg += "Error: Password required.\n";
if (p1!=p2) errmsg += "Error: Password need to be confirmed.\n";
if (em=="") errmsg += "Error: Email Address required.";
if (errmsg!="")
{
alert(errmsg);
return;
}
Parse.initialize("APPLICATION_ID", "JAVASCRIPT_KEY"); //這裡要記得填上自己的Keys喔
var user = new Parse.User();
user.set("username", un);
user.set("password", p1);
user.set("email", em);
user.set("phone", ph);
user.signUp(null, {
success: function(user) {
// Hooray! Let them use the app now.
alert("Your account is createed.")
},
error: function(user, error) {
// Show the error message somewhere and let the user try again.
alert("Error: " + error.code + " " + error.message);
}
});
}
</script>
- 依照第二個練習下載的範例 index.html 的第11行所示，將此 js 引用語法複製到 Register.html 的 head 區塊內。
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.4.0.min.js"></script>
如果上述部分都正確改寫了，以瀏覽器開啟 Register.html 執行且所有欄位都正確輸入，應該就會看到成功新建的帳號囉。
當然，為了防止使用者胡亂申請新帳號，大部分的系統都會驗證電子郵件的程序，而這件事竟然在Parse.com完全不必寫程式，參閱Parse.com的Javascript指南是這樣做的：
- 在應用程式的設定中啟用電子郵件驗證，能讓應用程式將部分體驗保留給電子郵件地址經過確認的使用者。
- 電子郵件驗證會將 emailVerified 索引鍵加入 Parse.User 物件，Parse.User 的 email 被設定或修改時，就會將 emailVerified 設定成 false。然後 Parse 會以電子郵件將一個連結寄給使用者，此連結會將 emailVerified 設定為 true。
延伸閱讀...