java ajax登录系统代码_javaweb实现注册页面（数据库连接以及ajax验证）

先放效果图

可实现js实时验证

  

 

 

可实现ajax实时验证注册信息是否存在

 

页面实现要求

1登录账号：要求由6到12位字母、数字、下划线组成，只有字母可以开头；(1分)

2登录密码：要求显示“• ”或“*”表示输入位数，密码要求八位以上字母、数字组成。(1分)

3性别：要求用单选框或下拉框实现，选项只有“男”或“女”；(1分)

4学号：要求八位数字组成，前四位为“2018”开头，输入自己学号；(1分)

5姓名：输入自己的姓名；

5电子邮箱：要求判断正确格式xxxx@xxxx.xxxx；(1分)

6点击“添加”按钮，将学生个人信息存储到数据库中。(3分)

7可以演示连接上数据库。(2分)

实现思路

实现的思路非常简单，前端做好表单及js验证，后端接收表单填写数据并插入数据库

难点：ajax实时验证primary key对应列内容在数据库中是否已经存在，若存在，则提示错误信息

下面贴上代码：

首先是前端页面代码：

pageEncoding="utf-8"%>

添加信息

body{

background-image:url(./library/3d效果/QQ图片20191015211520.jpg);

}

.container{

margin-top:100px;

border-radius:10px;

padding-top:50px;

padding-bottom:50px;

align:center;

background-color:white;

opacity:0.8;

width:500px;

}

form{

margin-top:20px;

}

.form-group{

align:center;

width:350px;

margin:auto;

position:relative;

}

h2{

border-bottom:5px solid red;

padding-bottom:10px;

text-align:center;

width:100%;

}

.label{

float:left;

width:80px;

margin-top:7px;

margin-right:5px;

text-align:left;

}

.form-control{

width:200px;

margin-top:7px;

}

.sex{

border:0px solid #000;

width:200px;

margin-top:7px;

}

.sign{

width:160px;

margin-top:10px;

}

.tip{

position:relative;

width:100%;

height:auto;

padding:5px;

}

.tip .tipicon{

float:left;

background-image:url(img/warn.png);

background-repeat:no-repeat;

background-position:center;

background-size:cover;

width:20px;

height:20px;

}

.tipmessage{

color:red;

font-size:15px;

}

.tip{

display:none;

}

.righttip{

display:none;

position:absolute;

right:8px;

top:8px;

width:25px;

height:25px;

background-image:url(img/zhengque.png);

background-repeat:no-repeat;

background-position:center;

background-size:cover;

}

function isMobileNumber(phone) {

var flag = false;

var message = "";

var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[4-9]{1})|(18[0-9]{1})|(199))+\d{8})$/;

if (myreg.test(phone)){

flag = true;

}

return flag;

}

function GetQueryString(name) {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配

var context = "";

if (r != null)

context = r[2];

reg = null;

r = null;

return context == null || context == "" || context == "undefined" ? "" : context;

}

function isEmail(email){

//对电子邮件的验证

var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

if(!myreg.test(email)){

return false;</