html验证注册页面信息,简单的注册页面带验证

$(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);

}