如何用原生js写登录表单

Posted on 2018-05-21 15:37  scurry30  阅读(462)  评论(1编辑  收藏  举报

项目介绍:

这是一个简单小项目:通过注册用户名,密码(并判断密码的强度),邮箱,真实姓名,手机号等跳转到另一个登录页面,可以使用二维码快速登录,也可以通过cookie判断是否注册过这个用户名,如果注册成功,可以登录,如果勾选七天免登录,如果没有注册过这个用户名和密码,需要重新注册方可登录;

项目模块介绍:

1.在页面插入一个注册按钮,点击显示出表单和蒙版的效果,如下:

 

2.绿色区域可以实现在可视区域内拖拽功能,蓝色部分点击可以实现关闭表单的效果;代码如下:

 

3.在密码强度判断这一模块上,我的思路是首先定义一个判断正则等级的函数,纯数字,字母,其他字符任选一种的是低等级;纯数字,字母,其他字符任选两个的为中等级;三个都包含的为高等级;代码如下:

 

4.给每个输入框注册失去焦点事件,通过正则判断用户输入是否正确,在表单的最上面白色的区域显示输入是否正确;并且最后在注册按钮上,进行一次总判断,标记错误信息的文本框并提示需要重新输入,只有输入正确才用cookie保存信息,用于下一个页面的信息判断并跳转到另一个页面;

 

5.这个页面可以快速登录,也可以账号登录,但前提是需要注册过的用户信息,如果没有注册过则显示登录失败,输入正确信息,如果勾选七天免登录可以下次不用输入信息;

 

 

Copyright © 2024 scurry30
Powered by .NET 8.0 on Kubernetes