第一次完成注册页面!分享一下,哈哈哈!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width:500px ;
height: 500px;
margin: 50px auto;
background-image: linear-gradient(to bottom,red,blue);
padding-top: 50px;
}
span{
color: white;
font-size: 30px;
margin-left: 25px;
}
input{
height: 30px;
}
p{
height: 50px;
color: white;
font-size: 25xp;
line-height: 50px;
text-align: center;
}
button{
margin-left: 25px;
width: 90%;
line-height: 30px;
text-align: center;
font-size: 25px;
background-color: white;
border-radius:10px ;
}
#check{
display: inline-block;
background-color:white;
width: 100px;
height:40px ;
line-height: 40px;
text-align: center;
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div class="box">
<span>用户名:</span>
<input type="text" id="name">
<p id="namecheck"></p>
<span>密 码:</span>
<input type="password" id="pwd">
<p id="pwdcheck"></p>
<span>确 认:</span>
<input type="password" id="pwd1">
<p id="pwd1check"></p>
<span>验证码:</span>
<input type="text" id="result">
<span id="check"></span>
<p id="resultcheck"></p>
<button id="btn">注册</button>
</div>
</body>
<script>
var checkInp=document.getElementById("check");
var nameInp=document.getElementById("name");
var pwdInp=document.getElementById("pwd");
var pwdcheckInp=document.getElementById("pwdcheck");
var pwd1Inp=document.getElementById("pwd1");
var pwd1checkInp=document.getElementById("pwd1check");
var resultInp=document.getElementById("result");
var resultcheckInp=document.getElementById("resultcheck");
var namecheckInp=document.getElementById("namecheck");
var btnInp=document.getElementById("btn");
// 验证码的生成
function er(){
var list=["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","G","K","L","M","I","N","O","P","Q","R","S","T","U","V","W","X","Y","Z",1,2,3,4,5,6,7,8,9,0];
var ma=[];
for(var i=0;i<4;i++){
var a=Math.round(Math.random()*(list.length-1))
ma[i]=list[a];
list.splice(a,1)
}
var result=ma.join("")
return result;
}
checkInp.innerHTML=er();
checkInp.onclick=function(){
checkInp.innerHTML=er();
}
btnInp.onclick=function(){
// 用户名
var user = nameInp.value; //字符串
console.log(user);
// 长度 6-12位
if (user.length >= 6 && user.length <= 12) {
// b. 不能以数字开头
var firstCharCode = user.charCodeAt(0); // 获取第一个字符串对应的编码
// 数字 48-57
console.log(firstCharCode);
if (!(firstCharCode >= 48 && firstCharCode <= 57)) { // 是数字
// c. 由数字 大小写字母 _ $ 组成 (遍历所有的字符 判断是否含有非法字符)
var flag = true; // 假设没有非法字符 => 只要找到一个就可以推翻假设
for (var i = 0; i < user.length; i++) {
var charCode = user.charCodeAt(i); // 每一个字符的编码
if (!(charCode >= 48 && charCode <= 57 || charCode >= 65 && charCode <= 90 || charCode >= 97 && charCode <= 122 || charCode == 95 || charCode == 36)) {
flag = false;
break;
}
}
if (flag) {
namecheckInp.innerText = " 正确";
} else {
namecheckInp.innerText = "用户名由数字 大小写字母 _ $ 组成 ";
}
} else {
namecheckInp.innerText = "用户名不能以数字开头";
}
} else {
namecheckInp.innerText = "用户名长度需要在6-12位之间";
}
// 密码判定
var user = pwdInp.value; //字符串
// 长度 6-12位
if (user.length >= 6 && user.length <= 12) {
var flag = true,sum=0,a=0,b=0,c=0,d=0; // 假设没有非法字符 => 只要找到一个就可以推翻假设
for (var i = 0; i < user.length; i++) {
var charCode = user.charCodeAt(i); // 每一个字符的编码
if (!(charCode >= 48 && charCode <= 57 || charCode >= 65 && charCode <= 90 || charCode >= 97 && charCode <= 122 || charCode == 95 || charCode == 36)) {
flag = false;
break;
}
if(charCode >= 48 && charCode <= 57 ){
a=1;
}
if(charCode >= 65 && charCode <= 90 ){
b=1;
}
if(charCode >= 97 && charCode <= 122 ){
c=1;
}
if( charCode == 95 || charCode == 36 ){
d=1;
}
}
sum=a+b+c+d;
if (flag) {
user
if(sum==1){
pwdcheckInp.innerText = " 密码强度:弱";
}
if(sum==2){
pwdcheckInp.innerText = " 密码强度:一般";
}
if(sum==3){
pwdcheckInp.innerText = " 密码强度:强";
}
if(sum==4){
pwdcheckInp.innerText = " 密码强度:超强(你记得住吗?!!)";
}
} else {
pwdcheckInp.innerText = "密码由数字 大小写字母 _ $ 组成 ";
}
} else {
pwdcheckInp.innerText = "密码长度需要在6-12位之间";
}
// 确认密码
if(pwd1Inp.value==pwdInp.value&&pwd1Inp.value!=""){
pwd1checkInp.innerText = "密码验证正确!";
}else{
pwd1checkInp.innerText = "密码验证错误!";
}
// 二维码验证
var a=resultInp.value.toUpperCase();
var b=checkInp.textContent.toUpperCase();
if(a==b){
resultcheckInp.innerHTML="二维码验证正确!"
}else{
resultcheckInp.innerHTML="二维码验证错误!"
}
第一次把js和css和HTML一起用得这么爽!!! }
</script>
</html>
