00:00
大家好,上节课呢,我们做了一个呃,验证码,那这节课呢,我们开始做验证,其实验证的过程呢,分几部分去做。比如说首先呢,我们需要在前端做验证,为什么在做前端用JS去验证呢?防止一些君子的错误行为,什么叫君子错误行为,比如说用户名不注意输入错了,这样的话你提交的服务器,然后服务器再返回来,那他用数据有可能白输入了,然后还得重新填写,这是比较麻烦的。但是呢,前端防止不了一些小人或者一些黑客去攻击他模拟表单,再继续,比如说绕过你这个表单,自己编写的表单提交到你这个位置,然后一样是可以注册成功的,所以呢,我们需要在服务器端再去验证,用so或者是过滤器,我们去验证流开了是这样的一个过程,那咱们一步一步这个流程去写,咱们呃,后边的流程还没讲到,咱们先不说,咱们先来完成这个表单上面的JS这样的一个呃验证的过程。好,我们打开这个。呃,表单注册的表单,我们看一下这个结构。
01:01
我们在用户一输入错的时候,你看我后边都流入了一个,比如用户名为空,那我在后边留了一个SPA,在这里面提示他啊用户名。不能为空这样的一个字符串,那咱们先加一个样式,比如说。Class。等于咱们叫做呃,就叫做错误吧,比如说叫做呃E。2OR这样的一个类,那这个类呢,咱们在这块,当然你可以写到JS文件里边去,我就直接在这写啊。大家看起来不是关系。然后我们看一下是哪个里边类供表单里边的,呃,P里边的这个,那我们就可以是点reg注册里边的P标签里边的。然后点ERO来,我们写一个写一个样式,简单一点的样式就可以,当然了,你想美化做成什么样的都可以,比如说。呃,先低层类用的是。
02:01
变成一个块可以显示的音的啊,然后呢,我们比如说加边框。边框,比如说一个像素的实体边框,实体边框颜色呢,就是随便给一个吧,比如说偏红一点就行,FF是红色的,其他的比如说随便给啊,比如说把三大5A呀,随便给一个偏红一点的颜色就可以,然后。呃,背景颜色。背景color或者直接right附加的color行,然后呢,我们跟这个边框给的是一样的颜色,就可以比比边框,呃,稍稍变化一下,比如说随便给吧。八一那偏浅一些就可以了,然后字体颜色咱们不变化,咱们看一下这里边假如说写一个。用户名不能为空,我们刷新一下,看看在这块会不会显示。
03:00
用户名不能为空对吧。那如果你觉得颜色不好看的话,你给他调一下高度宽度,你都可以去调整,对吧,仔细去比如说。高度。呃,He高度,比如说给上25个像素拔高。让它居中。25个像素。然后五。比如说给上20个像素。更新一下。啊,就都可以了,当然想要这个距离,有一些距离,那么我们也可以。马左。比如说20个像素。对吧,用户名不能为空,那你想要在里边右边也不能为空,那直接这么写吧。这块是上右下左。有两个。看一下。就可以对吧,左右就分开了。
04:02
这样的话,当我们鼠标一点击的时候,就让它为空,当鼠标一一输入的时候,焦点一离开的时候,比如说我输入一个用户名,鼠标一到别的焦点,焦点一离开的时候,然后去验证,所以呢,我们需要在每个里边加入两个验证的信息呢,我们写到这里边来,那就得用GS来写了,我这里边。不加这个去掉,我们只留这个样式,样式呢我们也用GS来写,所以我们需要在这个上面。加两个事件,加两个事件,比如说一个是鼠标一获取焦点,一获取焦点的时候就要。后边这个里边的样式清除,里边的内容清除。所以呢,我们需要在这里边加上两个事件,一个是呃,鼠标一放上去,鼠标一放上去呢,我们用的是。On fo。过去焦点,过去焦点呢,比如说我们做一个方法叫做焦点的选项吧。
05:00
Fo,把当前对象传进去,那我存当前对象,就能获取当前对象的这个值,对吧?当鼠标一离开o b lur,那我们就开始检查这个数据对不对,那我们就叫做焦点,呃,检查检查项,然后同样我把这传进来。那不光是这里边儿有所有的这几个我们都需要。加上比如说呃。用户名密码对吧,然后还有。像用户名可以为,假如说你呃,需要验证的项目就加,不需要验证的项就不加,对吧,那比如说呃密码。确认密码,比如说我加呃这几个项,那当然了,其他的呢,你可以加也可以不加,我就验证几个,其他的你想验证都可以了,比如手机号码,送货地址啊,你想验证都是可以的,如果不需要验证,你就不加这个,当然了还有这个。
06:01
图片。验证码我们得验证一下,这是我描写的重点,那回来能节省时间,我就少验证几个,其实道理都是一样的,同样,那我现在需要在嗯,JS里边去,也就是我们新建的这个。而JS里边把这两个函数我们得写出来,一个是交点E,放上去fo,呃,Coitem,我们穿一个一下。一个方法呢,是呃,检查这个项啊是。It同样。我们也穿一个这个对象。这里边呢,呃,为了快一点写,我就用解块去写,那解块写呢,我们先找个解块。注册验证。这里面加几块的页面,这套模板应该是几块写。我们加一个解块,它这个解块瑞在。
07:03
这里面你看类里边本身包含的已经有解块了,我们只要把它这个解给拿过来就可以对吧。放到我们这个上面应用。Src等于GS在这的列写说明,解QR,解宽RY。二幺点幺二点四点in点。把这个加上解块,这样的话你就把这几块加上几块,加上之后我们在这个里边就可以直接用几块代码去写了,那几块代码去写,比如说每当获取九点,我都将后边的。清除掉。后边的清除掉,你比如说。正好。前边。你看鼠标每次放上去,我们都将后边这个类清除掉,比如这里边就等于。E然后AAA随便写一个,刚才咱们写过了啊。
08:03
刷新一下。你看有这个高鼠标一点击就让它清空,因为用户这块新的输入,你不能还提示原来那信息对吧,所以我们在这个位置。首先呢,传进来的是这个表单,而我们获取的是表单后边的选项,那我们就是传过来的,我们先把它转成解块的对象,把obj转成用高尔夫这个转成块对象,然后用解块里边的。下一个。这样标签。将它里边的HTML,将它的内容。设置成空,也就是将的内容给清空掉,我们来看一下。样式也直接清除掉,那我们就删除它的样式,Re Mo class删除这个类呢,是呃,E删除这个类,好,我们刷新一下,看一下可不可以。准备一点击啊,后边就没有了,对吧,当鼠标一验证的时候,那他继续用。
09:00
现在是这个哦。没问题,那我们下一个验证码那个还会有问题,那我们还得把验证码的那个给给补上。我们比如说在验证码这块,我们再写一下。验证码。比如说我们同样把这个。写到。验证码。为什么要重写下呢,你看。这是验证码。对吧,一个音的表带,它下一个是图片对象,图片节点,然后图片节点再下一个才是这个SPA,所以我现在如果这么写,你看。刷新一下AA,我点这个可以没问题对吧,但是我点这个。还没有,因为下一个对象是图片对象,不是我们的这个对象,所以这块是不能获取到的,那我这边就得判断一下,我点击的如果是这个,呃,验证码。
10:04
那我们就判断一下这个验证码名字叫。这个吧,哦,验证码。你可以直接叫西游记啊。判断一下这个名称,如果名字是这个验证码的时候。我们在这里。做一个判断,如果点的表单是验证码,我们要去下一个的下一个,如果不是我们这么处理。我们做一个判断,比如说。如果如果谁呢?W obj里边的,呃,At tr,它的名字属性。银子属性等于。刚才我们端过来的这个,也就是说明表单的名字,如果是他的验证码的话,我们怎么办,否则。我们怎么办?如果名字是验证码的。不是验证码了,那我们就直接清除后边一个,如果是验证码的。
11:03
我们那我们就是应该是下一个。他下一个。对吧,你可加也可以不加,下一个就可以找到了,来我们这回再保存一下,我们刷新一下,看一个卫衣。点击这个没有,点击这个没有了,对吧。所以这就是我们这个方法的一个作用,把它清空掉,鼠标放上去,焦点没有,那下一步呢,就是呃,我们做验证,一个一个的去验证,那我先把。前面刚刚写的这个。给它清除掉,不需要这个,也不需要这个,我们都是用JS给它添加,直接放在这个位置就行,当然你不写这标签,我们使用GS也能把这个标签加上,这都可以,当然这个他也不地方,我们这么写上之后,嗯,GS代码就会少写一些。那现在看一下,我们在这里边验证,验证的错误消息呢,我们都需要写到写到哪,写到SPA里边,所以呢,我们第一步需要做的肯定是什么。
12:04
肯定是先获取这个,看个对象,我们就呃消息盒子吧。Bos交际等于通过这个高OB传这个对象里边的下一个。行吧。标签他的兄弟节点下一个。获取到四分标签,然后我们就需要判断什么。点击的是哪一个,是用户表单呢,还是确认密码啊,这些我们一点点的去判断,所以呢,我们得写一个Switch case。Switch。这里边判断什么呢?判断我们的属性名,也就是刚才咱们写过的obj里边的at tr,判断谁呢?判断我们这边的。用name表单的name名字,如果那个名字,比如说C等于。我们的用户名,比如username,我们怎么办?在这块弹出一个。
13:05
Username啊,弹出一个。User在这里处理,然后。把这个缩紧一下。然后KGSE,如果等于我们的,假如说是密码p SSP ssw ord等于密码,我们弹出一个。色密码。PSWDC,如果等于确认密码,确认密码Rep sswd确认密码,我们再弹出一个Rep SW,仅用弹出的方法,我们一点点把这个呃都写上没几个。用户名密码好像。判不用判断内部了,我就判断几个,呃,像密码呢,得得输入这个密码和第一个相目相符,确认密码对不对。
14:04
然后如果名字等于呃。我们在。弹出一下。没报。其他都类似,我就不重复去给大家去写了,好,我们现在试一下鼠标点击的是不是这么几个。点击这个。你离开用户名离开的时候验证啊,点击密码离开,密码确认密码离开。就是密码,我看表单的名称一不一样,不一样的话肯定是呃不行的。确认密码、注册表单。哦。请输密码,请确认密码大。P面这块弹出的时候,这会我没加双引号啊。
15:01
刷新一下,确保都没有错误,可以啊,离开啊,确认密码验证码。你看验证码,这回我们在这里边就可以一个一个去验证了,我们现在就不需要这个。然后我们一个验证,比如说。啊,用户名,那用户名我们就判断它不为空,当然了,我们下节课还会使用比如说阿贾克斯去判断它是不是唯一性,对吧,那我们先判断它是不是为空就可以了,所以呢,我们判断。如果什么呢?呃,这个传进来的obj这对象里边的什么这份你可以用几排写一下啊,V等于。空。直接用传对象,直接V6值,你用解块二的话,我们把它转成表单用VL是一样的,也就这样也是一样啊。转成对象VR过去它的值等不等于空,是一样的一个写法啊,那我也可以滚着去写,第二,比如说v rue等于空,如果这个值。
16:04
是空的,当然了,你最好的写法是用正则去写,你比如说空用户出空格算是空对不对,那用正则呢,我们写的时候能更安全一些,这里边我们就写一个过程去具体怎么验证的话,怎么正则的话,那个都是根据你某一个表态项,咱们去设置是不是就可以了,然后如果它等于空,那么。让这个消息盒子就开始起作用了。将它的内容我们可以设置成。比如说呃,用户名不能为空。这不是加va代码,你可以使用代言号,也可以使双引号啊,然后给它加上样式。加上呃,比如a class。这个是井号对项,所以这用几号对项添加类是ER,我们来试一下,如果为空的话,会不会这样?刷新一下点击。如果不为空,我鼠标离开没有效果,如果鼠标为空。
17:01
如果为空。就交点一离开用也不能为空,是不是就验证了对吧,是这样的一个过程,再点击A就没有了。离开用空,这个就是达到了我们的一个验证的一个,呃,一个效果。然后同样比如说密码我们也做,必须让用户输入密码,那我们一样用同样的方法。如果密码密码。对,这几个都是一样的方式,如果密码为空,那我们肯定这块也是告诉他你啊,密码不能为空就可以了,对不对。用户。密码。密码一空。然后一样加上这个,但是我们呃,重复密码的时候,我们这边还得判断一下重复密码好了,这个对象的值密码用户。确认。
18:01
确认密码不能为空,所以这块得确认一下,然后我们再。这块再加上一个,否则如果不为空确认了,那我们还需要判断什么呢?判断一下,呃,比如说。判断一下输入的这个确认密码的值啊,如果它不等于。我们这块获取一下,呃,密码的那个ID,我们把得把密码的那个。加一个好找的。嗯。名字。密码啊。找到所有的衣库的表单名字。找到所有的。
19:00
有在。里边啊名字。等于。密码的SW。那。它里边的。点V。你看如果。我们输入的这个维度值不等于。上面的密码这个值,那我们这块就输出一下。是用户的。啊。这块。两次输入的密码不一致。两次。输入的。密码不一致。然后一样是加错误就会了。这块是验证码,不能为空。好,这个我们确认一下,看一下开会。高新一下。
20:00
用名空看到了对不对,输入一个,诶没有了。这一。码没空对吧,正好我们输入一下二二。用户确认密码不能被控,我这再输一下。二二四八两次密码不一致,那我再输入一样的可以了,对不对验证码。验证码这块我们。就不能通过它获取下一个了,验证码我们这块就得呃,用下一个的下一个才可以,对不对,所以呢,我们验证码这块呃。我们应该。如果等于验证码,我们这块应该MS就换一个消息盒子吧,就别总掉这个消息盒子容易呃,容易出错。我们叫做。数字显示,随便给一个值等于导符。
21:00
Obj第二。Nes.NES2个下一个,这样才能找到那个呃的那个标签对不对,所以我们在这块就可以用。Nu这块。是。好,这个我们再刷新一下就可以了,点击。验证码不能为空,再点击没有了就可以了。这样的话,我们就实现了简单的这几个验证,当然了,我们这几个验证之后,像我们用户名ID唯一啊,数据库如果有这个用户名我们不能再去注册了,ID是唯一的,所以呢,那是下节课我们再完成,呃,用阿贾克斯到服务器端去验证一下,当然这关验证完还没完成,我们还得验证等等底部的行为,我们才能够把这个呃注册成功,好,这里我们先到这里,在里后我们用阿贾克斯实现进验证。
我来说两句