reg.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <!DOCTYPE html>
  2. <html class="ui-page-login">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title></title>
  7. <link href="css/mui.min.css" rel="stylesheet" />
  8. <link href="css/style.css" rel="stylesheet" />
  9. <style>
  10. .area {
  11. margin: 20px auto 0px auto;
  12. }
  13. .mui-input-group:first-child {
  14. margin-top: 20px;
  15. }
  16. .mui-input-group label {
  17. width: 22%;
  18. }
  19. .mui-input-row label~input,
  20. .mui-input-row label~select,
  21. .mui-input-row label~textarea {
  22. width: 78%;
  23. }
  24. .mui-checkbox input[type=checkbox],
  25. .mui-radio input[type=radio] {
  26. top: 6px;
  27. }
  28. .mui-content-padded {
  29. margin-top: 25px;
  30. }
  31. .mui-btn {
  32. padding: 10px;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <header class="mui-bar mui-bar-nav">
  38. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  39. <h1 class="mui-title">注册</h1>
  40. </header>
  41. <div class="mui-content">
  42. <form class="mui-input-group">
  43. <div class="mui-input-row">
  44. <label>账号</label>
  45. <input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
  46. </div>
  47. <div class="mui-input-row">
  48. <label>密码</label>
  49. <input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
  50. </div>
  51. <div class="mui-input-row">
  52. <label>确认</label>
  53. <input id='password_confirm' type="password" class="mui-input-clear mui-input" placeholder="请确认密码">
  54. </div>
  55. <div class="mui-input-row">
  56. <label>邮箱</label>
  57. <input id='email' type="email" class="mui-input-clear mui-input" placeholder="请输入邮箱">
  58. </div>
  59. </form>
  60. <div class="mui-content-padded">
  61. <button id='reg' class="mui-btn mui-btn-block mui-btn-primary">注册</button>
  62. </div>
  63. <div class="mui-content-padded">
  64. <!--<p>注册真实可用,注册成功后的用户可用于登录,但是示例程序并未和服务端交互,用户相关数据仅存储于本地。</p>-->
  65. </div>
  66. </div>
  67. <script src="js/mui.min.js"></script>
  68. <script src="js/app.js"></script>
  69. <script>
  70. (function($, doc) {
  71. $.init();
  72. $.plusReady(function() {
  73. var settings = app.getSettings();
  74. var regButton = doc.getElementById('reg');
  75. var accountBox = doc.getElementById('account');
  76. var passwordBox = doc.getElementById('password');
  77. var passwordConfirmBox = doc.getElementById('password_confirm');
  78. var emailBox = doc.getElementById('email');
  79. regButton.addEventListener('tap', function(event) {
  80. var regInfo = {
  81. account: accountBox.value,
  82. password: passwordBox.value,
  83. email: emailBox.value
  84. };
  85. var passwordConfirm = passwordConfirmBox.value;
  86. if (passwordConfirm != regInfo.password) {
  87. plus.nativeUI.toast('密码两次输入不一致');
  88. return;
  89. }
  90. app.reg(regInfo, function(err) {
  91. if (err) {
  92. plus.nativeUI.toast(err);
  93. return;
  94. }
  95. plus.nativeUI.toast('注册成功');
  96. $.openWindow({
  97. url: 'login.html',
  98. id: 'login',
  99. show: {
  100. aniShow: 'pop-in'
  101. }
  102. });
  103. });
  104. });
  105. });
  106. }(mui, document));
  107. </script>
  108. </body>
  109. </html>