【HTML、CSS、JS】注册页面实现(带验证码,密码强度验证,表格提交验证等)_前端html手机验证码页面-程序员宅基地

技术标签: CSS  Web  JavaScript  HTML  

        由于是个刚学这方面的菜鸡,所以好多代码都是从各个大佬那儿粘贴复制过来的orz,边搬运边学习吧可以说是。以下为部分参考。图片字体我都在网上找的,没有商用应该不犯法吧quq

密码强度检测:https://blog.csdn.net/Yeoman92/article/details/53367570

验证码:https://www.cnblogs.com/xielong/p/8191957.html

基本框架:https://blog.csdn.net/weixin_43154842/article/details/83029337#commentBox

判断密码不少于六位:https://zhidao.baidu.com/question/570085475.html

手机号码格式验证:http://caibaojian.com/regexp-example.html

       这两天百度的东西太多了,暂时只分辨出来这一些。。如果有大佬发现漏掉了你的链接的话请找我我加上quq

       如果有问题的地方麻烦大佬们提出来,谢谢。


【网页功能】

1.用户名:不填写会提示并无法提交

2.性别选择

3.密码:(1)密码不能为空,为空会提示并且无法成功提交(2)密码长度不能少于6位,少于六位报错且不能提交(3)根据输入的密码显示对应的强度(4)输入时为星号,且无法输入中文

4.用户生日选择

5.手机号 :有格式验证,如果不符合规范则提示并无法提交

6.邮箱:不符合基本规范会提示并无法提交

7.验证码:(1)验证码不能为空,为空会提示并且无法提交(2)可以点击图片或者手动刷新验证码图片(3)验证码填写错误会提示并无法成功提交

8.协议:(1)不同意协议会提示并无法提交(2)点击查看具体协议

9.注册:上述所有条件满足后提示注册成功

10.网站背景+网站图标设置


【截图】

【代码】

       为了方便同样才学的人看懂,我加了一些可能很低级的备注,大佬们不要嘲笑我quq

       以下这句话写给初学者,希望你别像我一样一开始看到一大堆代码一脸懵逼不知道各自是干嘛的:代码分布为:js,html,css,js主要是网页功能(比如密码强度验证)实现,html主要是网页主要内容(相当于房子),css是html的样式(相当于装修)。

       如果你直接拷贝代码运行,会出现没有背景字体跟我不一样等问题,这是因为你没有相关文件,所有的东西我都放到最后百度云链接里了。

<html>
    <meta charset="UTF-8">
    <!--网站图标,图片必须为icon格式,href里面可以直接这样写文件名&#x
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/d52370/article/details/100939877

智能推荐

做机械臂导航时遇到的问题4:如何订阅joint_states话题(输出关节状态)_airbot_play/joint_states-程序员宅基地

文章浏览阅读1w次,点赞19次,收藏99次。在完成用arbotix测试机械臂后,我们想控制真实的机械臂伺服电机。由于arbotix是针对舵机的,我们要想控制伺服电机,要将ROS里机械臂的关节信息(角度、角速度、加速度、力等)发给下位机,首先就是要获取关节信息。 关于让机械臂动起来,这里参考了一些大神的博客,在这里表示感谢让模型动起来: http://blog.csdn.net/yaked/article/details_airbot_play/joint_states

Ubuntu18.04 远程桌面SSH + X转发 + VNC4server(亲测延迟最低远程桌面控制)_ssh和远程桌面 哪个延迟低-程序员宅基地

文章浏览阅读1.8k次。1.SSH安装:$ sudo apt-get ssh该远程控制只能使用命令行控制,但是使用方便延迟低。ubuntu18.04下一般自带,win10需要下载putty使用。连接命令:$ ssh username@host_address#username为服务器名,host_address为服务器ip地址ubuntu下使用SSH向服务器下载或上传文件。下载文件命令:$ scp username@host_address:file_name上传命令:$ scp file_name u_ssh和远程桌面 哪个延迟低

Python web框架之tornado(龙卷风)_python tornado-程序员宅基地

文章浏览阅读7.6k次,点赞5次,收藏12次。Tornado是Python界中非常出名的一款Web框架,和Flask一样它也属于轻量级的Web框架。_python tornado

踩过的坑系列之InputStream.read(byte[])方法-程序员宅基地

文章浏览阅读854次。转自:https://www.cnblogs.com/lylife/p/5519109.html项目之前都是好好的,最近现场那边出现一个问题,报错不是合法的json字符串,这个json字符串是通过http请求访问获得的。  通过直接在浏览器上直接访问http这个请求,发现返回的json也是完全正确的。后来排查代码才发现了原来错误出在从字节流中读取数据这里:  看下之前出错代码:这..._inputstream.read(byte[])' on a null object reference

