由于是个刚学这方面的菜鸡，所以好多代码都是从各个大佬那儿粘贴复制过来的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里面可以直接这样写文件名（绝对地址）或者写你本地的如C:\之类的-->><link rel="shortcut icon" href="cat.ico" type="image/x-icon"/><!--网站链接名字--><title>全球最大云吸猫场所</title><!--网站标题-->><head><div id="welcome">欢迎你成为一个云吸猫猫奴✿✿ヽ(°▽°)ノ✿<br><br>请领养代替购买</div></head><!--javascript部分，主要是各种功能的函数实现--><script type="text/javascript">window.onload = function(){createCode(4); //初始化验证码var oInput = document.getElementById('pwd');oInput.value = ''; //获取密码var submitBtn = document.getElementById("register");//以下实现必须接受协议才能提交的功能submitBtn.onclick = function () {if(!document.getElementById("checkbox").checked) {alert("请先接受协议哦(*╹▽╹*)");return false;}};var spans = document.getElementsByTagName('span');//密码强度的对比oInput.onkeyup = function(){//强度状态设为默认spans[0].className = spans[1].className = spans[2].className = "default";var pwd = this.value;var result = 0;for(var i = 0, len = pwd.length; i < len; ++i){result |= charType(pwd.charCodeAt(i));}var level = 0;//对result进行四次循环，计算其levelfor(var i = 0; i <= 4; i++){if(result & 1){level ++;}//右移一位result = result >>> 1;}if(pwd.length >= 6){switch (level) {case 1:spans[0].className = "weak";break;case 2:spans[0].className = "medium";spans[1].className = "medium";break;case 3:case 4:spans[0].className = "strong";spans[1].className = "strong";spans[2].className = "strong";break;}}}}/*定义一个函数，对给定的数分为四类(判断密码类型)，返回十进制1，2，4，8数字 0001 -->1  48~57小写字母 0010 -->2  97~122大写字母 0100 -->4  65~90特殊 1000 --> 8 其它*///生成验证码的方法function createCode(length) {var code = "";var codeLength = parseInt(length); //验证码的长度var checkCode = document.getElementById("checkCode");//所有候选组成验证码的字符，当然也可以用中文的var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //循环组成验证码的字符串for (var i = 0; i < codeLength; i++){//获取随机验证码下标var charNum = Math.floor(Math.random() * 62);//组合成指定字符验证码code += codeChars[charNum];}if (checkCode){//为验证码区域添加样式名checkCode.className = "code";//将生成验证码赋值到显示区checkCode.innerHTML = code;}}//检查验证码是否正确function validateCode(){//获取显示区生成的验证码var checkCode = document.getElementById("checkCode").innerHTML;//获取输入的验证码var inputCode = document.getElementById("inputCode").value;console.log(checkCode);console.log(inputCode);if (inputCode.length <= 0){alert("验证码忘输惹！我怎么知道你是不是机器人鸭[○･｀Д´･ ○]");}else if(inputCode.toUpperCase() != checkCode.toUpperCase()){alert("你验证码输错了哒！￣へ￣");createCode(4);}else return true;     }    function charType(num){if(num >= 48 && num <= 57){return 1;}if (num >= 97 && num <= 122) {return 2;}if (num >= 65 && num <= 90) {return 4;}return 8;}//注册成功提示function success() {alert('注册成功！欢迎你鸭✿✿ヽ(°▽°)ノ✿');}//此处是一个验证函数，必须满足密码大于六位且验证码不为空或者错误的条件，才能注册成功function check_code() { var answer= document.getElementById("pwd").value; if(answer.length<6) { alert("密码不能少于六位鸭[○･｀Д´･ ○]"); return false;} else if(!validateCode()) {return false;}     else{success();}}</script><body><!--onSubmit="return check_code()"只有满足这个函数才能注册成功--><form onSubmit="return check_code()"><div id="app1"><!--required限定必须填不能为空--><label>用户名</label><input type="text" required name="name"  placeholder="你想叫什么呢ฅ^•ﻌ•^ฅ" class="input" ><br><br><label>性别</label><input type="radio" name="sex" value="man" checked="true"> 男 <input type="radio" name="sex" value="woman"> 女 <br><br><label >密码</label><input type="password"id ='pwd' name="pwd" required nBlur="check();" placeholder="我不会告诉别人哒ฅ՞•ﻌ•՞ฅ" class="input"><br><div class="show"><span>弱</span><span>中</span><span>强</span></div><br><label>生日</label><input type="date" value="1980-01-01" class="input"><br><br><label>手机号</label><input type="text" placeholder="我不会悄咪咪打给你的XDD" required  pattern="^1[3456789]\d{9}$" title="移动电信联通表示没有这个号码(ˉ(∞)ˉ)" class="input" ><br><br><label>邮箱</label><input name="email" type="email" required placeholder="qq或者什么都可以~o(=∩ω∩=)m" class="input" ><br><br><label>验证码</label><input type="text" id="inputCode"  placeholder="最后一步辽" class="input" ><br><div id="checkCode" class="code"  onclick="createCode(4)" ></div><div class="change" onclick="createCode(4)">重新整一张</div><br><br>    <div class="checkbox"><input type="checkbox"id="checkbox" onclick="element.disabled=true" style="margin-right: 10px;" >我已阅读并接受<a href="agreement.txt" target="_blank">《云吸猫爱好者须知》</a></div><button id="register" input type="submit" >立即注册</button></div>
</div>
</form>
</body>
<!--以下为样式-->>
<style type="text/css">*{margin: 0px;padding: 0px;}/*网站标题颜色*/#welcome{text-align:center;font-size:40px;color:pink;}/*协议链接颜色*/a{color: lightblue;text-decoration: none;}/*整体样式，主要包括背景字体字体颜色等*/body{ font-family:  "方正喵呜体";background: url(cat.jpg) no-repeat;background-size:100% 100%;background-attachment:fixed;color: white;}#app1{width:300px;margin:40px auto;font-size:20px;}label{display: inline-block;width:70px;height: 38px;text-align: center;}/*输入框样式*/.input{font-family: "方正喵呜体";width:200px;height: 38px;border-radius: 4px;}/*协议框样式*/.checkbox{font-size: 14px;margin-left: 20px;}/*注册按钮样式*/#register{font-family:  "方正喵呜体";width: 270px;height: 38px;border-radius: 5px;background:pink;border: 1px solid  silver;color: white;font-size: 18px;cursor: pointer;margin-top: 10px;}/* #btn{width: 50px;height: 30px;display: inline-block;float: right;margin-right: 15px;} *//*以下是密码三个强度对应的颜色*/.default {background: #eeeeee;}.weak {background: #FF0000;}.medium {background: #FF9900;}.strong {background: #33CC00;}/*.show使密码强度整个部分向右移动 span是密码强度框的样式*/.show {margin-left: 65px;}span {display: inline-block;width: 60px;height: 30px;line-height: 30px;background: #ddd;text-align: center;margin: 7px 4px ;} /*验证码样式*/.code{font-family:方正喵呜体;font-style:italic;color:rgb(114, 163, 226);font-size:35px;border:0;margin-left:74px;/* padding:2px 3px; */letter-spacing:3px;font-weight:bolder;            float:left;           cursor:pointer;width:150px;height:50px;line-height:60px;text-align:center;/* vertical-align:middle; */background-color:pink;}/*更换验证码-文字样式*/.change {text-decoration:none;font-size:14px;color:#555c5c;/* padding-left:20px; */margin-top: 20px;}/*更换验证码-鼠标点击文字样式*/.change:hover {text-decoration:underline;cursor:pointer;}
</style>
</html>

链接：https://pan.baidu.com/s/1m-stI5gP1wwVU4tNU9mezA 提取码：hu1o

【HTML、CSS、JS】注册页面实现（带验证码，密码强度验证，表格提交验证等）相关推荐

HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML5+css+JS实现页面打枪声音特效减压玩法 PUBG 大吉大利今晚吃鸡
HTML5+css+JS实现页面打枪声音特效减压玩法 PUBG 大吉大利今晚吃鸡 css部分 *{margin: 0;padding:0;}body{min-height:100vh;overflo ...
jsp注册里密码强弱怎么弄_vue.js+ElementUI实现进度条提示密码强度效果
要求一:判断输入的字符串是否包含数字.小写字母.大写字母以及特殊字符四种内容的8-20位字符通过搜索了解到可以使用?=这个正则语法判断字符串中是否含有多种内容.(?=)这个语法结构在正则里表示&qu ...
elementui进度条如何设置_vue.js+ElementUI实现进度条提示密码强度效果
要求一:判断输入的字符串是否包含数字.小写字母.大写字母以及特殊字符四种内容的8-20位字符通过搜索了解到可以使用?=这个正则语法判断字符串中是否含有多种内容.(?=)这个语法结构在正则里表示&qu ...
超详细编写登录注册页面（内含验证码登录）
最近做项目,着实出师不利,刚登录就遇到bug,特在此记录一下,以此为鉴.首先,说明一下,这个登录页面内含验证码登录,当然也会有验证码验证,还有数据库没有设置加密,当然项目也没有强制要求,主要因为麻烦, ...
用纯javascript和html编写仿淘宝注册页面（带源码）
本地javascript(纯天然代码)验证,本地验证主要分2部分: 一.和用户的表单交互首先需要编写用于表单交互的函数,该函数需要在页面加载时加载,格式如下:window.οnlοad=functi ...
JavaWeb01_HTML+CSS实现注册页面
Web概念概述 JavaWeb 使用Java语言开发基于互联网的项目软件架构: 1. C/S: Client/Server 客户端/服务器端 * 在用户本地有一个客户端程序,在远程有一个服务器端程序 ...
html+css登录注册页面案例
一.展示效果 1. 登陆页面展示(背景图片来自网络可以自己更换): 2. 注册页面展示: 二.需要添加的normalize.css跟common.css 代码如下(normalize.css重置样式表 ...
html+css+js用户注册页面简
1)开发一个用户注册界面,要求: 年龄需用 JavaScript 检查格式是否正确. Reg.html<!DOCTYPE html><html><head>< ...

【HTML、CSS、JS】注册页面实现（带验证码，密码强度验证，表格提交验证等）

【网页功能】

【截图】

【代码】

【HTML、CSS、JS】注册页面实现（带验证码，密码强度验证，表格提交验证等）相关推荐

最新文章

热门文章