立即注册html,立即注册.html-CSDN博客

立即注册

body {

margin: 0px;

padding: 0px;

}

.top {

display: flex;

align-items: center;

justify-content: center;

height: 1.3rem;

}

.tubiao {

position: absolute;

left: 0.5rem;

color: #696969;

}

.biaoti {

font-size: 0.5rem;

color: #181818;

}

.biaodan form {

text-align: center;

width: 100%;

position: relative;

/*background:red;*/

}

.biaodan input {

width: 7.5rem;

hieght: 2rem;

padding: 0.25rem 0rem;

margin-bottom: 1rem;

border: 0.02rem solid #ccc;

font-size: 0.4rem;

border-radius: 0.1rem;

padding-left: 0.8rem;

box-sizing: border-box;

}

.biaodan input:nth-of-type(1) {

margin-top: 0.5rem;

background: url(imges/user-logo.png)no-repeat left center;

background-size: 0.7rem;

}

.biaodan input:nth-of-type(2) {

width: 5rem;

}

.biaodan input:last-child {

padding-left: 0px;

}

input[type=password] {

background: url(imges/pwd-logo.png)no-repeat left center;

background-size: 0.7rem;

}

.yanzhengma {

display: inline-block;

width: 2.5rem;

height: 0.45rem;

border: 0.02rem solid #ccc;

border-radius: 0.1rem;

padding: 0.25rem 0rem;

color: #31b8ee;

}

.fasong {

display: inline-block;

width: 2.5rem;

height: 0.45rem;

border: 0.02rem solid #ccc;

border-radius: 0.1rem;

padding: 0.25rem 0rem;

color: #9C9C9C;

background: #ECE9E9;

}

.biaodan .denglu {

background: linear-gradient(to bottom, #3fa9f5, #45a4d8);

border: none;

color: white;

}

.phones {

display: none;

position: absolute;

left: 1.2rem;

top: 1.7rem;

background: url(imges/ts.png)no-repeat left center;

background-size: 0.5rem;

padding-left: 0.6rem;

font-size: 0.4rem;

color: #dc3632;

}

.mimas1 {

display: none;

position: absolute;

left: 1.2rem;

top: 5.7rem;

background: url(imges/ts.png)no-repeat left center;

background-size: 0.5rem;

padding-left: 0.6rem;

font-size: 0.4rem;

color: #dc3632;

}

.mimas2 {

display: none;

position: absolute;

left: 1.2rem;

top: 7.7rem;

background: url(imges/ts.png)no-repeat left center;

background-size: 0.5rem;

padding-left: 0.6rem;

font-size: 0.4rem;

color: #dc3632;

}

.code {

display: none;

position: absolute;

left: 1.2rem;

top: 3.7rem;

background: url(imges/ts.png)no-repeat left center;

background-size: 0.5rem;

padding-left: 0.6rem;

font-size: 0.4rem;

color: #dc3632;

}

发送验证码

59秒后重新获取

手机号码必须为真实的有效的11为数字；

密码长度为6-16字符必须包含数字字母符号中至少两种;

$(start);

function start() {

//发送短信59秒后重新获取先隐藏

$(".fasong").hide(); //发送短信验证隐藏

$("#phone").focus(

function() {

$(this).css({

"border": "0.02rem solid #3366FF"

}).siblings().css("border", "");

if($(this).val() == "") {

$(".phones").text("手机号不能为空").show();

}

)

$("#phone").keyup(

function() {

$(this).css({

"border": ""

});

if($(this).val() != "") {

$(".phones").text("").hide();

}

//手机号码的正确格式

var req1 = /^1[34578]\d{9}$/;

//获取手机号的值

var phoneval = $(this).val();

//不能出现空格

var space = phoneval.indexOf(" ") == -1;

//验证正则

var zhengze = req1.test(phoneval)

if(!space) {

$(".phones").text("不能出现空格").show();

return false;

} else if(zhengze == false) {

$(".phones").text("手机号码格式不正确").show();

return false;

} else {

$(".phones").text("输入正确").show();

//手机号码输入正确后才能点击发送短信验证码,否则不能点击(没反应);

var x = 59;

$("#ma").click(

function() {

$(this).hide();

$(".fasong").show();

$(".fasong").text(x + "秒后重新获取");

var timer = setInterval(function() {

$(".fasong").text(--x + "秒后重新获取");

}, 1000);

setTimeout(function() {

clearInterval(timer);

$(".fasong").hide();

$(".yanzhengma").show();

x = 59;

$(".yanzhengma").text("重新发送");

}, 60000)

}

)

//设定验证码,验证验证码的正确

var VerificationCode = 5896;

$("#Code").focus(

function() {

$(this).css("border", "0.02rem solid #3366FF").siblings().css("border", "");

}

)

$("#Code").keyup(

function() {

//$(this).css("border", "");

if($(this).val() == "") {

$(".code").text("验证码不能为空").show();

return false;

} else if($(this).val() != VerificationCode) {

$(".code").text("验证码错误").show();

return false;

} else {

$(".code").text("输入正确").show();

return true;

}

)

return true;

}

)

//第一次输入密码验证

$("#pass").focus(

function() {

var passval = $(this).val();

$(this).css("border", "0.02rem solid #3366FF").siblings().css("border", "");

if(passval == "") {

$(".mimas1").text("请输入密码").show();

}

)

$("#pass").keyup(

function() {

//$(this).css("border", "");

var passval = $(this).val();

//var reg=/(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,16}$/;

//if(reg.test(passval)==false){

//$(".mimas1").text("密码格式不正确").show();

//return false;

//}else{

//$(".mimas1").text("输入正确").show();

//}

//密码长度为6-16个字符并且必须包含数字字母符号中至少两种

var space1 = passval.indexOf(" ") == -1;

var reg1 = /[a-zA-z]+/;

var reg2 = /\d+/;

var reg3 = /[^a-zA-Z0-9]+/;

if(passval.length < 6 || passval.length > 16) {

$(".mimas1").text("密码长度为6-16个字符").show();

return false;

} else if(!space1) {

$(".mimas1").text("密码不能有空格").show();

return false;

} else if(reg1.test(passval) && reg2.test(passval)) {

$(".mimas1").text("输入正确").show();

return true;

} else if(reg1.test(passval) && reg3.test(passval)) {

$(".mimas1").text("输入正确").show();

return true;

} else if(reg2.test(passval) && reg3.test(passval)) {

$(".mimas1").text("输入正确").show();

return true;

} else {

$(".mimas1").text("必须包含数字字母符号中至少两种").show();

return false;

}

)

//第二次输入密码验证

$("#pass1").focus(

function() {

$(this).css("border", "0.02rem solid #3366FF").siblings().css("border", "");

$(".mimas2").text("请输入密码").show();

}

)

$("#pass1").keyup(

function() {

//$(this).css("border", "");

if($("#pass1").val() == "") {

$(".mimas2").text("请输入密码").show();

return false;

} else if($(this).val() != $("#pass").val()) {

$(".mimas2").text("两次密码输入不一致").show();

return false;

} else {

$(".mimas2").text("两次密码输入一致").show();

return true;

}

)

$(".denglu").click(

function() {

var reg1 = /^1[34578]\d{9}$/;

var reg2 = 5896;

var reg3 = /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,16}$/;

if(reg1.test($("#phone").val()) && $("#Code").val() == reg2 && reg3.test($("#pass").val()) && $("#pass1").val() == $("#pass").val()) {

location.href = "首页.html";

} else {

return false;

}

)

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史