小程序入門之註冊頁面

註冊頁面：基本內容有帳號，密碼，確認密碼

wxml源碼：

1. 頂部提示錯誤信息

2. 輸入內容長度限制

3. 點擊註冊進行表單驗證

4. 存在問題：輸入框focus 無效果

 1 <!--
 2 變量說明：  3 showTopTips ： 是否顯示提示信息  4 errorMsg ： 錯誤信息  5 windowHeight ：設備的窗口的高度  6 windowWidth ： 設備的窗口的寬度  7 account ： 帳號  8 password ：密碼  9 subPassword ：確認密碼 10 -->
11 <view class="page__bd">
12 <view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">{{errorMsg}}</view>
13 <view style="height: {{windowHeight}}px; width: {{windowWidth}}px;" class="back_img">
14 </view>
15 <view style="position:absolute;top:{{windowHeight * 0.06}}px;">
16 <image src="../../images/meBack.jpg" style="width: {{windowWidth * 0.4}}px;height:{{windowWidth * 0.4}}px; margin-left:{{windowWidth * 0.5 - 80}}px;border-radius:{{windowWidth * 0.2}}px;"></image>
17 </view>
18 <form bindsubmit="formSubmit" bindreset="formReset">
19 <view class="login_info" style="top:{{windowHeight * 0.35}}px;width: {{windowWidth * 0.92}}px;">
20 <view class="weui-cells weui-cells_after-title login_form">
21 <view class="weui-cell weui-cell_input">
22 <view class="weui-cell__hd">
23 <view class="weui-label">帳號</view>
24 </view>
25 <view class="weui-cell__bd">
26 <input class="weui-input" placeholder="請輸入帳號" type="text" maxlength="20" value="{{account}}" focus="true" name="account"/>
27 </view>
28 </view>
29 <view class="weui-cell weui-cell_input">
30 <view class="weui-cell__hd">
31 <view class="weui-label">密碼</view>
32 </view>
33 <view class="weui-cell__bd">
34 <input class="weui-input" placeholder="請輸入密碼" type="password" maxlength="10" value="{{password}}" name="password"/>
35 </view>
36 </view>
37 <view class="weui-cell weui-cell_input">
38 <view class="weui-cell__hd">
39 <view class="weui-label">確認密碼</view>
40 </view>
41 <view class="weui-cell__bd">
42 <input class="weui-input" placeholder="請輸入確認密碼" type="password" maxlength="10" value="{{subPassword}}" name="subPassword"/>
43 </view>
44 </view>
45 <view class="weui-btn-area">
46 <button class="weui-btn" type="primary" formType="submit">註冊</button>
47 </view>
48 </view>
49 </view>
50 </form>
51 </view>

 

wxss源碼：
1. 背景圖片以毛玻璃的形式展現

2. form表單背景透明

 1 .back_img{  2 background: url(../../images/meBack.jpg) no-repeat;
 3 background-size:cover;  4 -webkit-filter: blur(10px); /* Chrome, Opera */
 5 -moz-filter: blur(10px);  6 -ms-filter: blur(10px);  7 filter: blur(10px);  8 z-index:0;  9 position:relative; 10 } 11 .login_info{ 12 z-index: 999; 13 position:absolute; 14 } 15 .login_form{ 16 border-radius:5px; 17 margin-left:8%; 18 background-color: rgba(255,255,255,0.2); 19 }

 

js源碼：
1. form表單獲取值

2. request請求

3. 交互反饋彈出框

