小程序入门之注册页面

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

wxml源码：

1. 顶部提示错误信息

2. 输入内容长度限制

3. 点击注册进行表单验证

4. 存在问题：输入框focus 无效果

 1 
11 
12 if="{{showTopTips}}">{{errorMsg}}
13 
14 
15 
16 
17 
18 

19 
20 
21 
22 
23 账号
24 
25 
26 
27 
28 
29 
30 
31 密码
32 
33 
34 
35 
36 
37 
38 
39 确认密码
40 
41 
42 
43 
44 
45 
46 注册
47 
48 
49 
50 
51 

 

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值) ；使用条件：需通过
与一起使用
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 }