![dc3711218f8a65bee20e7a89bf080eb6.png](https://i-blog.csdnimg.cn/blog_migrate/1d7e2a8f18d093d62141f5183c39c36a.jpeg)
**
实例: 利用html表单和js的数学对象及函数做一个有验证码的简单登录表单
实操:利用日期对象和方法以及其他相关知识实现简单的钟表功能
小实操(3): 利用键盘事件实现小人快跑
小实操(4):实现飞机的移动并且能够发射子弹
。。。。。。。
js学习中的小实操(目录)
**
前几天期末了在考试唉,紧张刺激的期末环节终于是结束了,当然专业知识是还要继续学习的,我们专业暑假的作业就是把js后面剩下的部分学完然后记录笔记,后面大概还剩一半,加油,今天起继续开始更新笔记。兄弟们走起
**
关注小文我们一起学习进步。
实操:
前两天我们学习了正则,那今天先来简单的做一个训练:我们在注册账号密码的时候,很多时候都会限定,比如我们王者的用户名,只能是七个字以内,而且不能出现空格符号。我们今天就简单的做一下这样类似的练习。
首先我们先来做一个简单的html注册页面界面。
代码如下:
![9c011a7720e63522bc4d704865f57fd8.png](https://i-blog.csdnimg.cn/blog_migrate/e127980e4dc292d1e4a36731b0bd55a3.jpeg)
执行结果:
![fff0ee28e5ceda60ce1ac4378e41e461.png](https://i-blog.csdnimg.cn/blog_migrate/7434e97947975b37b9de1f3931474c79.jpeg)
做的丑,兄弟们见谅见谅,
注意:光理论是不够的,技术是不断更新的。在此赠送2020最新企业级Vue3.0/Js/ES6/TS/React/node等实战视频教程,想学的可进裙 519293536 免费获取,小白勿进哦!
这个时候任意的数字都是可以的,这个时候我们要写js代码来实现效果,只有当我们的输入框内输入符合我们正则的字符我们的输入框后会提示“✔”,如果不符合规范的就会提示“❌”,
![62e0b706a28ff968d6007b3b05f9ee19.png](https://i-blog.csdnimg.cn/blog_migrate/29028d6b704860612ccece5cb0093daf.jpeg)
js代码如下:
![f8b86a3dc5662d83f0292f9c9867930b.png](https://i-blog.csdnimg.cn/blog_migrate/bee55c24f96a63eba17c4eee9e2677d2.jpeg)
执行结果:这里你可以看出,少写或者错写,与我们的正则不匹配,则后面会显示错误,只有当我们输入和我们正则相匹配的字符,才会显示正确
![09fd9ce8a35cd22ebc022135c6512645.gif](https://i-blog.csdnimg.cn/blog_migrate/79a9ec34ba4edb1c348c575e88dbc372.gif)
做这个练习的时候里面有两个知识是前面没学到的,这里进行 补充记录:
知识补充
1、onblur事件
解释:onblur事件是在我们的对象失去焦点时执行的事件
简单的举例:你可以想做我们有一个输入框,当我们点击它的时候,看见一根线在闪烁那就是获得焦点,当你点击下一个输入框,或者点击输入框外的其他地方,那个框的线就会消失不见,那个时候就是失去焦点的时候。
2、nextElementSibling
解释:返回指定节点的下一个兄弟节点
在我们上面做的训练中,前面输入框的下一个节点就是紧跟在后面的 span ,所以给它添加效果,那也就是给后面的span添加效果。
It’s hard to be sad about something like this, but it will pass after all.
--------------难过这种东西 难是难 但终究会过
![422873e414aa78e679bd5041d3385c5b.png](https://i-blog.csdnimg.cn/blog_migrate/f73eaab7bf7867463f8e7125c37b2069.jpeg)
————————————————
版权声明:本文为CSDN博主「你的阿wen」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:
小实操(5):利用正则来实现我们注册表单时的内容匹配_qq_45948983的博客-CSDN博客blog.csdn.net![c92ebe25815ae4b611d2c802634f2d94.png](https://i-blog.csdnimg.cn/blog_migrate/3bb0b40a7f56ee1c6f652d45fa765348.png)