先放效果图
可实现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;