小程序入门之注册页面

注册页面：基本内容有帐号，密码，确认密码

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 }