4. 導航頁面跳轉傳值

 

 1 var util = require('../../utils/util.js');  2 var app = getApp();  3 
 4 Page({  5 data: {  6 showTopTips: false,  7 errorMsg: ""
 8 },  9 onLoad: function () { 10 var that = this; 11 wx.getSystemInfo({ 12 success: function (res) { 13 that.setData({ 14 windowHeight: res.windowHeight, 15 windowWidth: res.windowWidth 16 }) 17 } 18 }); 19 }, 20 
21 formSubmit: function (e) { 22 // form 表單取值，格式 e.detail.value.name(name爲input中自定義name值) ；使用條件：需經過<form bindsubmit="formSubmit">與<button formType="submit">一塊兒使用
23 var account = e.detail.value.account; 24 var password = e.detail.value.password; 25 var subPassword = e.detail.value.subPassword; 26 var that = this; 27 // 判斷帳號是否爲空和判斷該帳號名是否被註冊
28 if ("" == util.trim(account)) { 29 util.isError("帳號不能爲空", that); 30 return; 31 } else { 32 util.clearError(that); 33 app.ajax.req('/register/checkLoginName', { 34 "loginName": account 35 }, function (res) { 36 if (!res) { 37 util.isError("帳號已經被註冊過", that); 38 return; 39 } 40 }); 41 } 42 // 判斷密碼是否爲空
43 if ("" == util.trim(password)) { 44 util.isError("密碼不能爲空", that); 45 return; 46 } else { 47 util.clearError(that); 48 } 49 // 兩個密碼必須一致
50 if (subPassword != password) { 51 util.isError("輸入密碼不一致", that); 52 return; 53 } else { 54 util.clearError(that); 55 } 56 // 驗證都經過了執行註冊方法
57 app.ajax.req('/itdragon/register', { 58 "account": account, 59 "password": password 60 }, function (res) { 61 if (true == res) { 62 // 顯示模態彈窗
63 wx.showModal({ 64 title: '註冊狀態', 65 content: '註冊成功，請點擊肯定登陸吧', 66 success: function (res) { 67 if (res.confirm) { 68 // 點擊肯定後跳轉登陸頁面並關閉當前頁面
69 wx.redirectTo({ 70 url: '../login/login?account=' + account + '&password?=' + password + ''
71 }) 72 } 73 } 74 }) 75 } else { 76 // 顯示消息提示框
77 wx.showToast({ 78 title: '註冊失敗', 79 icon: 'error', 80 duration: 2000
81 }) 82 } 83 }); 84 } 85 })

 

util.js 源碼（封裝了一些經常使用的方法）

 1 function formatTime(date) {  2 var year = date.getFullYear()  3 var month = date.getMonth() + 1
 4 var day = date.getDate()  5 
 6 var hour = date.getHours()  7 var minute = date.getMinutes()  8 var second = date.getSeconds()  9 
10 return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 11 } 12 
13 function formatNumber(n) { 14 n = n.toString() 15 return n[1] ? n : '0' + n 16 } 17 
18 var rootDocment = 'https://www.itit123.cn'; 19 function req(url,data,cb){ 20 wx.request({ 21 url: rootDocment + url, 22 data: data, 23 method: 'post', 24 header: {'Content-Type':'application/x-www-form-urlencoded'}, 25 success: function(res){ 26 return typeof cb == "function" && cb(res.data) 27 }, 28 fail: function(){ 29 return typeof cb == "function" && cb(false) 30 } 31 }) 32 } 33 
34 function getReq(url,data,cb){ 35 wx.request({ 36 url: rootDocment + url, 37 data: data, 38 method: 'get', 39 header: {'Content-Type':'application/x-www-form-urlencoded'}, 40 success: function(res){ 41 return typeof cb == "function" && cb(res.data) 42 }, 43 fail: function(){ 44 return typeof cb == "function" && cb(false) 45 } 46 }) 47 } 48 
49 // 去先後空格
50 function trim(str) { 51 return str.replace(/(^\s*)|(\s*$)/g, ""); 52 } 53 
54 // 提示錯誤信息
55 function isError(msg, that) { 56 that.setData({ 57 showTopTips: true, 58 errorMsg: msg 59 }) 60 } 61 
62 // 清空錯誤信息
63 function clearError(that) { 64 that.setData({ 65 showTopTips: false, 66 errorMsg: ""
67 }) 68 } 69 
70 module.exports = { 71 formatTime: formatTime, 72 req: req, 73 trim: trim, 74 isError: isError, 75 clearError: clearError, 76 getReq: getReq 77 }