00:00
好的,我们继续啊,那上一节课呢,我们已经成功的去收集了一下这个表达上的数据,对吧?那我们主要呢,是用到这个,呃,像对象呢,去传参,去传一个哪个表达项的标识,同时呢,在这里啊,我们可以去拿到对应的表达项的内容,那么通过event.detail.value去获取的,好,那在收集完表达项的内容以后呢,那这节课呢,我们就可以正式的去做这个对应的登录,那么要做这个登录呢,那就是用户点击这个登录的按钮,然后呢,我们去进行前端验证,呃,然后呢,再去进行后端验证,对吧?好,那这个时候呢,来到我们的结构里边啊,找到我们的登录按钮啊,是这一个。然后呢,我们给这个登录的button呢,咱们去绑定一个点击事件,那这里呢,对应的回调呢,我就叫它login来,那来到GS里面呢,我们去定义一下啊,那这个呢是呃登录的回调,然后呢,我们把这个给它丢过来,好这里的呃步骤呢,就是之前给大家总结过的啊,比如第一个我们说收集表单项的数据,那其实我们已经收集过了啊,只不过是我们需要从那个data中呢,哎,去给它拎出来啊,就认识点data,然后呢,我们把这个phone以及这个password啊拎出来。
01:19
那么接下来呢,我们要做的那就是我们的呃前端验证对吧?啊那前端验证的话呢,首先啊,我们先去验证我们的手机号,也就是说我们的账号,那么手机号验证的话呢,它有这几种场景啊,第一种啊,我们说一下吧,啊这里啊,我们说呃手机号验证啊,它的场景啊第一种呢,呃是我们这个表达项的内容为空啊我们要怎么办?那第二种呢,是他书内容了,但是呢,输的这个手机号啊不正确啊,就格式不正确啊,应该是啊格式嗯不正确啊我们要干嘛?那第三种呢,那就是哎,手机号格式正确。
02:07
对吧,然后呢,那代表着我们的验证球,哎通过哎就这几种。好的,那知道了这个以后啊,首先我们来判断一下,如果说哎,如果说我们的手机号为空,那就说我们上来取反一下对吧,那取反一下为空,一取反为触啊就进来了,那这个时候呢,我们应该提示一下用户啊,就说手机号不能为空,是不是就可以了,那写到这呢,可能有的小伙伴哎,想起来那提示嘛,简单啊,你比如说我们在JJS里边有alert,哎,我先给大家写一下啊,我这儿呢,随便提示一个东西保存一下,那这个时候呢,我们来看一眼。来到我们的模拟器里边,好,我什么也不说我一点大家看这报了一个错,说alert is not function,你要注意啊,现在我们是在小程序的啊,开发环境里边,那么当前的环境呢,跟我们浏览器的环境呢,它并不一样,浏览前的环境我们知道啊,全球的对象呢是window,而我们平时用的alert啊,包括这些呢,它都是window上面的一个方法。
03:19
对吧,那么在小程序的环境里面,全局对象不是window,也没有window这个对象。而在我们小程序啊环境里面,全局对象是谁呢?是微信,所以啊,那在这里呢,要注意,那这个alert呢,我们不能使用,那我们要提示用户的话怎么办?在小程序里边要实现某一个功能的话呢,那这个时候呢,大家需要去看一下官网的API啊,我们去访问一下API里面呢,有很多啊,那因为这个呢是在界面上的提示啊,所以呢,我们看一下界面里面有一个交互来,我们先看一个第一个啊叫微信点收post。
04:00
它的作用呢,是显示我们的消息提示框,那这个方法调用啊,需要传一个对象往下看啊,那其实要传的东西还挺多的,那首先啊,你们看这些API的话呢,先去看一下它的B填项是哪一个,那这样的话呢,我们是可以快速的上手,OKB填项的是title,就是提示的内容,然后icon呢,是我们提示的一个图标来,那下边这些啊,包括是自定义图片啊,延迟等等啊,咱就在这就不用了,我们直接用一个它的提示文本来,那对应的方法我们知道了啊,那接下来呢,我们写一下啊,那这儿呢,我们要去提示我们的用户,那就是微信点收post对吧,里边必须的属性是它啊,那这呢,我们写一个手机号,它不能为空。好呢,假设我们就写了一个必须的属性title,然后我们来到这里。模拟器里面我们看一眼来,那这个时候呢,我点击登录,大家看提示是提示出来了没有问题,但是呢,现在呢,这儿打了一个对勾啊,那现在呢,既然说我们这个相当于是什么,你登录失败啊,验证失败的不应该是对勾对吧?那这个对勾呢,取决于这个IQ啊,它默认值呢,就success成功的图标啊,如果我们不想用它,想换一个怎么办呢?我们往下看一下IQ的可选值有哪些,当你看到这里啊X没有说明,那大家就可以往下翻了,下面肯定有。
05:34
哎,对象icon的合法值成功啊,还有什么loading就正在加载,那么这两个显然我们当前都用不上啊,所以呢,我们选择用最后一个nu不显示图标。不显示图标,而且大家看呃,当用nu的时候,Icon为nu的时候呢,这个title的文本呢,可以显示两行,如果说用上边的图标的话,它对于这个文本呢还有限制啊,最多呢显示七个汉字的长度,哎,这一点呢,我们要注意一下啊,好的,那现在啊,我们要给这个IQ呢设置一个呃值为啊那哎是它。
06:14
来,那这个时候呢,咱们再来看啊,过来重新编译一下。好了,那这个时候呢,点击登录啊,手机号不能为空啊,没有问题,OK,那这个手机号为空的啊,我们就整完了,那假设啊,这个衣服没进来,那说明人家是不是有值呀,哎,有值那我们再往下写,有值的话呢,我们就要验证你输入的手机号是否正确,对吧?那要验证手机号是否正确的话呢,我们需要用到什么正则啊,那这呢,我们来定一个正则啊表达式啊,我let一个啊,Form啊,Reg啊,那后边呢,我们跟一个正则的表达式啊,那正则的话呢,那通常是要写啊,以什么开头,以什么结尾,对不对,我们先把这个写上手机号的话呢,那都是以幺开头,然后第二位的话,注意啊,在我们国内的话呢,那。
07:14
应该是啥,应该是三到九,第二位的话是没有什么没有一跟二的啊,那一的话呢,就我们知道的啊,110或者120或者119,那手机号里面没有一个二。哎,没有一个二,那所以呢,我们这儿就写一个三到九的吧,那这呢来一个比较简单的啊,那这三四啊五六啊,我们再来一个,那这呢应该是多少呢?七啊八,然后再来一个哎九呗,OK,那这是这个这是第二位,那么第三位的数字呢,就比较随意了啊啊你写啥都行,OK,那这个时候呢,只要是数字就行啊,那就更第位,然后一共多少位呢?啊一共是九位,那这就是一个基本的啊验证我们手机号的一个正则表达式。
08:07
好的,那这是这个,那么这个杠D呢,代表数字啊,注意这个斜杠一定要加。它是用来转译的。那不加也不行,好的,那正则也有了,那接下来我们去验证的话,那就是我们要通过这个正则表达式的test的方法呢,去验证一下我们的手机号,如果没有通过,你就为false呗,哎,它的返回值是一个波尔值,通过为处,不通过为false,为false的话,在于取法是不是能够进入到我们这个if条件判断呀,那么接下来我们就可以再给他提示啊,就这个呗。哎,这个那在这里。哎,这把呢,我们应该说什么手机号不正确对吧,或者告诉他手机号的格式错误,因为我们验证是手机号的格式呗,好,那这是这个,那别的就不用动了,然后啊,这里大家要注意啊,那么我们用到这个API的话,你看它下面有成功的回调啊,失败的回调那说明它是个异步的任务啊,因为是个异步的任务啊,保险起见啊,那他走到这儿,那后续的代码没有必要执行,所以我们给他加一个return啊,包括这个啊,也是一样的道理。
09:18
啊,走到这后边代码就不不走了,因为啥没有必要了,好,那这是这个啊,那如果啊前两个if它都没有啊进去,那说明手机号是不是正确呢?哎,接下来我们来验证一下密码,那么当前我们即将要登录的接口呢,是由网易云音乐提供的真实的啊接口。好,那么在这里。啊,网易云页那个密码呢,我们还我还真没有去看啊,所以呢,呃,对于它具体的这个密码的限制呢,啊,我们这儿就不做处理了,我们只需要验证一下你的密码不能为空,那么这里呢,我们写个比较简单的啊,那就是如果你的密码啊为空啊,那就是password嗯,没空,我们要干嘛呢?我们要提示一下用户对吧?来把上面啊这一个我们复制过来,那这里呢,就告诉他啊,你的密码不能为空对吧?那么接下来如果是走到下边的话呢,那就是哎,前端验证通过了,前端验证通过了,来那这呢,我们玩一个吧,把这个放到这啊那这个呢,这儿表示啊前端验证嗯通过先来看一下啊,那这个return呢,没啥用了,X我也删了,哎写到这儿呢,是为了测试啊,我们看一眼。
10:39
过来。我什么也不输,手机号不能为空,我随便输一个错误的格,错误格式的手机号,走诶手机号格式错误,那么接下来呢,我输一个正确的啊,比如说13112345678来,那这是个正确的手机号,对不对,那这个时候再登录,诶说密码不能为空,那么接下来呢,我输一个密码123吧,走大家看前端验证通过,哎没有问题,那说明我们前端验证这一块呢,哎就跑通了,好的,那这一节课呢,我们主要是去做的前端验证,然后啊,这里边呢,我们又。
11:21
接触一个新的东西啊,就是在界面上有个提示呢,叫微信点收tot啊,那这个呢也不难啊,而这个呢,在我们的开发中呢,也经常用到啊,所以呢,小伙伴需要去啊亲自呢去练习一下好的,那这节课呢,我们先讲到这里。
我来说两句