利用正则表达式验证邮箱的方法、 wx.showModal()和wx.navigateTo() 函数的使用方法
<!--pages/index/index.wxml--> <image src="../image/ncut.jpg" mode="scaleToFill"></image> <view class="box"> <view class='title'>考试场次选择</view> <view class='hr'></view> <form bindsubmit="formSubmit"> <view class="lineLayout"> <text>电子邮箱：</text> <input type="text" bindchange="inputemail" name="email" value="{{getEmail}}"></input> </view> <view class="lineLayout"> <text> 输入密码：</text> <input type="password" name="password" value="{{getPwd}}"></input> </view> <view class="lineLayout"> <text> 确认密码：</text> <input type="password" name="confirm" value="{{getPwdConfirm}}"></input> </view> <button type='primary' form-type='submit'>登录</button> <view> <view class="txt">{{showMsg01}}</view> <view class='txt'>{{showMsg02}}</view> </view> </form> </view>
<view class="txt">{{showMsg01}}</view>
<view class='txt'>{{showMsg02}}</view>
在js中没有初始化或者初始化为空，所以这里不显示
// pages/index/index.js
Page({
data: {
getEmail: '',
getPwd: '',
getPwdConfirm: ''
},
formSubmit: function(e) { //提交表单（点击注册按钮）事件
if (e.detail.value.email.length == 0 || e.detail.value.password.length == 0) { //判断邮箱和密码输入框内容是否为空。
this.setData({
showMsg01: '邮箱或密码不得为空！',
})
} else if (e.detail.value.password != e.detail.value.confirm) { //判断密码和确认密码是否一致
this.setData({
showMsg02: '两次输入密码不一致！',
getPwd: '', //清空输入框内容
getPwdConfirm: ''
})
} else {
wx.navigateTo({ //页面跳转
url: '../detail/detail',
})
}
},
inputemail: function(e) { //input组件事件函数
var email = e.detail.value
var checkedNum = this.checkEmail(email)
},
checkEmail: function(email) { //自定义函数，检查输入的邮箱地址是否满足要求
let str = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/ //正则表达式
if (str.test(email)) { //检查正则表达式是否符合邮箱地址要求
return true
} else {
wx.showToast({ //显示消息提示框
title: '邮箱格式错误',
icon: 'loading'
})
this.setData({
getEmail: ''
})
return false
}
}
})
/* pages/index/index.wxss */ page { /* 设置页面样式 */ height: 100%; background: gainsboro; } image { /* 设置图片样式 */ width: 100%; height: 110px; } .hr { /* 设置水平线样式 */ height: 2px; background-color: yellowgreen; margin: 10px 0; } .lineLayout { /* 设置text和input组件布局 */ display: inline-block; /* 设置布局模式,行内布局-块布局，可以设置行高，在input样式中设置 */ margin: 10px; } text { /* 设置text组件样式 */ float: left; /* 设置为左浮动 */ } input { /* 设置input组件样式 */ width: 180px; height: 30px; border-bottom: 2px solid blue; float: left; /* 设置为左浮动 */ } input:hover { /*设置输入时input组件的样式，一点input后变颜色*/ border-bottom: 2px solid chocolate; } button { /* 设置button组件样式 */ width: 150px; margin: 20px auto; /*上下边距20px，左右边距自动（左右边距相等）*/ } .txt { /* 设置信息提示区文本显示样式 */ color: red; background: yellow; }
<!--pages/detail/detail.wxml--> <view class="box"> <view class='title'>考试时段选择</view> <form bindsubmit="formSubmit"> <view class="flex"> <text>姓名：</text> <input type="text" auto-focus name="name" value="{{name}}"></input> </view> <view class="flex"> <text>学号：</text> <input type="number" name="id" value="{{id}}"></input> </view> <picker bindchange="chooseTime" value="{{index}}" range="{{array}}" name="time"> 请选择考试时段：{{array[index]}} </picker> <view class="btnLayout"> <button type='primary' form-type='submit'>确定</button> <button type='primary'>取消</button> </view> </form> </view>
auto-focus自动进行获取焦点
index选择那一项的下标，页面显示array[index]
<form bindsubmit="formSubmit">绑定事件对应的函数是formSubmit，该事件是由form-type='submit'这个确定按钮引发的，取消按钮没有绑定事件函数，没有form-type='reset'
<button type='primary' form-type='submit'>确定</button>
<button type='primary'>取消</button>
// pages/detail/detail.js Page({ data: { array: [//普通选择器数据的初始化 '第一场15:00', '第二场16:20', '第三场17:40' ] }, formSubmit: function (e) {//点击确定按钮引发的函数 var name = e.detail.value.name; //局部变量，获取姓名输入框内容 var id = e.detail.value.id; //局部变量，获取学号输入框内容 var time=e.detail.value.time; //局部变量，获取考试场次序号及时间，time获取的选择时段的下标 wx.showModal({ //显示模态对话框 title: '确认信息', content: e.detail.value.name + "同学，你的学号是："+id+"，你选择的场次是："+this.data.array[time]+",请确认信息！", success: function (res) { //wx.showModal接口调用成功的回调函数 if (res.confirm) { wx.showModal({ title: '信息确认', content: '你的考场信息已经确认！', }) wx.navigateTo({ //页面跳转，切换到主页 url: '../index/index', }) } else { console.log('用户点击取消') } } }) }, chooseTime: function (e) {//获取选择时段的下标 var index = e.detail.value //获得picker组件选项下标，普通选择器获取的是下标 this.setData({ index: index//下标渲染到detail.wxml文件 }) } })
timepick组件数组选择的那项的下标
this.data.array[time]选择的具体的时段
success回调函数，当模态对话框显示以后，说明调用成功，res代表窗口的资源，其中包含确定按钮
chooseTime，pick组件选择的时候引发的，普通选择器获得的是下标，然后把下标渲染到detail.wxml文件
/* pages/detail/detail.wxss */ page { /* 设置页面样式 */ height: 100%; background: gainsboro; } .flex { /* 设置text组件和input组件的布局 */ display: flex;/*flex布局，默认水平方向*/ margin: 5px 0; justify-content: flex-start; /* 设置水平方向左对齐 */ align-items: center; /* 设置垂直方向居中对齐 */ } input { /* 设置input组件样式 */ width: 150px; height: 30px; border: 2px solid gray; /* 设置input组件边框样式 */ margin: 5px; } input:hover { /* 设置输入时input组件边框样式 */ border: 2px solid chocolate; } picker { /* 设置picker组件样式 */ margin: 10px; padding-top: 10px; padding-bottom: 10px; } .btnLayout { /* 设置button组件布局 */ display: flex;/*flex布局,水平方向*/ flex-direction: row; justify-content: space-around;/*中间有间隔，两端也有间隔，两端的间隔一样的*/ margin: 50px 0; width: 100%; } button { /* 设置button组件样式 */ width: 80px; }
正则表达式验证邮箱的方法
正则表达式
由一些普通字符和一些元字符 （metacharacters）组成。普通字符包括大 小写字母和数字，而元字符则具有特殊的 含义，其含义可以查阅配套教材或其他资料。
正则表达式验证邮箱
正则表达式以符号/^开始，以符号$/结束，例如： /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9- ]+)*\.[a-zA-Z0-9]{2,6}$/
@之前的表达式： [a-zA-Z0-9_.-]+ 表示字符串必须由1个及1个以上的大小写字母、 数字、下划线、点或横杠组成，+号表示前面字符出现次数必须大于或等于1
利用正则表达式验证电子邮箱
@之后的表达式：[a-zA-Z0-9-]+ 表示字符串必须由1个及1个以上的大小写字母、 数字、下划线或横杠组成。
(\.[a-zA-Z0-9-]+)* 表示后面字符串第一个字符必须是点，点后面字符 串必须由1个及以上的大小写字母、数字、下划线或 横杠组成。*表示匹配前面的子表达式任意次。
\.[a-zA-Z0-9]{2,6} 表示最后一个表达式由2～6个字母或数字构成
模态对话框 API 函 数 wx.showModal() 的 使用方法
wx.showModal(Object object)
用于显示模态对话框。模态对话框 显 示时不能操作该应用程序的其他窗口，而非 模态对话框则可以。其参数主要属性如下：
success(Object res)回调函数的参数属性
页面跳转API函数wx.navigateTo()的使用 方法
wx.navigateTo(Object object)
保留当前页面，跳转到应用内的某个页面。 但 是不能跳到 tabbar 页面。使用 wx.navigateBack()函 数可以返回到原页面。其参数属性除success、fail和 complete三个回调函数外，还有一个string类型的必 填属性url，表示需要跳转页面的路径。
