HIS系统前端界面Ajax+JSON+JQ
HIS系统前端界面Ajax+JSON+JQ
这是我第一次在CSDN上面发表文章，里面的内容是我学习Web前端和在些HIS系统时的一些知识成果，由于代码比较多，所以先展示登陆注册模块的代码。源码下载链接 HIS系统源代码及说明.rar
登陆
"en">
"UTF-8">
登录页面
"stylesheet" type="text/css" href="CSS/login.css"/>
"login_frame">
"image_logo"> ;HIS 系统
注册
"utf-8">
表单验证
"CSS/register.css" rel="stylesheet">
CSS样式
login的CSS
body {
background-image: url("../pic/652451909383749634.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-color: #C6E3F8;
}
#login_frame {
width: 400px;
height: 260px;
padding: 13px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
background-color: rgba(240, 255, 255, 0.5);
border-radius: 10px;
text-align: center;
}
form p > * {
display: inline-block;
vertical-align: middle;
}
#image_logo {
margin-top: 22px;
color:#4EBAEC;
text-shadow: 1px 1px white,-1px -1px white, 1px -1px white, -1px 1px white;
font-size: 50px;
font-family:"Microsoft YaHei"；
}
.label_input {
font-size: 14px;
font-family: 宋体;
width: 65px;
height: 28px;
line-height: 28px;
text-align: center;
color: white;
background-color: #3CD8FF;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.text_field {
width: 278px;
height: 28px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: 0;
}
#btn_login,#btn_register {
font-size: 14px;
font-family: 宋体;
width: 50px;
height: 28px;
line-height: 28px;
text-align: center;
color: white;
background-color: #3BD9FF;
border-radius: 6px;
border: 0;
float: left;
}
#forget_pwd {
font-size: 12px;
color: white;
text-decoration: none;
position: relative;
float: right;
top: 5px;
}
#forget_pwd:hover {
color: blue;
text-decoration: underline;
}
#login_control {
padding: 0 28px;
}
register的CSS
@charset "utf-8";
/* CSS Document */
body {
background-color: #C6E3F8;
}
.picbor{
border: solid 1px black;
}
.button{
/*width: 60px;
height: 25px;
-moz-border-radius: 5px; /* Gecko browsers */
/* -webkit-border-radius: 5px; /* Webkit browsers */
/* border-radius:5px; /* W3C syntax */
font-size: 14px;
font-family: 宋体;
width: 50px;
height: 28px;
line-height: 28px;
text-align: center;
color: white;
background-color: #3BD9FF;
border-radius: 6px;
border: 0;
}
span {
display: inline-block;
}
#form1{
background-image: url("../pic/652451909383749634.jpg");
/*background-size: 100%;*/
width: 100%;
height: 100%;
background-repeat: no-repeat;
}
table{
margin: 0 auto;
width:700px;
background-color: rgba(240, 255, 255, 0.5);
}
.title{
color:#4EBAEC;
text-shadow: 1px 1px white,-1px -1px white, 1px -1px white, -1px 1px white;
font-size: 40px;
font-family:"Microsoft YaHei"；
}
input {
border-radius: 5px;
border: 0;
}
JavaScript
JS部分有用ajax读取json数据，一般情况下，json文件会被浏览器给拦截，ajax的get请求无法读取到json文件，而我一般是在Dw用火狐浏览器来实时预览就可以读取到json文件内容。
login
$(document).ready(function () {
$("#btn_login").click(function(){
var user = $("#username").val();
var pwd = $("#password").val();
//alert(user);
if(user==null||pwd==null){
alert("用户名或者密码不能为空！");
}else{
$.ajax({
type:"get",
url:"./JSON/user.json",
dataType:"json",
async: false,
success:function(data){
$.each(data.users, function(i, item) {
if(item.user==user&&item.pwd==pwd){
window.location.href="./guahao.html";
}
});
alert("用户名或者密码错误！");
}
});
}
});
});
register
// JavaScript Document
function fyz() //封装一个中做成点击事件的函数
{
var user = document.getElementById("user").value;//通过id名 找到 元素并重新 赋值
var username = document.getElementById("username").value;
var pwd = document.getElementById("pwd").value;
var pwdtow = document.getElementById("pwdtow").value;
var question = document.getElementById("question").value;
var answer = document.getElementById("answer").value;
var mail = document.getElementById('mail').value;
var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/; //正则表达式用于验证电子邮箱
var phone = document.getElementById('phone').value;
var tel = document.getElementById('tel').value;
var userid = document.getElementById('userid').value;
if(user===null||user===""||username===null||username===""||pwd===null||pwd===""||pwdtow===null||pwdtow===""||question===null||question===""||answer===null||answer==="")
{
alert("带*的输入框不能为空"); //输出不满足条件的提示内容
return false;
}
else if(pwd!==pwdtow)
{
alert("两次输入的密码不相同");
return false;
}else if(mail!==""&&!re.test(mail))
{
alert("邮箱格式不正确");
return false;
}else if(phone!==""&&!(/^1[3456789]\d{9}$/.test(phone)))//正则验证手机号码
{
alert("手机号码错误！");
return false;
}else if(tel!==""&&!/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(tel))//验证联系电话
{
alert("联系电话错误");
}else if(userid!==""&&!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/).test(userid))//验证15位和18位的居民身份证
{
alert("身份证号错误！");
return false;
}else{
return true;
}
}
function doReset(){
document.getElementById("user").value='';
document.getElementById("username").value='';
document.getElementById("pwd").value='';
document.getElementById("aply").value='';
document.getElementById("pwdtow").value='';
document.getElementById("where").value='';
document.getElementById("question").value='';
document.getElementById("answer").value='';
document.getElementById("year").value='';
document.getElementById("mail").value='';
document.getElementById("userid").value='';
document.getElementById("phone").value='';
document.getElementById("tel").value='';
document.getElementById("whereID").value='';
}
图片展示:
登陆注册
注册里面有对密码，邮箱，手机号码，身份证号的简单数据校验
其他模块的页面展示
挂号
查看病历
查看药方
