简单的注册页面带验证

Html

Css

* {
	padding:0;
	margin:0;
}
#register {
	width:540px;
	height:407px;
	border:1px solid hotpink;
	margin:0 auto;
	margin-top:20px;
}
#register .row {
	height:50px;
	line-height:50px;
	border-bottom:1px dashed #ccc;
}
#register .row div {
	float:left;
	height:50px;
	line-height:50px;
}
#register .row .left {
	width:30%;
	text-align:right;
}
#register .row .right {
	width:70%;
}
#register .row .right input {
	width:200px;
	height:25px;
	border:1px solid #ccc;
	border-radius:4px;
	padding:0px 4px;
	margin-left:10px;
}
#register .row .right input[type=radio] {
	width:30px;
	height:15px;
	line-height:15px;
}
#register .row button {
	width:80px;
	height:30px;
	line-height:30px;
	margin:0 auto;
}
#bg {
	width:100%;
	height:800px;
	background:black;
	opacity:0.8;
	position:absolute;
	top:0px;
	z-index:10;
	display:none;
}
#msg-box {
	height:100px;
	line-height:100px;
	text-align:center;
	top:240px;
	position:absolute;
	z-index:100;
	display:none;
}
.loading {
	width:100px;
	margin-left:48%;
	background-image:url('loading.gif');
	background-repeat:no-repeat;
}
.success {
	width:400px;
	margin-left:34%;
	color:green;
	border:2px solid green;
}
.error {
	width:400px;
	margin-left:34%;
	color:red;
	border:2px solid red;
}

$(function($) {
    checkUsername();
    checkPhone();
    checkEmail();
    checkPwd();
    checkRpwd();

//选择注册按钮,绑定点击事件
    $('button').on("click", function() {
        reg();
    });
});
//设置一个标记
var flag = false;
//检测用户名
var checkUsername = function() {
    $('#username').on("blur", function() {
        var pattern = /^\w{6,18}$/;
        var element = $('#username');
        if (pattern.test(element.val())) {
            element.css("border", "2px solid green");
            flag = true;
        } else {
            element.css("border", "2px solid red");
            flag = false;
        }
    });
}

//检测手机号
var checkPhone = function() {
    $('#phone').on("blur", function() {
        var pattern = /^1(3|4|5|7|8|)\d{9}$/;
        var element = $('#phone');
        if (pattern.test(element.val())) {
            element.css("border", "2px solid green");
            flag = true;
        } else {
            element.css("border", "2px solid red");
            flag = false;
        }
    });
}

//检测邮箱
var checkEmail = function() {
    $('#email').on("blur", function() {
        var pattern = /^\w+@(\w+\.)+(([a-z]+)|([a-z]+\.[a-z]+))$/;
        var element = $('#email');
        if (pattern.test(element.val())) {
            element.css("border", "2px solid green");
            flag = true;
        } else {
            element.css("border", "2px solid red");
            flag = false;
        }
    });
}

//检测密码
var checkPwd = function() {
    $('#password').on("blur", function() {
        var pattern1 = /^[1-9]{6,18}$/;
        var pattern2 = /^[a-z]{6,18}$/;
        var pattern3 = /^[A-Z]{6,18}$/;
        var pattern4 = /^[0-9a-zA-Z~!@#$%^&*_-{6,18}]$/;
        var element = $('#password');
        if (pattern1.test(element.val()) || pattern2.test(element.val()) || pattern3.test(element.val()) || pattern4.test(element.val())) {
            element.css("border", "2px solid green");
            a = 11;
            flag = a;
        } else {
            element.css("border", "2px solid red");
            flag = false;
        }
    });
}

//检测再次输入的密码
var checkRpwd = function() {
    $('#rpassword').on("blur", function() {
        var element = $('#rpassword');
        if (element.val() == $('#password').val() && element.val() != '' && element.val().length > 5 && element.val().length < 18) {
            element.css("border", "2px solid green");
        } else {
            element.css("border", "2px solid red");
        }
    });
}

//获取性别
var getRadios = function() {
    var sex = $('input[type = "radio"]');
    for (var i in sex) {
        if (sex[i].checked) {
            return sex[i].value;
        }
    }
}

//注册
//给提交按钮绑定一个点击事件,在点击事件中提交输入的内容
var reg = function() {
    if (flag) {
        loading();
        $.post("url提交地址", {
                "username": $('#username').val(),
                "phone": $('#phone').val(),
                "email": $('#email').val(),
                "sex": getRadios('sex'),
                "password": $('#password').val()
            },
            function(data) {
                if (data.status) {
                    msg_box(data.msg);
                } else {
                    msg_box(data.msg, false);
                }
            }, 'json');
    }
}

function loading() {
    $('#bg').css('display', 'block'); //显示背景
    $('#msg-box').css('display', 'block'); //显示消息框
    $('#msg-box').addClass("loading"); //显示加载中图片
}

function msg_box(msg, flag = true) {
    $('#bg').css('display', 'block'); //显示背景
    $('#msg-box').css('display', 'block').removeClass('loading'); //显示消息框,并移除加载中图片
    flag = flag ? 'success' : 'error';
    $('#msg-box').addClass(flag);
    $('#msg-box').html(msg);
    var sec = 3;
    $('#msg-box').html(msg + sec + '秒后跳转...');
    setInterval(function() {
        sec--;
        $('#msg-box').html(msg + sec + '秒后跳转...');
        if (sec == 0) {
            // location.href = 'http://www.baidu.com';	//跳转页面
        }

}, 1000);
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

简单的注册页面带验证



代码描述：js判断输入的格式使用ajax提交信息

注释比较详细,可直接使用

2

最新

发表评论全部评论

暂时没有评论！

insist0

2017/11/13 0:11:11

你好，检测密码事件里面 a = 11; flag = a; 是什么意思。想请教下
回复

可乐0

2017/6/10 18:26:45

这个可以
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

??

相关代码

简单的注册页面带验证

最新