1.知识点
（1）利用正则表达式验证邮箱的方法。
（2）模态对话框API函数wx.showModal(Object object)的使用方法。
（3）页面跳转API函数wx.navigateTo(Object object)的使用方法。
（4）form、input、button等组件的使用方法。
2.相关知识总结
2.1正则表达式
2.1.1正则表达式由一些普通字符和一些元字符组成。普通字符包括大小写字母和数字，而元字符则具有特殊含义。正则表达式常用元字符含义如表2.1所示。
| 元字符 | 描述 |
|---|---|
| \ | 转义字符标识符 |
| ^ | 匹配输入字行首。如果设置了RegExp对象的Multiline属性，^也匹配“\n”或“\r”之后的位置 |
| $ | 匹配输入行尾。如果设置了RegExp对象的Multiline属性，$也匹配“\n”或“\r”之前的位置 |
| * | 匹配前面的子表达式任意次。例如，zo*能匹配“z”，也能匹配“zo”以及“zoo”。等价于{0，} |
| + | 匹配前面的子表达式一次或多次（大于等于1次） |
| ？ | 匹配前面的子表达式零次或一次。例如，“do(es)?”可以匹配“do”或“does”。等价于{0，1} |
| {n} | n是一个非负整数。匹配确定的n次。例如，“o{2}”不能匹配“Bob”中的“o”，但是能匹配“food”中的两个o |
| {n,m} | m和n均为非负整数，其中n<=m。最少匹配n次且最多匹配m次 |
| [a-z] | 字符范围。匹配指定范围内的任意字符。例如，[a-z]可以匹配“a”到“z”范围内的任意小写字母字符。注意：只有连字符在字符组内部时，并且出现在两个字符之间时，才能表示字符的范围；如果出现在字符组的开头，则只能表示连字符本身 |
| [^a-z] | 负值字符范围。匹配任何不在指定范围内的任意字符。例如，【^a-z】可以匹配任何不在“a”到“z”范围内的任意字符 |
| \d | 匹配一个数字字符。等价于[0-9]。grep要加上-P，perl正则支持 |
| \D | 匹配一个非数字字符。等价于【^0-9】。grep要加上-P，perl正则支持 |
| \s | 匹配任何不可见字符，包括空格、制表符、换页符等。等价于[\f\n\r\t\v] |
| \S | 匹配任何可见字符。等价于【^\f\n\r\t\v】 |
| \w | 匹配包括下划线的任何单词字符。类似但不等价于“[A-Za-z0-9_]”，这里的“单词”字符使用Unicode字符集 |
| \W | 匹配任何非单词字符。等价于“【^A-Za-z0-9_】” |
2.1.2利用正则表达式验证电子邮箱。如下正则表达式的含义：
/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(.[a-zA-Z0-9-]+)*.[a-zA-Z0-9]{2,6}$/
（1）正则表达式以符号/^开始，以符号$/结束。
（2）@之前的表达式[a-zA-Z0-9_.-]+表示字符串必须由1个及1个以上的大小写字母、数字、下划线、点或横杠组成，+号表示前面字符出现次数必须大于或等于1.
（3）@之后的表达式[a-zA-Z0-9-]+表示字符串必须由1个及1个以上的大小的大小写字母、数字或横杠组成。
（4）(\.[a-zA-Z0-9-]+)*表示后面字符串第一个字符必须是点，点后面字符串必须由1个及1个以上的大小写字母、数字或横杠组成。*表示匹配前面的子表达式任意次。
（5）\\.[a-zA-Z0-9]{2,6}表示最后一个表达式由2~6个字母或数字构成。
2.2显示模态对话框的API函数wx.showModal（Object object）
模态对话框与非模态对话框的区别是：模态对话框显示时不能操作该应用程序的其他窗口界面，而非模态对话框显示时可以操作该应用程序的其他窗口界面。显示模态对话框的API函数参数属性表如表2.2所示。
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| title | string | 是 | 提示的标题 | |
| content | string | 是 | 提示的内容 | |
| showCancel | boolean | TRUE | 否 | 是否显示“取消”按钮 |
| cancelText | string | ‘取消’ | 否 | “取消”按钮的文字，最多4个字符 |
| cancelColor | string | #000000 | 否 | “取消”按钮的文字颜色，必须是十六进制格式的颜色字符串 |
| confireText | string | ‘确定’ | 否 | “确定”按钮的文字，最多4个字符 |
| confirmColor | string | #576B95 | 否 | “确定”按钮的文字颜色，必须是十六进制格式的颜色字符串 |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
object.success(Object res)回调函数的参数Object res的属性如下表2.3所示。
| 属性 | 类型 | 说明 |
|---|---|---|
| confirm | boolean | 为TRUE时，表示用户点击了“确定”按钮 |
| cancel | boolean | 为TRUE时，表示用户点击了“取消”按钮（用于Android系统区分点击蒙层关闭还是点击“取消”按钮关闭） |
2.3页面跳转API函数wx.navigateTo(Object object)
保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabBar页面。使用wx.navigateBack可以返回到原页面。小程序中页面最多10层。参数Object object的属性出success、fail和complete三个回调函数外，还有一个string类型的必填属性url，表示需要跳转的应用内非tabBar的页面的路径，路径后可以带参数。
2.4form表单
form表单组件用于将用户在其内部组件switch、input、checkbox、silder、picker内输入的内容提交。当点击form表单的form-type为submit的button组件时，会将表单组件中的value值进行提交，需要在表单内各组件中加上name来区分不同组件的value。form组件常用属性说明如下表2.4所示。
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| bindsubmit | eventhandle | 否 | 携带form中的数据触发submit事件，event.detail={value:{‘name’:’value’},formId:’’} |
| bindreset | eventhandle | 否 | 表单重置时会触发reset事件 |
2.5picker选择器组件
2.5.1picker组件是从屏幕底部弹起的滚动选择器，现支持5中类型的选择器，通过mode来区分，分别是：普通选择器、多列选择器、时间选择器、日期选择器、省市选择器，默认的是普通选择器。各种类型picker组件的属性说明如下表2.5~2.9所示。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| range | array/object array | [] | mode为selector或multiSelector时，range有效 |
| range-key | string | 当range是一个object array时，通过range-key来指定Object中key的值作为选择器显示内容 | |
| value | number | 0 | value的值表示选择了range中的第几个（下标从0开始） |
| bindchange | eventHandle | value改变时触发change事件，event.detail={value:value} |
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| range | 二维array/二维object array | [] | mode为selector或multiSelector时，range有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[[“a”,”b”],[“c”,”d”]] |
| range-key | string | 当range是一个object array时，通过二维range-key来指定Object中key的值作为选择器显示内容 | |
| value | array | [] | value每一项的值表示选择了range中的第几个（下标从0开始） |
| bindchange | eventhandle | value改变时触发change事件，event.detail={value:value} | |
| bindcolumnchange | eventhandle | 某一列的值改变时触发，columnchange事件，event.detail={column:column,value:value}，column的值表示改变了第几列（下标从0开始），value的值表示变更值的下标 |
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | string | 表示选中的时间，格式为”hh:mm” | |
| start | string | 表示有效时间范围的开始，字符串格式为”hh:mm” | |
| end | string | 表示有效时间范围的结束，字符串格式为”hh:mm” | |
| bindchange | eventhandle | value改变时触发change事件，event.detail={value:value} |
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | string | 0 | 表示选中的日期，格式为”YYYY-MM-DD” |
| start | string | 表示有效日期范围的开始，字符串格式为”YYYY-MM-DD” | |
| end | string | 表示有效日期范围的结束，字符串格式为”YYYY-MM-DD” | |
| fields | string | day | 有效值year，month，day，表示选择器的粒度 |
| bindchange | eventhandle | value改变时触发change事件，event.detail={value:value} |
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | array | [] | 表示选中的省市区，默认选中每一列的第一个值 |
| custom-item | string | 可为每一列的顶部添加一个自定义的项 | |
| bindchange | eventhandle | value改变时触发change事件，event.detail={value:value,code:code,postcode:postcode}，其中字段code时统计用区划代码，postcode时邮政编码 |
3.案例分析
3.1案例描述
编写一个考生选择考试场次的小程序，考生首先利用邮箱和密码登录，输入自己的姓名和学号后选择考试场次。考生登陆时需要进行邮箱和密码认证，如果某项输入为空，或者邮箱填写不正确，或者输入的密码和确认密码不一致，将给出错误提示并要求重新填写。
3.2实现效果
根据案例描述可以做出如下图所示的效果。
（1）在没有输入邮箱或密码情况下点击“登录”按钮，则会出现如图01所示的界面，在此时界面下方给出了“邮箱或密码不得为空！”的提示。
（2）输入邮箱地址时，邮箱地址input组件的边框颜色发生变化，如果邮箱格式输入不正确，则在输入完成时会显示“邮箱格式错误”的提示。
（3）输入密码时，如果两次输入的密码不一致，点击“登录”按钮会给出“两次输入密码不一致”的提示，如图02所示。
（4)如果邮箱和密码都正确，点击“登录”将进入”考试时段选择”界面，此时姓名input组建将自动获得焦点，输入完姓名和学号后，当点击“请选择考试时段：”文本时，在屏幕下方弹出三个场次的时间段，如图03所示。
（5）所有信息输入和选择完成后点击“确定”按钮，此时将弹出“确认信息”对话框，如图04所示，如果信息无误点击“确认”按钮，此时出现“信息确认”对话框“如果信息不正确点击”取消“按钮可以重新填写。
3.3案例实现
3.3.1编写index.wxml文件代码
（1）在form组件中利用text组建和input组件实现电子邮件、密码和确认密码的输入提示及输入，后面放置1个button登录按钮实现form组建的提交事件，按钮后main防治了2个view组件用来显示当邮箱或密码与确认密码不一致是的错误提示。
（2）代码中的事件绑定处理函数由2个：form组件提交事件绑定函数formSubmit和input组件输入变化事件绑定函数inputemail，这两个函数都在input.js文件中进行定义。
（3）代码中主要使用了8种样式：page，.hr，.lineLayout，text，input，input：hover，button，.txt。
<!--index.wxml-->
<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}}" placeholder="请输入电子邮箱" />
</view>
<view class="lineLayout">
<text>输入密码：</text>
<input type="password" name="password" value="{{getPwd}}" placeholder="请输入密码" />
</view>
<view class="lineLayout">
<text>确认密码：</text>
<input type="password" name="confirm" value="{{getPwdConfirm}}" placeholder="请再次输入密码" />
</view>
<view>
<button type="primary" form-type="submit">登录</button>
</view>
<view>
<view class="txt">{{showMsg01}}</view>
<view class="txt">{{showMsg02}}</view>
</view>
</form>
</view>
3.3.2编写index.wxss文件代码
/**index.wxss**/
.lineLayout{
display: inline-block;
margin: 10px;
}
.hr{
height: 2px;
background-color: greenyellow;
margin: 10px 0;
}
.text{
float: left;
}
input{
width: 180px;
height: 30px;
border-bottom: 2px solid silver;
float: right;
}
input:hover{
border-bottom: 2px solid chocolate;
}
button{
width: 150px;
margin: 20px auto;
}
page{
height: 100%;
background: gainsboro;
}
.txt{
color: red;
background: yellow;
}
3.3.3编写index.js文件代码
代码主要定义了3个函数：formSubmit，inputemail和checkEmail。
（1）form组件提交事件函数formSubmit。当点击form组件中的提交按钮后引发该事件。函数首先根据从邮箱和密码输入框中获取的字符串长度e.detail.value.email.length和e.detail.value.password.length判断输入的数据是否为空，如果为空给出错误提示，否则再判断密码和确认密码是否一致，如果不一致给出错误提示并清空两个输入框中的内容，如果一致则让页面跳转带detail页面。
（2）邮件输入框输入变化函数inputemail。当输入框中输入的内容发生变化时引发该事件。函数首先获取邮件输入框中输入的值e.detail.value，然后调用自定义对象函数this.checkEmail（）判断输入的字符串是否符合邮箱格式要求。
（3）自定义对象函数checkEmail。首先将正则表达式邮箱验证字符串复制给变量str，然后调用字符串的test函数来验证在邮箱输入框中输入的字符串email是否符合正则表达式的要求，如果符合要求则返回ture，表示通过验证，否则调用信息框给出错误提示，清空邮件输入框内容并返回false，表示没有通过验证。
// 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){
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
}
}
})
3.3.4在pages文件夹中创建detail文件夹，在其中添加4个文件，然后编写detail.wxml文件代码。该页面的主要功能是：用户输入姓名和学号，并选择考试时段。耶main主要利用form组件，input组件和picker组件来实现相应功能。
（1）文件代码绑定的事件处理函数包括：form组件提交事件函数formSubmit和picker组件选择变化事件函数chooseTime。这两个函数在detail.js文件中进行了定义。
（2）文件代码中使用的样式包括：page，.flex，input，input：hover，picker，.btnLayout和button。这些样式在detail.wxss文件中进行定义。
<!--pages/detail/detail.wxml-->
<view class="box">
<view class="title">考试时段选择</view>
<form bindsubmit="formSubmit">
<view class="flex">
<text>姓名：</text>
<input type="text" value="{{name}}" name="name" auto-focus />
</view>
<view class="flex">
<text>学号：</text>
<input type="number" value="{{id}}" name="id" />
</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>
3.3.5编写detail.wxss文件代码
/* pages/detail/detail.wxss */
page{
height: 100%;
background: gainsboro;
}
.flex{
display: flex;
margin: 5px 0;
justify-content: flex-start;
align-items: center;
}
.btnLayout{
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 50px 0;
width: 100%;
}
input{
width: 150px;
height: 30px;
border: 2px solid silver;
margin: 5px;
}
input:hover{
border: 2px solid chocolate;
}
picker{
margin: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
button{
width: 80px;
}
3.3.6编写detail.js文件代码
代码主要初始化了picker组件使用的数组array，定义了form组件提交事件函数formSubmit和picker组件选择变化事件函数chooseTime。
（1）array数组初始化。在打他中初始化了array数组。
（2）formSubmit函数。首先获取input组件中输入的姓名、学号以及picker组件的选项序号，然后调用wx.showModal（）模态对话框显示输入和选择的信息并给出正确的提示，如果点击“确定”按钮，则调用wx.showModal（）模态对话框显示确认信息，页面跳转到主页面；如果点击“取消”按钮，则在console中显示取消信息。
（3）chooseTime函数。用于获取选择的考试时间段，利用e.detail.value表达式可以获得选项的序号，在视图层根据序号找到相应的时间段。
// 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;
wx.showModal({ //显示模态对话框
title: '确认信息',
content:e.detail.value.name+"同学，你的学号是"+e.detail.value.id+"，你选择的场次是："+this.data.array[time]+"，请确认信息！",
success:function(res){ //wx.shoeModal接口调用成功的回调函数
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
})
}
})
