小程序入门之注册页面
注册页面：基本内容有账号，密码，确认密码
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 }
