一个简单的HTML页面 利用javascript知识点 和正则表达公式 练习巩固一下
然后突发奇想 仿制一下QQ的注册页面(仅校验部分)
一、前言
欧克欧克，完事了 总结一下 模仿的超级烂 但是里面知识点 是javascript中比较经典的了 因为这些功能截止到现在大都相同 剩下的就是细节优化 界面美化了 看图
1.1、表单提交的效果图
1.2、表单校验信息提示效果图
二、主要代码
2.1、<style>部分
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background: url("img/register_bg.png") no-repeat center;
padding-top: 25px;
}
.rg_layout {
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
}
.rg_left {
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left > p:first-child {
color: #FFD026;
font-size: 20px;
}
.rg_left > p:last-child {
color: #A6A6A6;
font-size: 20px;
}
.rg_center {
float: left;
/* border: 1px solid red;*/
}
.rg_right {
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p:first-child {
font-size: 15px;
}
.rg_right p a {
color: pink;
}
.td_left {
width: 100px;
text-align: right;
height: 45px;
}
.td_right {
padding-left: 50px;
}
#username, #password, #email, #name, #phone, #birthday, #checkcode {
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode {
width: 110px;
}
#img_check {
height: 32px;
vertical-align: middle;
}
#btn_sub {
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
}
#cen_sub {
padding-left: 150px;
}
#chck {
color: #A6A6A6;
padding-left: 150px;
padding-top: 20px;
}
/*提示成功显示*/
.error {
color: red;
}
span{
margin-left: 100px;
}
.correct {
display: inline-block;
width: 10px;
height: 3px;
background: #008100;
line-height: 0;
font-size: 0;
vertical-align: middle;
-webkit-transform: rotate(45deg);
}
.correct:after {
content: '/';
display: block;
width: 20px;
height: 3px;
background: #008100;
-webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);
}
#img_static{
width: 20px;height: 15px;
}
</style>2.2、<script>部分
<script>
window.onload = function () {
//绑定onsubmit事件
document.getElementById("form").onsubmit = function () {
//用户校验
//密码校验
//邮箱校验
//姓名校验
//手机号校验
//出生日期校验
//验证码校验
//服务条款校验
img_static();
return checkUsername() && checkPassword() && checkEamil() && checkName() && checkPhone() && checkBirthday() && checkbox();
}
//给用户名和密码框分别绑定离焦事件
document.getElementById("username").onmouseout = checkUsername;
document.getElementById("password").onmouseout = checkPassword;
document.getElementById("email").onmouseout = checkEamil;
document.getElementById("name").onmouseout = checkName;
document.getElementById("phone").onmouseout = checkPhone;
document.getElementById("birthday").onmouseout = checkBirthday;
document.getElementById("img_static").onmouseup = img_static;
document.getElementById("btn_sub").onmouseup = checkbox;
}
//用户校验
function checkUsername() {
//获取值
var username = document.getElementById("username").value;
//定义正则
var reg_username = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;//帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)
//校验正则
var flag = reg_username.test(username);
//提示信息
var s_username = document.getElementById("s_username");
if (flag) {
//true
// s_username.innerHTML = "<span class='correct'></span>";
s_username.innerHTML = "<img src='img/ok_green.png' style='height: 25px;margin-right: 50px;'></img>";
} else {
s_username.innerHTML = "<img src='img/no.png' style='height: 25px;margin-right: 50px;'>账户错误</img>";
// s_password.innerHTML = "字母开头";
}
return flag;
}
//密码校验
function checkPassword() {
//获取值
var password = document.getElementById("password").value;
//定义正则
var reg_password = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$/;//强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间)
//校验正则
var flag = reg_password.test(password);
//提示信息
var s_password = document.getElementById("s_password");
if (flag) {
//true
// s_username.innerHTML = "<span class='correct'></span>";
s_password.innerHTML = "<img src='img/ok_green.png' style='height: 25px;margin-right: 50px;'></img>";
} else {
s_password.innerHTML = "<img src='img/no.png' style='height: 25px;margin-right: 50px;'>密码错误</img>";
// s_password.innerHTML = "包含大小写字母和数字";
}
return flag;
}
//邮箱校验
function checkEamil() {
var email = document.getElementById("email").value;
var reg_email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//邮箱校验
var flag = reg_email.test(email);
var s_email = document.getElementById("s_email");
if (flag) {
s_email.innerHTML = "<img src='img/ok_green.png' style='height: 25px;margin-right: 50px;'></img>";
} else {
s_email.innerHTML = "<img src='img/no.png' style='height: 25px;margin-right: 50px;'>邮箱错误</img>";
}
return flag;
}
//姓名校验
function checkName() {
var name = document.getElementById("name").value;
var reg_name = /^[\u4e00-\u9fa5]{2,6}$/;//汉字
var flag = reg_name.test(name);
var s_name = document.getElementById("s_name");
if (flag) {
s_name.innerHTML = "<img src='img/ok_green.png' style='height: 25px;margin-right: 50px;'></img>";
} else {
s_name.innerHTML = "<img src='img/no.png' style='height: 25px;margin-right: 50px;'>姓名错误</img>";
}
return flag;
}
//手机号校验
function checkPhone() {
var phone = document.getElementById("phone").value;
var reg_phone = /^(13[0-9]|17[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;//手机号
var flag = reg_phone.test(phone);
var s_phone = document.getElementById("s_phone");
if (flag) {
s_phone.innerHTML = "<img src='img/ok_green.png' style='height: 25px;margin-right: 50px;'></img>";
} else {
s_phone.innerHTML = "<img src='img/no.png' style='height: 25px;margin-right: 50px;'>手机号错误</img>";
}
return flag;
}
//出生日期校验
function checkBirthday() {
var birthday = document.getElementById("birthday").value;
var reg_birthday = /^((?:19[2-9]\d{1})|(?:20(?:(?:0[0-9])|(?:1[0-8])|(?:2[0-8]))))\-((?:0?[1-9])|(?:1[0-2]))\-((?:0?[1-9])|(?:[1-2][0-9])|30|31)$/;// 更加高级的可以说根据时间变化 动态获取年满18岁的出生日期正则
//参考文章https://www.jb51.net/article/136913.htm
var flag = reg_birthday.test(birthday);
var s_birthday = document.getElementById("s_birthday");
if (flag) {
s_birthday.innerHTML = "<img src='img/ok_green.png' style='height: 25px;margin-right: 50px;'></img>";
} else {
s_birthday.innerHTML = "<img src='img/no.png' style='height: 25px;margin-right: 50px;'>出生日期错误</img>";
}
return flag;
}
//用户协议校验
var flag = false;
function img_static() {
var img = document.getElementById("img_static");
var xieyi = document.getElementById("xieyi");
if (flag){
img.src = "https://qq-web.cdn-go.cn/zc.qq.com/9315f3d4/v3/img/up.png";
xieyi.style.display = 'none';
flag = false;
}else{
img.src = "https://qq-web.cdn-go.cn/zc.qq.com/9315f3d4/v3/img/down.png";
xieyi.style.display = 'inline';
flag = true;
}
}
//多选框校验
function checkbox() {
var cb = document.getElementsByName("cb");
var length = cb.length;
// alert(length)
for (let i = 0; i < cb.length; i++) {
if (cb[i].checked == true){
alert("提交表单成功")
return true
}else{
alert("请先进行协议同意")
return false;
}
}
}
</script>2.3、<HTML>部分
这部分就不贴出来了 自己在做的时候 很大程度的限制了 对于排版 界面的美观 换句话说 不够简洁 太low 所以 小伙伴们可以学习一下 css代码 script部分的代码也是 边学边用 所以很多地方都有写了详细注释 对于重复部分的可能没有注释就
三、不足 改进
1、不够简洁(整个页面看起来 很繁琐 没有QQ注册的那种简洁 )
2、用户体验感差(整个注册规则貌似只有自己知道 或者看注释才能知道 所以没有很好的将详细提示信息展示出来)
3、升级日期校验(日期框框的校验部分 还可以在高级一点 就是只允许年龄满18周岁的人注册)
4、验证码校验 (因为这个小案例中的验证码是图片插入形式 所以 很大程度上校验是不够完整或者说意义不太大 在后面改进的话 是通过MATH.Rondom()随机生成数字 然后在getelementById 就可以获取文本框中的值了)
3438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
