写一个注册页面,包含用户名、密码、二次输入密码、邮箱地址。
必须校验内容:
1. 用户名必须包含英文字母和数字;
2. 密码必须大于6位;
3. 两次密码必须一致;
4. 邮箱必须包含.com和@符号,@符号后必须是:gmail、163、qq、woniu其中之一;
5. 用户名、密码、二次输入密码、邮箱都不能为空。
body{
background-image: url("../img/q.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.login-frame {
width: 450px;
height: 500px;
margin-top: 200px;
}
.login-head {
width: 450px;
height: 70px;
background-color: rgba(37, 169, 210, 0.80);
text-align: center;
line-height: 100px;
font-size: 10px;
font-weight: bold;
color: rgba(245, 245, 245, 0.90);
padding-top: 1px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.login-main {
width: 450px;
height: 430px;
padding-top: 80px;
background-color: rgba(234, 232, 232, 0.70);
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
用户注册
var i = 0;
$("#password").click(function () {
let username = $("#username").val();
let errorMsg = $("#usernameerr");
const regex = /^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]+$/;
if (username == "") {
$("#usernameerr").attr("style", "color:red").text("用户名不为空")
} else if (!regex.test(username) && username != "") {
$("#usernameerr").attr("style", "color:red").text("用户名必须包含英文字母和数字")
} else if (regex.test(username)) {
errorMsg.remove();
i++
}
})
$(document).ready(function () {
$("#password").keyup(function () {
const password = $("#password").val();
if (password.length < 6) {
$("#passwordsure").attr("style", "color:red").text("密码必须大于6位")
} else {
$("#passwordsure").text("")
i++
}
});
});
$(document).ready(function () {
$("#confirm-password").keyup(function () {
var password1 = $("#password").val();
var password2 = $("#confirm-password").val();
let errorMsg = $("#passworderr")
if (password1 !== password2) {
$("#passworderr").attr("style", "color:red").text("两次密码不一致")
} else {
errorMsg.remove();
i++
}
})
});
$(document).ready(function () {
$("#email").keyup(function () {
const email = $("#email").val()
const regex = /[\w.-]+@(?:(?:gmail|163|qq|woniu)\.com)$/i;
if (!regex.test(email)) {
$("#emailerr").attr("style", "color:red").text("格式以@gmail|163|qq|woniu.com结尾")
} else {
$("#emailerr").text("")
i++
}
})
});
$("#but1").click(function () {
if (i == 4) {
alert('注册成功!');
}
})