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
})
}
})