由于是个刚学这方面的菜鸡，所以好多代码都是从各个大佬那儿粘贴复制过来的orz，边搬运边学习吧可以说是。以下为部分参考。图片字体我都在网上找的，没有商用应该不犯法吧quq
密码强度检测：/Yeoman92/article/details/53367570
验证码：/xielong/p/8191957.html
基本框架：/weixin_43154842/article/details/83029337#commentBox
判断密码不少于六位：/question/570085475.html
手机号码格式验证：/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>
链接：/s/1m-stI5gP1wwVU4tNU9mezA提取码：hu1o