(2,1,2)卷积码BCJR译码matlab仿真_matlab bcjr-程序员宅基地

文章浏览阅读3.6k次,点赞6次,收藏45次。仿真(2,1,2)卷积码的性能,BCJR译码,级联的调制方式采用QPSK。每个码块信息比特长度为1000,要求编码最终状态归0。要求输出的结果为译码后信息比特的BER。_matlab bcjr

python 读取鼠标选中文本_送书 | 选择文本的神技-程序员宅基地

文章浏览阅读1.5k次。“欢迎关注【雷哥office】,为了回馈粉丝,最近几个月每周都会有送书活动,想要书的朋友不要错过哦~本周第二弹福利, 详情见文末”1使用鼠标⑴选中区域。将鼠标光标放在要选择的文本的开始位置,按住鼠标左键并拖曳,这时选中的文本会以阴影的形式显示,选择完成后,释放鼠标左键,鼠标光标经过的文字就被选定了。⑵选中词语。将鼠标光标移动到某个词语或单词中间,双击鼠标左键即可选中该词语或单词。⑶..._python获取鼠标选取的内容

随便推点

python 一组数据 正态分布散点图_如何在SPSS、Python、R中用Q-Q图检验数据是否服从正态分布?...-程序员宅基地

文章浏览阅读505次。正态分布广泛存在于自然现象、生产、生活的方方面面,例如试卷命题难度,产品的使用寿命、农作物产量、气温、降水量、工资收入、人类的身高体重肺活量,甚至颜值……关于正态分布的数学定义及各种性质,不在此赘述。简单理解,就是“两头小,中间大”,比如长相奇丑无比和倾国倾城的人都是少数,绝大多数人都属于大众脸。很多时候,在进行数据分析工作时,首先要看的就是数据是服从何种概率分布,而正态分布则是最重要的一种概率分..._怎么制作散点图表示采样个体在全部个体中的分布位置

C/C++中main函数的三个参数与环境变量的获取_cpp main第三个参数是啥-程序员宅基地

文章浏览阅读1.9k次。C/C++的main函数除了常见的argc、argv,还具有第三个指定的参数envp,完整的引用方式如下:main(int argc, const char *argv[], const char *envp[]) //void类型没有参数1.argc为整数2.argv为指针的指针(可理解为:char **argv or: char *argv[] or: char argv..._cpp main第三个参数是啥

nginx 代理转发 FTP_ftp nginx转发-程序员宅基地

文章浏览阅读2.9w次,点赞4次,收藏24次。这里实现的 FTP 转发,其实和 SFTP 转发是一样的。详情见我的另一篇文章 Nginx代理转发SFTP上次写的 代理转发 SFTP 是在 linux 上测试的,本篇文章则是在 Windows 环境下测试的。关于 Windows 环境怎么搭建 FTP 服务器,请参阅我的另一篇文章 图解 —— Windows 下 FTP 服务器搭建及验证全过程配置文件同样打开 nginx.conf 配置文件,做如下配置,和SFTP的转发配置完全一样stream { upstream ftp{ ._ftp nginx转发

Stata 数据分析_stata主成分分析结果解读-程序员宅基地

文章浏览阅读7.5k次,点赞2次,收藏13次。最近在学习STATA做分析的时候,发现这个软件很多功能很强大,但是背后的统计学知识要求也比较高,作为一边深入学习统计知识一遍用软件的小白,好多东西只是知其然不知其所以然,因此尝试自己把STATA的一些运算分解出来。因此这里记录一下学习内容。在做STATA的主成分分析和因子分析的时候,觉得这两个东西很像,但是其中的原理好像也不太清楚,网上查了一些文章,花了不少时间才明白怎么做的,这里演示一下具体_stata主成分分析结果解读

javaee学习笔记1_javaee的学习摘要-程序员宅基地

文章浏览阅读338次。为什么需要JavaEE我们编写的JSP代码中,由于大量的显示代码和业务逻辑混淆在一起,彼此嵌套,不利于程序的维护和扩展。当业务需求发生变化的时候,对于程序员和美工都是一个很重的负担。为了程序的易维护性和可扩展性,这就需要我们使用JavaEE技术来进行项目开发2、 什么是JavaEEJavaEE是一个开发分布式企业级应用的规范和标准。Java语言的平台有3个版本:适用于小型设备和智能卡的JavaME(Java Platform Micro Edition,Java微型版)、适用于桌面系统的Java_javaee的学习摘要

DM大规模并行处理MPP_dm mpp-程序员宅基地

文章浏览阅读316次。DM大规模并行处理MPP_dm mpp

推荐文章

热门文章

相关标签