00:00
好了,朋友们,咱们继续啊。我们上节课呢,是到哪块了呢?把这个用户名的验证咱就做完了是吧?哎,空格肯定是不行的,然后ABCABC不行回去对吧,有特殊符号的啊,不行回去,那么接下来咱们就来看一看这个密码和确认密码密码确认密码这块咱们就确认密码失去焦点,先做个简单的啊,就是比如确认密码写上之后,我们失去焦点,验证密码跟确认密码一致不一致。为空不为空,我们就不再做了啊,就是它一致不一致,只要是说我们密码跟确认密码是一致的就没关系啊,当然你可以做的复杂一些,比如说密码就是密码不能为空啊。包括这个密码长度最少最少这个要求是八米以上。对吧?哎,当然你的密码你可以做的更强大一些,比如说密码当中必须得有什么呀,特殊符号是吧,或者说密码当中必须有大写,必须有小写,还必须有其他的一些特殊符号才行,都可以做啊,那这里呢,我们就主要判断确认密码跟密码一致不一致,所以这块呢,咱们应该给谁绑啊同学们。
01:16
给确认密码这个框吧,绑一下来。绑的话,那确认密码这块应该是。他呗,是吧。怎么怎么怎么写。首先把这个元素先获得到。ID就是它,我们叫根据什么呀?这叫获取什么,获取确认密码框对象吧,绑定什么事件不乐事件吧,User pw element点什么啊,不是,然后function。
02:10
接下来呢,在这呢,我们还是简单的做一个测试。来找一个确认密码,失去焦点,你看对吧,那接下来呢,这个程序应该在这里要做一件什么事啊,获取密码和什么确认密码吧。一步一步写,到时候再改也是可以的,密码user这个叫什么?密码是user pwd呗。对吧。等于document点儿get element by是user pwd。那user p WD呢?等于user p WD的一个element点什么?密码是吧,那确认密码怎么获取,确认密码这个位置是不是已经根据这个已经拿到这个节点了,这个节点不就是确认密码吗?那在这块呢,就直接确认密码user pwd2。
03:15
他。直接等于user。第2y element value,这样是就拿到了来判断一下if怎么着,User pw d要是。不等于user pwd2不相等。那就不一致呗,对吧,密码不一致到这儿可能就是密码怎么着一致。是吧,密码一致。那密码不一致这块咱们就。提个醒呗。提个醒的话,这个信息显示到这儿吧。那就把它拿出来呗,拿出来放这儿。
04:03
对吧,获取叫做密码错误提示的span标签,那拿它。Span等于do点。Get element by get element by就是他。是吧?这个。就是他呗。对吧,它的什么点哪什么text叫做密码不一致呗。是不是,诶这行不行,看看啊,没啥问题,AB CA abcdf走。密码不一致。我回去之后呢,这边清空这个内容,清空这个就不要再清空了。
05:03
他可能会再写一遍,写完它不一致之后,他会怎么着啊。他会把上面也清除掉。重新再写对不对啊,所以说这块我们回去把这清掉就行了,把这清了,把这清了啊怎么做呢。那就是说应该在给这个叫做PWD这个元素绑定一个什么事件啊,绑定事件点什么,那接下来呢,这个。再往下,这个套路应该是一样的,把上面这个span标签里边的内容怎么着给他清空了,但是清空的前提是判断,如果不合法的时候,我们把这个内容也清掉吧,内容是不是它点什么value等于空串法,那不合法,什么叫不合法,只要它不等于什么。
06:11
空头串。不等于空,是不是代表非法呀,清掉。来,我们看看啊,跟刚才上面是一模一样的,AB CA abcdf,走不行回去。ABC应该是一致的,对吧,再回去没事。那再往下就一个邮箱,各位这块咱们就先说到这啊,看邮箱,那邮箱这块的话,咱们应该道理是一样吧,只不过是有一个什么正则呗。对不对,我们再把这个写一写也可以啊,把邮箱这块弄一弄也行,那这边怎么写啊,给什么email绑定什么不是事件是不是,那绑定事件这个email的element又拿到就行了,document.get element by idd呢,其实就是这个email呗,拿过来它啊,然后呢,获取什么呀,获取email的什么span。
07:14
对吧,哎,Span,那这个呢,叫email span就完事了啊document.get element by ID是谁呢?就是这个叫做email的error,这个都拿过来之后呢,我们接下来怎么着啊。在这给谁?给这个email element绑定什么不事件绑定不乐事件呢?这样吧,把这个直接扔到上面得了。行吧,绑定这个事件的话,就直接点on什么L呗,Function是吧,好,那接下来还是那句话,再测试一下打开。再刷新一下,走一个。对吧,可以。
08:01
那程序最起码走到现在是没啥问题的,那在这应该怎么做呀,我们就直接过去啊email,然后再往下是编写什么email的正则,对吧,来。那这个email的怎么获取啊,就是email的element.value是不是,至于什么能不能没空啊,前后空白啊,这个东西可以给他加上啊,我在这呢,就不再写这个重复的东西了啊,或许email email的正则是吧,调用谁啊?Email正则的一个方法叫test,把email传进去反馈给十吧。那这块这个正则呢,你就可以用一下咱们之前的。
09:00
这一块不是有一个吗?给他拿过来,然后放到这个位置上。这个思路还行吧,啊,这个span元素不乐。然后获取email email正则test OK,如果OK代表合法,不OK代表不合法,不合法你得把这个span它的内容给它设置一下,叫做邮箱地址不合法,对吧,然后接下来呢。在获得焦点,我们一起写了得了。是吧,就是这个吧,给这个叫什么,他绑定什么focus focus啊,那这块怎么做呀,应该是点什么是吧,Function啊来获得焦点行不行。
10:10
直接重新来一下,获得焦点。是不是,哎,你看失取焦点,获得焦点,失取焦点啊,只要一弹窗,它是不是就失去焦点,失取焦点是不是做做验证啊。对吧,把这删掉就行了,好了啊,如果获得焦点应该怎么做呢?应该把这个叫做span标签给它清空呗,点什么inner text给他清掉就行了,对吧,如果说谁他点什么inner text要是不等于空串,那我应该把这个叫email的element点什么value等于空空独串,是这样吧,哎,那这块呢,咱们再来看啊,油箱。地址不合法。
11:00
对吧,回去。张三要那博克法回去,张三艾特不行吧,哎,张三艾特123也不行啊,张三艾特一二三点。com应该是行了,回去没事吧,没事。行,那这些验证的步骤我们完成了之后,你看其实写一个别的都应该都一样的,套路都一样啊,所以说你写一个就行啊,写一个就行,就反复练练一个就可以了。那这个咱们完成了吗。就是这一项完成了是吧,这一项也完成了吧,这项也做了,这个也做了啊,然后这个统一失去焦点验证码错误信息是不是统一显示以红色字体12号啊,再往下文本框再次获得焦点之后也清空信息吧,哎,都清空了,这些步骤我们都做了,都做了之后呢,下面有个最终表单中所有所有项均合法方可提交,你思考一下这个。
我来说两句